/* ══════════════════════════════════════════════════════════════════════
   Thème Excelia — Phénix Store
   Repris de la maquette validée (`maquettes/site-phenix-store.html`).

   Deux transformations par rapport à la maquette :
   — classes et variables préfixées `phx-`, sans quoi `.p`, `.s`, `.carte`
     ou `.btn` entreraient en collision avec Bootstrap et avec le thème
     Classic dont celui-ci hérite ;
   — sélecteurs d'éléments nus (`section`, `table`, `details`, `footer`)
     cantonnés à nos conteneurs : sur une page PrestaShop ils
     s'appliqueraient sinon au balisage des modules et du thème parent.

   La maquette s'appuie sur la pile système : SF Pro sur Mac, Segoe sur
   Windows. C'est ce rendu-là qui a été validé, on ne charge pas de police
   distante.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --phx-ink:#0b0d11; --phx-ink-2:#161a21; --phx-muted:#5d6272; --phx-line:#e6e8ec;
  --phx-surface:#f6f7f9; --phx-paper:#fff; --phx-brand:#0a4ea8; --phx-brand-d:#083d83;
  --phx-sable:#f0ece5; --phx-vert:#0f7b4f; --phx-r:18px; --phx-r-lg:26px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--phx-paper);color:var(--phx-ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;cursor:pointer}
button{font:inherit;cursor:pointer}
.phx-wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.phx-d{font-weight:680;letter-spacing:-.03em;line-height:1.1;margin:0}
.phx-eyebrow{font-size:11px;letter-spacing:.17em;text-transform:uppercase;font-weight:700;color:var(--phx-muted)}
.phx-hidden{display:none !important}

/* ── bandeau + en-tête ── */
.phx-annonce{background:var(--phx-ink);color:#dfe3ea;font-size:13px;text-align:center;padding:9px 16px}
.phx-entete{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--phx-line)}
.phx-entete .phx-wrap{display:flex;align-items:center;gap:30px;height:66px}
.phx-marque{font-weight:760;letter-spacing:-.03em;font-size:19px;flex:0 0 auto}
.phx-marque span{color:var(--phx-brand)}
.phx-entete nav{display:flex;gap:24px;font-size:14.5px;font-weight:520;color:#3d434f}
.phx-entete nav a:hover{color:var(--phx-brand)}
.phx-entete .phx-fin{margin-left:auto;display:flex;gap:8px;align-items:center}
.phx-ico{background:none;border:0;padding:8px;border-radius:10px;color:#3d434f;display:flex}
.phx-ico:hover{background:var(--phx-surface)}
.phx-ico svg{width:20px;height:20px}
.phx-pastille{position:relative}
.phx-pastille b{position:absolute;top:1px;right:1px;background:var(--phx-brand);color:#fff;font-size:10px;
  font-weight:700;border-radius:999px;min-width:16px;height:16px;display:flex;align-items:center;
  justify-content:center;padding:0 4px}
.phx-burger{display:none}

/* ── recherche ── */
.phx-recherche{position:fixed;inset:0;z-index:80;background:rgba(11,13,17,.45);
  backdrop-filter:blur(4px);display:flex;justify-content:center;padding-top:14vh}
.phx-recherche .phx-boite{background:#fff;border-radius:var(--phx-r);width:min(640px,92vw);height:fit-content;
  padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.25)}
.phx-recherche input{width:100%;border:1px solid var(--phx-line);border-radius:12px;padding:15px 16px;
  font-size:16px;outline:none}
.phx-recherche input:focus{border-color:var(--phx-brand)}
.phx-recherche .phx-sug{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.phx-recherche .phx-sug button{border:1px solid var(--phx-line);background:#fff;border-radius:999px;
  padding:8px 14px;font-size:13.5px;color:#3d434f}

/* ── panier ── */
.phx-tiroir{position:fixed;inset:0;z-index:90;display:flex;justify-content:flex-end}
.phx-tiroir .phx-voile{position:absolute;inset:0;background:rgba(11,13,17,.42)}
.phx-tiroir .phx-panneau{position:relative;background:#fff;width:min(420px,92vw);height:100%;
  padding:26px;display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.2)}
.phx-tiroir h3{margin:0 0 20px;font-size:19px;font-weight:660;letter-spacing:-.02em}
.phx-ligne-panier{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--phx-line)}
.phx-ligne-panier img{width:58px;height:58px;object-fit:contain;background:var(--phx-surface);border-radius:10px;padding:5px}
.phx-ligne-panier .phx-t{font-size:14.5px;font-weight:600;line-height:1.35}
.phx-ligne-panier .phx-s{font-size:13px;color:var(--phx-muted);margin-top:2px}
.phx-tiroir .phx-total{margin-top:auto;padding-top:20px;border-top:1px solid var(--phx-line);
  display:flex;justify-content:space-between;font-weight:680;font-size:18px}
.phx-vide{color:var(--phx-muted);font-size:14.5px;padding:30px 0}

/* ── boutons ── */
.phx-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;
  padding:15px 26px;font-weight:640;font-size:15px;border:1px solid transparent;transition:.15s}
.phx-btn-1{background:var(--phx-ink);color:#fff}
.phx-btn-1:hover{background:#000}
.phx-btn-2{background:transparent;border-color:currentColor}
.phx-btn-3{background:var(--phx-brand);color:#fff}
.phx-btn-3:hover{background:var(--phx-brand-d)}

/* ── accueil : héros ── */
.phx-heros{background:linear-gradient(155deg,#0b0d11 0%,#151b27 52%,#0c1930 100%);color:#fff;
  overflow:hidden;position:relative}
.phx-heros .phx-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;
  padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(40px,6vw,80px)}
.phx-heros .phx-pill{display:inline-block;font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  font-weight:700;color:#9ec4f5;border:1px solid rgba(158,196,245,.34);border-radius:999px;
  padding:6px 13px;margin-bottom:20px}
.phx-heros h1{font-size:clamp(32px,5vw,58px);letter-spacing:-.035em;line-height:1.05;margin:0 0 18px}
.phx-heros p{color:#c2c9d6;font-size:clamp(15px,1.7vw,18px);max-width:32em;margin:0 0 28px}
.phx-heros .phx-actions{display:flex;gap:12px;flex-wrap:wrap}
.phx-heros .phx-visuel{position:relative}
.phx-heros .phx-visuel img{width:100%;border-radius:var(--phx-r-lg)}
.phx-heros .phx-flottant{position:absolute;left:-14px;bottom:20px;background:rgba(255,255,255,.1);
  backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);border-radius:16px;
  padding:14px 18px;font-size:13.5px}
.phx-heros .phx-flottant b{display:block;font-size:22px;letter-spacing:-.02em}

/* ── bandes ── */
.phx-wrap section{padding:clamp(48px,6.5vw,86px) 0}
.phx-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px}
.phx-tete h2{font-size:clamp(22px,3vw,34px);letter-spacing:-.03em;font-weight:680;margin:6px 0 0}
.phx-tete a{font-size:14.5px;color:var(--phx-brand);font-weight:560;white-space:nowrap}

.phx-reassure{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.phx-reassure div{border:1px solid var(--phx-line);border-radius:var(--phx-r);padding:20px;background:var(--phx-sable)}
.phx-reassure svg{width:21px;height:21px;color:var(--phx-ink);margin-bottom:12px}
.phx-reassure b{display:block;font-size:14.5px;font-weight:650}
.phx-reassure span{display:block;font-size:13.5px;color:#5d6272;margin-top:3px}

.phx-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.phx-cat{border-radius:var(--phx-r);padding:24px 20px;min-height:132px;display:flex;flex-direction:column;
  justify-content:flex-end;color:#fff;position:relative;overflow:hidden;transition:.18s}
.phx-cat:hover{transform:translateY(-3px)}
.phx-cat b{font-size:16.5px;font-weight:650;letter-spacing:-.01em}
.phx-cat span{font-size:13px;opacity:.72;margin-top:2px}

.phx-produits{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:18px}
.phx-carte{border:1px solid var(--phx-line);border-radius:var(--phx-r-lg);overflow:hidden;background:#fff;
  transition:.18s;display:flex;flex-direction:column}
.phx-carte:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(11,13,17,.08)}
.phx-carte .phx-vue{background:var(--phx-surface);padding:26px;display:flex;justify-content:center;
  aspect-ratio:1/1;position:relative}
.phx-carte .phx-vue img{height:100%;width:auto;object-fit:contain}
.phx-etiq{position:absolute;top:14px;left:14px;background:var(--phx-ink);color:#fff;font-size:11px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.phx-etiq.promo{background:#c0392b}
.phx-carte .phx-txt{padding:20px;display:flex;flex-direction:column;flex:1}
.phx-carte .phx-txt .phx-m{font-size:11.5px;color:var(--phx-muted);letter-spacing:.08em;text-transform:uppercase;font-weight:650}
.phx-carte .phx-txt h3{margin:6px 0 0;font-size:17px;font-weight:640;letter-spacing:-.015em}
.phx-carte .phx-txt .phx-sp{font-size:13.5px;color:var(--phx-muted);margin-top:6px;line-height:1.5}
.phx-carte .phx-txt .phx-p{margin-top:auto;padding-top:14px;display:flex;align-items:baseline;gap:8px}
.phx-carte .phx-txt .phx-p b{font-size:20px;font-weight:700;letter-spacing:-.03em}
.phx-carte .phx-txt .phx-p s{font-size:14px;color:var(--phx-muted)}
.phx-teintes-mini{display:flex;gap:6px;margin-top:10px}
.phx-teintes-mini i{width:15px;height:15px;border-radius:50%;box-shadow:0 0 0 1px var(--phx-line)}

.phx-bande-paiement{background:var(--phx-ink);color:#fff;border-radius:var(--phx-r-lg);
  padding:clamp(28px,4.5vw,50px);display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center}
.phx-bande-paiement h2{font-size:clamp(22px,3vw,32px);letter-spacing:-.03em;margin:0 0 12px}
.phx-bande-paiement p{color:#b6bdca;margin:0;max-width:34em}
.phx-bande-paiement .phx-chiffre{font-size:clamp(34px,5vw,54px);font-weight:720;letter-spacing:-.04em;line-height:1}
.phx-bande-paiement .phx-chiffre span{display:block;font-size:14px;font-weight:400;color:#9aa3b2;
  letter-spacing:0;margin-top:8px}

.phx-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,52px);align-items:center}
.phx-split img{border-radius:var(--phx-r-lg);width:100%}
.phx-split h2{font-size:clamp(22px,3vw,34px);letter-spacing:-.03em;margin:8px 0 14px}
.phx-split p{color:#4a505d;margin:0 0 18px;max-width:34em}

.phx-avis{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.phx-avis article{border:1px solid var(--phx-line);border-radius:var(--phx-r);padding:24px;background:#fff}
.phx-etoiles{color:#e8a020;letter-spacing:.09em;font-size:14px}
.phx-avis p{font-size:14.5px;color:#3d434f;margin:12px 0 14px;line-height:1.6}
.phx-avis .phx-qui{font-size:13.5px;color:var(--phx-muted);font-weight:560}

.phx-boutique{background:var(--phx-sable);border-radius:var(--phx-r-lg);padding:clamp(28px,4.5vw,52px);
  display:grid;grid-template-columns:1.2fr 1fr;gap:34px;align-items:center}
.phx-boutique h2{font-size:clamp(22px,3vw,32px);letter-spacing:-.03em;margin:0 0 12px}
.phx-boutique p{color:#5d6272;margin:0 0 8px;max-width:32em}
.phx-horaires{font-size:14.5px;color:#3d434f;margin-top:16px}
.phx-horaires b{display:block;font-weight:650}

.phx-pied{background:var(--phx-ink);color:#aeb6c2;padding:56px 0 30px;font-size:14px}
.phx-pied .phx-cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.phx-pied h4{color:#fff;font-size:14px;font-weight:650;margin:0 0 14px}
.phx-pied ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.phx-pied a:hover{color:#fff}
.phx-pied .phx-bas{margin-top:38px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:#8b93a1}
.phx-cartes{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.phx-cartes span{border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:5px 8px;font-size:10.5px;
  font-weight:700;letter-spacing:.04em;color:#c9cfda}

/* ── page produit ── */
.phx-fil{font-size:13px;color:var(--phx-muted);padding:22px 0 4px}
.phx-produit{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(26px,4.5vw,60px);align-items:start;padding:12px 0 8px}
.phx-galerie{position:sticky;top:90px}
.phx-visuel-p{background:var(--phx-surface);border:1px solid var(--phx-line);border-radius:var(--phx-r-lg);
  padding:clamp(18px,3.5vw,44px);display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1;overflow:hidden}
.phx-visuel-p img{width:100%;height:100%;object-fit:contain}
.phx-vignettes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.phx-vignettes button{background:var(--phx-surface);border:1px solid var(--phx-line);border-radius:14px;
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:9px}
.phx-vignettes button.on{border-color:var(--phx-ink);box-shadow:0 0 0 1px var(--phx-ink)}
.phx-vignettes img{width:100%;height:100%;object-fit:contain}

.phx-infos .phx-eyebrow{display:block;margin-bottom:11px}
.phx-titre{font-size:clamp(28px,3.5vw,42px)}
.phx-notes{display:flex;align-items:center;gap:10px;margin:15px 0 0;font-size:14px;color:var(--phx-muted)}
.phx-prix-bloc{margin:24px 0 0;display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.phx-prix{font-size:34px;font-weight:720;letter-spacing:-.035em}
.phx-prix-note{font-size:13.5px;color:var(--phx-muted)}
.phx-mensu{margin:9px 0 0;font-size:14px;color:var(--phx-brand);font-weight:560}
.phx-mensu u{text-underline-offset:3px}

.phx-champ{margin-top:28px}
.phx-champ .phx-lab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px}
.phx-champ .phx-lab b{font-size:12.5px;font-weight:680;letter-spacing:.05em;text-transform:uppercase}
.phx-champ .phx-lab em{font-style:normal;font-size:14px;color:var(--phx-muted)}
.phx-teintes{display:flex;gap:12px}
.phx-teintes button{width:42px;height:42px;border-radius:50%;border:0;box-shadow:0 0 0 1px var(--phx-line);transition:.15s}
.phx-teintes button.on{box-shadow:0 0 0 1.5px var(--phx-ink),inset 0 0 0 3px #fff}
.phx-tailles{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px}
.phx-tailles button{border:1px solid var(--phx-line);border-radius:14px;padding:12px;text-align:center;
  line-height:1.3;background:#fff;transition:.15s}
.phx-tailles button.on{border-color:var(--phx-ink);box-shadow:0 0 0 1px var(--phx-ink);background:var(--phx-surface)}
.phx-tailles b{display:block;font-size:15px;font-weight:640}
.phx-tailles span{display:block;font-size:13px;color:var(--phx-muted);margin-top:2px}

.phx-qte{display:flex;align-items:center;gap:0;border:1px solid var(--phx-line);border-radius:999px;
  width:fit-content;margin-top:24px;overflow:hidden}
.phx-qte button{background:none;border:0;padding:12px 18px;font-size:18px;color:#3d434f}
.phx-qte button:hover{background:var(--phx-surface)}
.phx-qte span{min-width:34px;text-align:center;font-weight:640}

.phx-actions-p{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.phx-dispo{display:flex;align-items:center;gap:9px;margin-top:15px;font-size:14.5px;color:#3d434f}
.phx-dot{width:8px;height:8px;border-radius:50%;background:var(--phx-vert)}
.phx-puces{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:9px}
.phx-puces li{display:flex;gap:10px;font-size:14.5px;color:#3d434f}
.phx-puces svg{flex:0 0 auto;margin-top:3px;color:var(--phx-brand);width:17px;height:17px}
.phx-services{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.phx-service{border:1px solid var(--phx-line);border-radius:var(--phx-r);padding:15px 17px;background:var(--phx-sable)}
.phx-service b{display:block;font-size:14px;font-weight:650}
.phx-service span{display:block;font-size:13.5px;color:#5d6272;margin-top:2px}

.phx-barre{position:fixed;left:0;right:0;bottom:0;z-index:55;background:rgba(255,255,255,.93);
  backdrop-filter:saturate(180%) blur(16px);border-top:1px solid var(--phx-line);
  transform:translateY(110%);transition:transform .25s}
.phx-barre.on{transform:none}
.phx-barre .phx-wrap{display:flex;align-items:center;gap:16px;height:72px}
.phx-barre img{width:44px;height:44px;object-fit:contain;background:var(--phx-surface);border-radius:10px;padding:4px}
.phx-barre .phx-t{font-weight:620;font-size:15px;letter-spacing:-.01em}
.phx-barre .phx-p{font-size:13.5px;color:var(--phx-muted)}
.phx-barre .phx-btn{margin-left:auto;padding:13px 28px}

.phx-onglets{display:flex;gap:26px;border-bottom:1px solid var(--phx-line);margin-top:22px}
.phx-onglets button{background:none;border:0;padding:0 0 13px;font-weight:660;font-size:15px;
  color:var(--phx-muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.phx-onglets button.on{color:var(--phx-ink);border-bottom-color:var(--phx-ink)}

.phx-edito{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;
  margin:clamp(40px,6vw,80px) 0}
.phx-edito img{border-radius:var(--phx-r-lg)}
.phx-edito h3{font-size:clamp(22px,2.8vw,32px);letter-spacing:-.03em;font-weight:680;margin:0 0 14px}
.phx-edito p{color:#4a505d;margin:0;max-width:34em;font-size:16.5px}
.phx-sombre-b{background:var(--phx-ink);color:#fff;border-radius:var(--phx-r-lg);padding:clamp(28px,4.5vw,56px);
  text-align:center;margin:clamp(40px,6vw,80px) 0}
.phx-sombre-b .phx-n{font-size:clamp(28px,4.6vw,48px);font-weight:720;letter-spacing:-.035em}
.phx-sombre-b p{color:#b6bdca;max-width:38em;margin:14px auto 0}
.phx-diaph{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2.6vw,34px);margin-top:32px}
.phx-diaph i{display:block;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);
  background:radial-gradient(circle at 33% 29%,rgba(150,190,245,.4),rgba(255,255,255,.03) 68%)}
.phx-diaph figcaption{font-size:12.5px;color:#8d96a6;margin-top:10px;font-variant-numeric:tabular-nums}
.phx-diaph figure{margin:0;text-align:center}

.phx-wrap table{width:100%;border-collapse:collapse;font-size:15px;margin-top:26px}
.phx-wrap th, .phx-wrap td{padding:14px 17px;border-bottom:1px solid var(--phx-line);text-align:left;vertical-align:top}
thead th{background:var(--phx-ink);color:#fff;border-bottom:0;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase}
thead th:first-child{border-radius:12px 0 0 0}
thead th:last-child{border-radius:0 12px 0 0}
tbody th{width:30%;font-weight:600;background:var(--phx-surface)}
.phx-comp td{text-align:center;font-variant-numeric:tabular-nums}

.phx-wrap details{border:1px solid var(--phx-line);border-radius:var(--phx-r);margin-bottom:10px;background:#fff}
.phx-wrap details[open]{background:var(--phx-surface)}
.phx-wrap summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:600;display:flex;
  justify-content:space-between;gap:16px;align-items:center}
.phx-wrap summary::-webkit-details-marker{display:none}
.phx-wrap summary::after{content:"+";font-size:21px;color:var(--phx-brand);font-weight:300}
.phx-wrap details[open] summary::after{content:"–"}
.phx-wrap details .phx-rep{padding:0 22px 20px;margin:0;color:#4a505d}

.phx-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);z-index:100;
  background:var(--phx-ink);color:#fff;padding:14px 22px;border-radius:999px;font-size:14.5px;
  font-weight:560;transition:transform .3s;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.phx-toast.on{transform:translate(-50%,0)}

.phx-legal{color:var(--phx-muted);font-size:12.5px;line-height:1.7;border-top:1px solid rgba(255,255,255,.12);
  margin-top:26px;padding-top:20px}

@media(max-width:980px){
  .phx-heros .phx-wrap,.phx-split,.phx-bande-paiement,.phx-boutique,.phx-produit,.phx-edito{grid-template-columns:1fr}
  .phx-galerie{position:static}
  .phx-galerie-corps{grid-template-columns:minmax(0,1fr)}
  .phx-vignettes{flex-direction:row;overflow-x:auto;order:2}
  .phx-vignettes button{flex:0 0 auto}
  .phx-entete nav{display:none}
  .phx-burger{display:flex}
  .phx-pied .phx-cols{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .phx-actions-p{grid-template-columns:1fr}
  .phx-services{grid-template-columns:1fr}
  tbody th{width:42%}
  .phx-wrap th, .phx-wrap td{padding:12px 13px}
  .phx-pied .phx-cols{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════════
   Ajustements PrestaShop
   Le thème Classic et ses scripts injectent des éléments que la maquette
   ne prévoyait pas.
   ══════════════════════════════════════════════════════════════════════ */

/* PrestaShop enveloppe `#quantity_wanted` dans un sélecteur à flèches, même
   quand le champ est caché : les flèches restaient visibles sous les boutons. */
.bootstrap-touchspin,
.input-group.bootstrap-touchspin{ display: none !important; }

/* Le résumé produit arrive en HTML libre : on lui rend les puces de la maquette. */
.phx-puces ul{ list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.phx-puces li{ display: flex; gap: 10px; font-size: 14.5px; color: #3d434f; }
.phx-puces li::before{
  content: "";
  flex: 0 0 auto;
  width: 20px; height: 20px; margin-top: 1px;
  border-radius: 50%;
  background: var(--phx-brand)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E")
    center / 11px no-repeat;
}
.phx-puces p{ color: #3d434f; font-size: 15px; margin: 0 0 10px; }

/* Description longue : largeur de lecture et hiérarchie de la maquette. */
.phx-edito-texte{ max-width: 46em; margin: 28px 0 0; color: #3d434f; line-height: 1.7; }
.phx-edito-texte h2{ font-size: 22px; font-weight: 650; letter-spacing: -.01em; margin: 34px 0 10px; color: var(--phx-ink); }
.phx-edito-texte img{ max-width: 100%; height: auto; border-radius: 10px; margin: 18px 0; }

/* Les modules accrochés en bas de fiche gardent leur mise en page d'origine :
   on leur donne seulement de l'air et la largeur du reste de la page. */
.featured-products, #content-wrapper > section{ margin-top: 36px; }


/* ══════════════════════════════════════════════════════════════════════
   Galerie — vignettes en colonne à gauche, « j'aime » posé sur la photo
   ══════════════════════════════════════════════════════════════════════ */
.phx-galerie-corps{
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.phx-vignettes{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  grid-template-columns: none;
}
.phx-vignettes button{
  width: 84px;
  height: 84px;
  padding: 7px;
  overflow: hidden;
}
/* Le repère du bouton « j'aime » est la galerie entière, et non le cadre de
   la photo : le cadre est réécrit à chaque changement de déclinaison, la
   galerie non. Le bord droit des deux est le même, le résultat est identique. */
.phx-visuel-p{ position: relative; }
.phx-galerie{ position: sticky; }

.phx-favori{ position: absolute; top: 14px; right: 14px; z-index: 2; }
.phx-favori .wishlist-button-add,
.phx-favori button{
  width: 42px;
  height: 42px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--phx-line);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(16,20,28,.08);
  color: var(--phx-ink);
  cursor: pointer;
}
.phx-favori .wishlist-button-add:hover,
.phx-favori button:hover{ border-color: var(--phx-ink); }
.phx-favori svg,
.phx-favori i{ width: 19px; height: 19px; font-size: 18px; }

/* ══════════════════════════════════════════════════════════════════════
   Avis clients — un avis à la fois, dans la colonne
   ══════════════════════════════════════════════════════════════════════ */
.phx-avis-mini{
  position: relative;
  margin-top: 22px;
  padding: 18px 18px 20px;
  border-radius: var(--phx-r);
  background: var(--phx-sable);
}
.phx-avis-vue{ overflow: hidden; }
.phx-avis-piste{
  display: flex;
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
.phx-avis-item{
  flex: 0 0 100%;
  box-sizing: border-box;
  padding-right: 2px;
}
.phx-avis-fleches{
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
.phx-avis-fleches button{
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--phx-line);
  border-radius: 50%;
  background: #fff;
  color: var(--phx-muted);
  cursor: pointer;
}
.phx-avis-fleches button:hover{ border-color: var(--phx-ink); color: var(--phx-ink); }
.phx-avis-fleches svg{ width: 13px; height: 13px; }
@media (prefers-reduced-motion: reduce){
  .phx-avis-piste{ transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   Moyens de paiement
   Marques redessinées en typographie : pas de logo de marque embarqué dans
   le thème. À remplacer par les visuels fournis par le prestataire choisi.
   ══════════════════════════════════════════════════════════════════════ */
.phx-cb{ margin-top: 20px; text-align: center; }
.phx-cb-marques{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.phx-cb-m{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  min-width: 48px;
  padding: 0 10px;
  border: 1px solid var(--phx-line);
  border-radius: 7px;
  background: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
}
.phx-cb-cb  { color: #1a3a6b; }
.phx-cb-visa{ color: #1a1f71; font-style: italic; letter-spacing: .08em; }
.phx-cb-amex{ color: #006fcf; }
.phx-cb-pp  { color: #003087; font-weight: 700; letter-spacing: 0; }
/* Les deux disques entrelacés du réseau, dessinés en CSS. */
.phx-cb-mc{ gap: 0; }
.phx-cb-mc i{
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: block;
}
.phx-cb-mc i:first-child{ background: #eb001b; }
.phx-cb-mc i:last-child { background: #f79e1b; margin-left: -6px; }
.phx-cb-note{
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--phx-muted);
}

/* ══════════════════════════════════════════════════════════════════════
   Preuve sociale
   ══════════════════════════════════════════════════════════════════════ */
.phx-preuve{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
.phx-preuve-tetes{ display: flex; flex: 0 0 auto; }
.phx-preuve-tetes span{
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--phx-sable);
  color: var(--phx-ink);
  font-size: 11px;
  font-weight: 700;
}
.phx-preuve-tetes span + span{ margin-left: -10px; }
.phx-preuve p{
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--phx-muted);
}
.phx-preuve b{ color: var(--phx-ink); font-weight: 650; }

.phx-avis-tete{ display: flex; align-items: center; gap: 10px; }
.phx-avis-rond{
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--phx-brand); color: #fff;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; flex: 0 0 auto;
}
.phx-avis-nom{ font-size: 14.5px; font-weight: 650; margin: 0; }
.phx-avis-verifie{ color: var(--phx-brand); 
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--phx-brand); font-weight: 560;
}
.phx-avis-etoiles{ color: #e8a020; letter-spacing: .08em; font-size: 13.5px; margin-top: 2px; }
.phx-avis-texte{ margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: #3d434f; }


/* Le résumé reste du texte courant ; les puces sont une vraie liste. */
.phx-resume{ color: #3d434f; font-size: 15px; line-height: 1.65; margin: 20px 0 0; max-width: 40em; }
.phx-puces{ list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.phx-puces li{ display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: #3d434f; }

/* Le module de liste d'envies s'accroche près des boutons : on l'aligne. */
.phx-infos .wishlist-button-add{ margin: 14px 0 0; }

/* Le thème parent met en gras et colore `#product-availability`. Notre ligne
   de disponibilité porte cet identifiant pour que PrestaShop la rafraîchisse ;
   on reprend donc la main sur son apparence. */
.phx-dispo#product-availability,
.phx-dispo#product-availability .js-product-availability{
  font-weight: 400;
  font-size: 14.5px;
  color: #3d434f;
}
.phx-dispo .phx-dot{ flex: 0 0 auto; }

/* Le bloc des modules (partage, financement) respire comme les autres. */
.phx-paiement{ margin-top: 20px; }
.phx-paiement .social-sharing{ margin: 0; }

/* Le point d'accroche du module reste dans le formulaire — c'est ce qui lui
   permet de se réinstaller après un changement de déclinaison — mais il ne
   doit rien occuper : son bouton est déplacé sur la photo. */
.phx-actions-modules{ display: contents; }

/* L'emplacement du bouton « j'aime » vit maintenant dans `.phx-galerie`. */
.phx-galerie{ position: relative; }
@media (min-width: 993px){ .phx-galerie{ position: sticky; top: 90px; } }

/* ══════════════════════════════════════════════════════════════════════
   Respiration de la colonne de droite
   Les blocs étaient tassés les uns sur les autres et les textes touchaient
   les bords. On élargit les marges intérieures et on aligne les rythmes.
   ══════════════════════════════════════════════════════════════════════ */
.phx-puces{ margin-top: 26px; gap: 12px; }

.phx-services{
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 28px;
}
.phx-service{
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 20px;
  border-radius: 16px;
}
.phx-service svg{
  flex: 0 0 auto;
  width: 21px; height: 21px;
  margin-top: 1px;
  color: var(--phx-brand);
}
.phx-service b{ font-size: 14.5px; line-height: 1.35; }
.phx-service span{ font-size: 13.5px; line-height: 1.55; margin-top: 5px; }

/* L'encart d'avis : plus de marge intérieure, et du souffle entre l'en-tête
   et le texte. La piste étant une rangée flexible, toutes les cartes ont la
   hauteur de la plus longue — l'encart ne saute donc pas d'un avis à l'autre. */
.phx-avis-mini{
  margin-top: 28px;
  padding: 26px 26px 28px;
  border-radius: 16px;
}
.phx-avis-fleches{ top: 22px; right: 22px; }
.phx-avis-tete{ gap: 13px; }
.phx-avis-rond{ width: 42px; height: 42px; font-size: 14px; }
.phx-avis-nom{ font-size: 15px; }
.phx-avis-etoiles{ font-size: 14px; margin-top: 4px; }
.phx-avis-texte{ margin-top: 18px; font-size: 15px; line-height: 1.7; }

.phx-cb{ margin-top: 26px; }
.phx-cb-note{ margin-top: 12px; line-height: 1.6; }
.phx-preuve{ margin-top: 26px; }

/* ══════════════════════════════════════════════════════════════════════
   Sortir du gabarit du thème parent
   La mise en page héritée enferme le contenu dans un conteneur Bootstrap
   plafonné à 960 px en écran moyen et 1140 px au-delà. Nos deux colonnes
   n'avaient donc jamais la place prévue par la maquette : les tuiles de
   service se retrouvaient à 190 px de large et chaque libellé passait à la
   ligne. On neutralise ce conteneur sur la fiche produit et on laisse
   `.phx-wrap` faire la largeur, comme partout ailleurs dans le thème.
   ══════════════════════════════════════════════════════════════════════ */
.page-product #content-wrapper,
.page-product .js-content-wrapper{ padding-left: 0; padding-right: 0; }
.page-product #wrapper > .container{
  /* Le conteneur hérité fixe une largeur, pas seulement un maximum :
     neutraliser `max-width` ne suffisait pas. */
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.page-product #wrapper > .container > .row{ margin-left: 0; margin-right: 0; }

.phx-wrap{ max-width: 1320px; }

/* ══════════════════════════════════════════════════════════════════════
   Partage
   Un bouton rond en haut à droite de la colonne, qui déplie les liens du
   module. La liste d'origine du module reste dans le document — elle sert de
   source au menu — mais n'est plus visible.
   ══════════════════════════════════════════════════════════════════════ */
.phx-infos{ position: relative; }
.phx-titre{ padding-right: 62px; }

.phx-partage{ position: absolute; top: 0; right: 0; z-index: 3; }
.phx-partage-btn{
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--phx-line);
  border-radius: 50%;
  background: #fff;
  color: var(--phx-ink);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.phx-partage-btn:hover,
.phx-partage.on .phx-partage-btn{
  border-color: var(--phx-ink);
  box-shadow: 0 2px 10px rgba(16,20,28,.08);
}
.phx-partage-btn svg{ width: 19px; height: 19px; }

.phx-partage-menu{
  position: absolute;
  top: 54px;
  right: 0;
  min-width: 196px;
  padding: 7px;
  border: 1px solid var(--phx-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(16,20,28,.12);
}
.phx-partage-menu a,
.phx-partage-menu button{
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--phx-ink);
  font-size: 14px;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.phx-partage-menu a:hover,
.phx-partage-menu button:hover{ background: var(--phx-sable); }
.phx-partage-copie{ border-top: 1px solid var(--phx-line) !important; border-radius: 0 0 9px 9px !important; }

/* La sortie d'origine du module, gardée comme source du menu. */
.phx-masque{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════
   Étapes de la commande
   Trois jalons reliés par un trait discret. Aucune date : le stock magasin
   n'est pas relié au site.
   ══════════════════════════════════════════════════════════════════════ */
.phx-etapes{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
}
.phx-etape{
  position: relative;
  text-align: center;
  padding: 0 4px;
}
.phx-etape-ico{
  position: relative;
  z-index: 1;
  width: 46px; height: 46px;
  margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--phx-sable);
  color: var(--phx-brand);
}
.phx-etape-ico svg{ width: 21px; height: 21px; }
/* Le trait de liaison part du bord du rond et s'arrête à celui d'à côté. */
.phx-etape:not(:last-child)::after{
  content: "";
  position: absolute;
  top: 23px;
  left: calc(50% + 31px);
  right: calc(-50% + 31px);
  border-top: 1px dashed var(--phx-line);
}
.phx-etape b{ display: block; font-size: 14px; font-weight: 650; }
/* Le libellé porte sa propre classe : écrit `.phx-etape span`, il attrapait
   aussi le rond de l'icône — plus spécifique que `.phx-etape-ico` — et lui
   imposait le gris du texte secondaire. */
.phx-etape-note{
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--phx-muted);
}

/* ══════════════════════════════════════════════════════════════════════
   Vidéos produit
   ══════════════════════════════════════════════════════════════════════ */
.phx-ugc-tete{ margin-top: 32px; }
.phx-ugc-tete h2{ font-size: 21px; margin: 6px 0 0; letter-spacing: -.01em; }

.phx-ugc{
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.phx-ugc-carte{
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--phx-surface);
  aspect-ratio: 9 / 16;
  cursor: pointer;
}
.phx-ugc-carte img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.phx-ugc-carte:hover img{ transform: scale(1.04); }
.phx-ugc-play{
  position: absolute;
  right: 10px; bottom: 10px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--phx-ink);
}
.phx-ugc-play svg{ width: 13px; height: 13px; margin-left: 1px; }

/* ══════════════════════════════════════════════════════════════════════
   Visionneuse
   ══════════════════════════════════════════════════════════════════════ */
.phx-fige{ overflow: hidden; }

.phx-lecteur{
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.phx-lecteur-fond{
  position: absolute;
  inset: 0;
  background: rgba(26,32,44,.72);
  backdrop-filter: blur(3px);
}
.phx-lecteur-boite{
  position: relative;
  display: flex;
  align-items: center;
  gap: 26px;
  max-width: 100%;
}
.phx-lecteur-film{
  width: min(46vh, 380px);
  max-height: 86vh;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  background: #000;
  display: block;
}
.phx-lecteur-carte{
  width: 300px;
  padding: 24px;
  border-radius: 18px;
  background: #fff;
}
/* Les avis défilent dans la fiche. Tous les témoignages sont posés sur une
   même rangée : la hauteur est donc celle du plus long, et la fiche ne saute
   pas d'un avis à l'autre. */
.phx-lecteur-avis{ overflow: hidden; margin-bottom: 20px; }
.phx-lecteur-piste{
  display: flex;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.phx-lecteur-avis-item{
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  padding-right: 2px;
  box-sizing: border-box;
}
.phx-lecteur-qui{ display: flex; align-items: center; gap: 10px; }
.phx-lecteur-nom{ font-size: 15.5px; font-weight: 650; }
.phx-lecteur-avis .phx-avis-verifie{ display: inline-flex; color: var(--phx-brand); }
.phx-lecteur-note{
  margin: 16px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--phx-sable);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.6;
  color: #3d434f;
}
@media (prefers-reduced-motion: reduce){ .phx-lecteur-piste{ transition: none; } }
.phx-lecteur-carte .phx-btn{ width: 100%; }
.phx-lecteur-carte .phx-btn + .phx-btn{ margin-top: 10px; }
.phx-lecteur-mention{
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--phx-muted);
}
.phx-lecteur-fermer{
  position: absolute;
  top: -14px; right: -14px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--phx-ink);
  cursor: pointer;
  z-index: 2;
}
.phx-lecteur-fermer svg{ width: 16px; height: 16px; }

/* ══════════════════════════════════════════════════════════════════════
   Confirmation d'ajout au panier
   ══════════════════════════════════════════════════════════════════════ */
.phx-annonce-panier{
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-radius: 14px;
  background: var(--phx-ink);
  color: #fff;
  font-size: 14.5px;
  box-shadow: 0 16px 38px rgba(16,20,28,.24);
  transform: translate(-50%, 14px);
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
}
.phx-annonce-panier.on{ transform: translate(-50%, 0); opacity: 1; }
.phx-annonce-panier a{ color: #fff; font-weight: 650; text-decoration: underline; }
.phx-annonce-panier.erreur{ background: #8c2b2b; }

@media (max-width: 560px){
  .phx-annonce-panier{ left: 16px; right: 16px; bottom: 16px; transform: translateY(14px); }
  .phx-annonce-panier.on{ transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════════════
   Écrans étroits — à garder en toute fin de feuille
   Les requêtes média de la maquette se trouvent au milieu du fichier, donc
   avant les réglages de galerie et de tuiles écrits plus haut ; à
   spécificité égale, c'est la dernière règle qui gagne et le téléphone se
   retrouvait avec les vignettes en colonne par-dessus le titre. Ces
   corrections doivent donc rester les dernières du fichier.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 980px){
  /* `relative` et non `static` : le bouton « j'aime » est positionné en
     absolu dans la galerie. En `static` il perdait son repère et remontait
     se coller au coin de la page. */
  .phx-galerie{ position: relative; top: auto; }

  /* Une colonne `1fr` prend pour minimum la largeur minimale de son contenu.
     La piste des avis est une rangée flexible de quatre cartes : son minimum
     valait la somme des quatre, et la colonne débordait de l'écran de 245 px.
     `minmax(0, 1fr)` lui interdit ce plancher. */
  .phx-produit{ grid-template-columns: minmax(0, 1fr); }
  .phx-galerie-corps{ grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .phx-visuel-p{ order: 1; }
  .phx-vignettes{
    order: 2;
    flex-direction: row;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 4px;
  }
  .phx-vignettes button{ flex: 0 0 auto; }
}

@media (max-width: 560px){
  .phx-avis-mini{ padding: 20px 20px 22px; }
  .phx-avis-fleches{ top: 18px; right: 18px; }
}

/* Les blocs en grille et en ligne doivent pouvoir rétrécir sous la largeur
   minimale de leur contenu, sinon ils poussent la page en largeur. */
.phx-infos, .phx-galerie, .phx-galerie-corps,
.phx-avis-mini, .phx-avis-vue, .phx-avis-item{ min-width: 0; }

@media (max-width: 560px){
  .phx-partage-btn{ width: 42px; height: 42px; }
  .phx-titre{ padding-right: 56px; }
}

@media (max-width: 860px){
  /* La fiche d'information passe sous la vidéo, et l'ensemble défile. */
  .phx-lecteur{ padding: 16px; align-items: flex-start; overflow-y: auto; }
  .phx-lecteur-boite{ flex-direction: column; gap: 14px; width: 100%; max-width: 380px; margin: auto; }
  .phx-lecteur-film{ width: 100%; max-height: 62vh; }
  .phx-lecteur-carte{ width: 100%; }
  .phx-lecteur-fermer{ top: 6px; right: 6px; background: rgba(255,255,255,.92); }
}


/* ══════════════════════════════════════════════════════════════════════
   Paiement en plusieurs fois
   Un encadré sous le prix. Le bloc reste visible même sans montant : c'est
   le module de financement qui le remplit, et lui seul a le droit d'annoncer
   une mensualité.
   ══════════════════════════════════════════════════════════════════════ */
.phx-financement{
  margin-top: 14px;
  padding: 13px 16px;
  border: 1px solid var(--phx-line);
  border-radius: 14px;
  background: #fff;
}
.phx-financement-haut{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.phx-financement-titre{
  font-size: 14px;
  font-weight: 650;
  color: var(--phx-ink);
}
.phx-financement-plans{ display: inline-flex; gap: 6px; }
.phx-financement-plans b{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 26px;
  padding: 0 8px;
  border-radius: 7px;
  background: var(--phx-sable);
  color: var(--phx-brand);
  font-size: 12.5px;
  font-weight: 700;
}
/* Vide tant qu'aucun module de financement n'est actif : il ne doit alors
   rien occuper, sinon l'encadré garde un blanc inexpliqué. */
.phx-financement-module:empty{ display: none; }
.phx-financement-module{ margin-top: 10px; }
.phx-financement-note{
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--phx-muted);
}
.phx-financement-note a{
  color: var(--phx-brand);
  font-weight: 600;
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════════
   Bas de fiche : trois sections et leur barre d'onglets
   La barre se colle sous l'en-tête pendant la lecture des trois sections.
   `scroll-margin-top` évite que le haut d'une section passe derrière elle
   quand on y saute depuis un onglet.
   ══════════════════════════════════════════════════════════════════════ */
.phx-onglets{
  /* L'en-tête du thème n'est pas collant : la barre se colle donc tout en
     haut. Calée sur sa hauteur, elle flottait 66 px plus bas, et le texte
     défilait dans le vide au-dessus d'elle. */
  position: sticky;
  top: 0;
  z-index: 20;
  margin-top: 46px;
  padding-top: 15px;
  /* Fond opaque relevé sur la page elle-même, et non deviné : sans lui, le
     texte de la description passait au travers de la barre. */
  background: #f6f6f6;
  box-shadow: 0 10px 14px -12px rgba(16, 20, 28, .22);
  overflow-x: auto;
  scrollbar-width: none;
}
.phx-onglets::-webkit-scrollbar{ display: none; }
.phx-onglets button{ white-space: nowrap; cursor: pointer; }

/* La maquette pose `section{padding:86px 0}` dans `.phx-wrap`. Nos trois
   sections en héritaient : 172 px de vide chacune, d'où le grand blanc entre
   la description et les détails. On reprend la main sur leur rythme. */
.phx-wrap .phx-section{
  padding: 0;
  scroll-margin-top: 74px;
}
.phx-section{ margin-top: 30px; }
.phx-section + .phx-section{ margin-top: 56px; }
.phx-section-titre{
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -.01em;
  margin: 0 0 18px;
}

/* ══════════════════════════════════════════════════════════════════════
   Avis en pleine largeur — même mécanique que l'encart de la colonne
   ══════════════════════════════════════════════════════════════════════ */
.phx-avis-large{
  position: relative;
  padding: 30px 32px 34px;
  border-radius: 18px;
  background: var(--phx-sable);
}
.phx-avis-large .phx-avis-texte{ font-size: 16px; max-width: 46em; }
.phx-avis-large .phx-avis-rond{ width: 46px; height: 46px; font-size: 15px; }
.phx-avis-large .phx-avis-nom{ font-size: 16px; }
.phx-avis-large .phx-avis-fleches{ top: 26px; right: 30px; }
.phx-avis-large .phx-avis-points{
  display: flex;
  gap: 6px;
  margin-top: 22px;
}
.phx-avis-large .phx-avis-points button{
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #d6d2ca;
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}
.phx-avis-large .phx-avis-points button.on{
  width: 20px;
  border-radius: 4px;
  background: var(--phx-brand);
}

/* Le bloc de commentaires du module vient juste dessous. */
.phx-avis-large + *{ margin-top: 26px; }

@media (max-width: 700px){
  .phx-onglets{ gap: 18px; margin-top: 36px; }
  .phx-wrap .phx-section{ scroll-margin-top: 66px; }
  .phx-section + .phx-section{ margin-top: 40px; }
  .phx-avis-large{ padding: 22px 20px 26px; }
  .phx-avis-large .phx-avis-fleches{ top: 18px; right: 18px; }
  .phx-avis-large .phx-avis-texte{ font-size: 15px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Aide au choix — deux cartes plutôt qu'un tableau
   Un tableau aligne des chiffres ; il ne dit pas lequel prendre. Ici chaque
   modèle a sa carte, celle qu'on regarde est mise en avant, l'autre mène à
   sa fiche, et seules les différences sont listées : ce qui est identique
   est dit une fois, au-dessus.
   ══════════════════════════════════════════════════════════════════════ */
.phx-choix{ margin-bottom: 52px; }
.phx-compare-titre{
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 680;
  letter-spacing: -.03em;
  margin: 6px 0 12px;
}
.phx-choix-resume{
  margin: 0 0 26px;
  max-width: 44em;
  font-size: 16px;
  line-height: 1.7;
  color: #4a505d;
}

.phx-choix-cartes{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.phx-choix-carte{
  border: 1px solid var(--phx-line);
  border-radius: var(--phx-r-lg);
  background: #fff;
  padding: 24px 26px 8px;
}
/* Le modèle affiché se distingue par le trait, pas par la couleur seule. */
.phx-choix-carte.on{
  border-color: var(--phx-ink);
  box-shadow: 0 0 0 1px var(--phx-ink);
  background: var(--phx-surface);
}
.phx-choix-carte header{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--phx-line);
}
.phx-choix-carte h3{
  font-size: 21px;
  font-weight: 680;
  letter-spacing: -.02em;
  margin: 0;
  order: 2;
}
.phx-choix-ici,
.phx-choix-lien{
  order: 1;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.phx-choix-ici{ color: var(--phx-muted); }
.phx-choix-lien{ color: var(--phx-brand); display: inline-block; padding: 2px 0; }

.phx-choix-carte dl{ margin: 0; }
.phx-choix-carte dl > div{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--phx-line);
}
.phx-choix-carte dl > div:last-child{ border-bottom: 0; }
.phx-choix-carte dt{
  font-size: 14px;
  color: var(--phx-muted);
}
.phx-choix-carte dd{
  margin: 0;
  font-size: 15.5px;
  font-weight: 650;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════════
   Fiche technique — des paires lisibles, pas un pavé
   ══════════════════════════════════════════════════════════════════════ */
.phx-specs-titre{
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 650;
  letter-spacing: -.01em;
  margin: 0 0 24px;
}
.phx-specs details + details{ margin-top: 10px; }
.phx-specs-liste{ margin: 0; padding: 0 22px 18px; }
.phx-specs-liste > div{
  display: grid;
  grid-template-columns: minmax(0, 12em) minmax(0, 1fr);
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--phx-line);
}
.phx-specs-liste > div:first-child{ border-top: 0; }
.phx-specs-liste dt{ font-size: 14px; color: var(--phx-muted); }
.phx-specs-liste dd{ margin: 0; font-size: 14.5px; color: #3d434f; }
.phx-specs-liste dd.seul{ grid-column: 1 / -1; }

.phx-reference{
  margin: 22px 0 0;
  font-size: 13.5px;
  color: var(--phx-muted);
}
.phx-reference strong{ color: var(--phx-ink); font-weight: 650; }

@media (max-width: 760px){
  .phx-choix-cartes{ grid-template-columns: 1fr; }
  .phx-choix-carte{ padding: 20px 20px 6px; }
  .phx-specs-liste{ padding: 0 18px 16px; }
  .phx-specs-liste > div{ grid-template-columns: 1fr; gap: 3px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Description éditoriale
   Le texte vient du champ description, donc du back-office : on ne met en
   forme que des balises que PrestaShop laisse passer — titres, paragraphes,
   images, gras.
   ══════════════════════════════════════════════════════════════════════ */
.phx-edito-texte{ max-width: 44em; }
.phx-edito-texte > h2:first-child{ margin-top: 0; }
.phx-edito-texte h2{ font-size: 25px; margin: 42px 0 12px; letter-spacing: -.015em; }
.phx-edito-texte p{ font-size: 16px; line-height: 1.75; margin: 0 0 14px; }
.phx-edito-texte p strong{ color: var(--phx-ink); font-weight: 650; }
/* Le premier paragraphe de la description sert d'accroche. */
.phx-edito-texte > h2:first-child + p{ font-size: 17.5px; color: #2e3440; }

@media (max-width: 700px){
  .phx-compare-titre{ font-size: 21px; }
  .phx-wrap .phx-comp thead th,
  .phx-wrap .phx-comp tbody th,
  .phx-wrap .phx-comp tbody td{ padding: 12px 11px; font-size: 13px; }
  .phx-wrap .phx-comp tbody th{ width: 34%; }
  .phx-edito-texte h2{ font-size: 21px; margin: 32px 0 10px; }
  .phx-edito-texte p{ font-size: 15.5px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Récit produit
   Blocs image + texte qui alternent, et panneaux de chiffre pleine largeur.
   Le balisage vient du champ description, la mise en page vient d'ici : le
   purificateur de PrestaShop interdit toute classe dans ce champ.
   ══════════════════════════════════════════════════════════════════════ */
.phx-recit{ margin-top: 10px; }
.phx-recit > * + *{ margin-top: clamp(48px, 7vw, 96px); }

.phx-recit-bloc{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 4vw, 64px);
  align-items: center;
}
.phx-image-droite .phx-recit-vue{ order: 2; }

.phx-recit-vue img{
  width: 100%;
  display: block;
  border-radius: var(--phx-r-lg);
  background: var(--phx-surface);
}

.phx-recit-texte .phx-eyebrow,
.phx-recit-simple .phx-eyebrow{ display: block; margin-bottom: 10px; }
.phx-recit h2{
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 680;
  letter-spacing: -.03em;
  line-height: 1.12;
  margin: 0 0 16px;
}
.phx-recit p{
  color: #4a505d;
  font-size: 16.5px;
  line-height: 1.72;
  margin: 0 0 14px;
  max-width: 34em;
}
.phx-recit p:last-child{ margin-bottom: 0; }
.phx-recit p strong{ color: var(--phx-ink); font-weight: 650; }
/* Un bloc sans illustration gardait la largeur d'une colonne et laissait
   l'autre moitié vide : on croyait à une image manquante. Centré, il se lit
   comme une respiration dans le récit — le même rôle que les panneaux noirs. */
.phx-recit-simple{
  max-width: 38em;
  margin-inline: auto;
  text-align: center;
}
.phx-recit-simple p{ margin-inline: auto; max-width: none; }
.phx-recit-simple .phx-eyebrow{ display: block; }

/* Le panneau de chiffre : une donnée qu'on retient, isolée du texte. */
.phx-chiffre{
  background: var(--phx-ink);
  color: #fff;
  border-radius: var(--phx-r-lg);
  padding: clamp(44px, 7vw, 86px) 28px;
  text-align: center;
}
.phx-chiffre b{
  display: block;
  font-size: clamp(38px, 7vw, 76px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
}
.phx-chiffre p{
  margin: 18px auto 0;
  max-width: 44em;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,.7);
}

/* Le diaphragme qui se referme : des disques de diamètre décroissant, comme
   sur la maquette. Les tailles viennent du texte, le dessin vient d'ici. */
.phx-diaph{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 5vw, 56px);
  margin-top: 40px;
}
.phx-diaph figure{ margin: 0; text-align: center; }
.phx-diaph i{
  display: block;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #6c7280, #1b1f27 72%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.phx-diaph figcaption{
  font-size: 12.5px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.52);
}
/* Les disques sont alignés par le bas, pour que la fermeture se lise. */
.phx-diaph figure{ display: flex; flex-direction: column; justify-content: flex-end; }

@media (max-width: 860px){
  .phx-recit-bloc{ grid-template-columns: 1fr; gap: 20px; }
  /* Sur une colonne, l'image repasse toujours au-dessus du texte. */
  .phx-image-droite .phx-recit-vue{ order: 0; }
  .phx-recit > * + *{ margin-top: 44px; }
  .phx-recit h2{ font-size: 23px; }
  .phx-recit p{ font-size: 15.5px; }
  /* Sur une colonne, tout est déjà pleine largeur : le centrage n'apporte
     plus rien et nuit à la lecture d'un paragraphe. */
  .phx-recit-simple{ text-align: left; }
  .phx-diaph{ gap: 16px; margin-top: 28px; }
  .phx-diaph i{ transform: scale(.66); transform-origin: bottom center; }
  .phx-chiffre p{ font-size: 15px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Téléphone — on garde la composition de la maquette
   Les tuiles restaient en une seule colonne et la frise passait à la
   verticale : la colonne devenait interminable et ne ressemblait plus au
   modèle. On conserve les deux colonnes et la frise horizontale, en
   resserrant simplement les marges et les tailles.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px){
  .phx-services{ grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
  .phx-service{ padding: 13px 12px; gap: 9px; }
  .phx-service svg{ width: 18px; height: 18px; }
  .phx-service b{ font-size: 13.5px; }
  .phx-service span{ font-size: 12.5px; margin-top: 3px; }

  /* La preuve sociale passe sur deux lignes, pastilles au-dessus. */
  .phx-preuve{ display: block; margin-top: 22px; }
  .phx-preuve-tetes{ margin-bottom: 8px; }
  .phx-preuve p{ font-size: 13px; }

  .phx-etapes{ grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 24px; }
  .phx-etape{ padding: 0 2px; text-align: center; }
  .phx-etape-ico{ width: 40px; height: 40px; margin: 0 auto 9px; }
  .phx-etape-ico svg{ width: 18px; height: 18px; }
  .phx-etape b{ font-size: 12.5px; }
  .phx-etape-note{ font-size: 11px; margin-top: 3px; }
  /* Le trait de liaison suit le nouveau diamètre : 20 px de rayon + l'écart. */
  .phx-etape:not(:last-child)::after{
    top: 20px;
    left: calc(50% + 26px);
    right: calc(-50% + 26px);
  }

  .phx-ugc{ gap: 8px; margin-top: 24px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Barre d'achat collante
   Le nom du produit et le libellé du bouton passaient à la ligne, et la
   barre débordait de sa hauteur fixe. Le nom se coupe maintenant en bout de
   ligne, le bouton garde son texte d'un seul tenant, et la hauteur suit le
   contenu plutôt que d'être imposée.
   ══════════════════════════════════════════════════════════════════════ */
.phx-barre .phx-wrap{
  height: auto;
  min-height: 68px;
  padding-top: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
/* Sans `min-width: 0`, un enfant de boîte flexible refuse de descendre sous
   la largeur de son texte : la coupure en bout de ligne ne s'applique pas. */
.phx-barre-texte{ min-width: 0; flex: 1 1 auto; }
.phx-barre .phx-t{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phx-barre .phx-btn{
  flex: 0 0 auto;
  white-space: nowrap;
  margin-left: auto;
}

@media (max-width: 700px){
  .phx-barre .phx-wrap{ gap: 11px; padding-left: 16px; padding-right: 16px; }
  .phx-barre img{ width: 38px; height: 38px; }
  .phx-barre .phx-t{ font-size: 14px; }
  .phx-barre .phx-p{ font-size: 12.5px; }
  .phx-barre .phx-btn{ padding: 11px 16px; font-size: 14px; }
}

@media (max-width: 340px){
  /* Seulement sur les écrans les plus étroits : au-delà, la vignette tient
     sans rogner le nom du produit, qui se coupe déjà en bout de ligne. */
  .phx-barre img{ display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   Quantité
   Le thème parent enveloppe `#quantity_wanted` dans son propre sélecteur à
   flèches. On ne peut pas l'en empêcher — il est posé par son script — mais
   on efface sa boîte (`display: contents`) pour que le champ redevienne un
   enfant direct du nôtre, et on masque ses flèches à lui.
   ══════════════════════════════════════════════════════════════════════ */
.phx-quantite{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}
.phx-quantite-lab{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--phx-muted);
}
.phx-stepper{
  display: flex;
  align-items: center;
  border: 1px solid var(--phx-line);
  border-radius: 999px;
  background: #fff;
  padding: 4px;
}
.phx-stepper > button{
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--phx-ink);
  cursor: pointer;
  transition: background .15s ease;
}
.phx-stepper > button:hover:not(:disabled){ background: var(--phx-sable); }
.phx-stepper > button:disabled{ color: #c3c7d0; cursor: default; }
.phx-stepper > button svg{ width: 16px; height: 16px; }

/* Le sélecteur du thème parent ajoute la classe `form-control` au champ, qui
   lui rend bordure et fond blanc — d'où le carré autour du chiffre. On cible
   par identifiant pour repasser devant. */
#quantity_wanted.phx-quantite-champ,
.phx-quantite-champ{
  width: 44px;
  border: 0;
  box-shadow: none;
  background: none;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  font-family: inherit;
  font-size: 15px;
  font-weight: 650;
  color: var(--phx-ink);
  -moz-appearance: textfield;
}
.phx-quantite-champ::-webkit-outer-spin-button,
.phx-quantite-champ::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.phx-quantite-champ:focus{ outline: none; }

/* La boîte posée par le thème parent s'efface, ses flèches disparaissent. */
.phx-stepper .bootstrap-touchspin,
.phx-stepper .input-group.bootstrap-touchspin{ display: contents !important; }
.phx-stepper .input-group-btn,
.phx-stepper .bootstrap-touchspin-up,
.phx-stepper .bootstrap-touchspin-down{ display: none !important; }

/* ── note moyenne sous le titre ─────────────────────────────────────── */
.phx-notes{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--phx-muted);
}

/* ── prix sous chaque capacité ──────────────────────────────────────── */
.phx-tailles button span{
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 400;
  color: var(--phx-muted);
}
.phx-tailles button.on span{ color: #3d434f; }

/* ── carte d'accessoire : sous-titre, comme sur la maquette ─────────── */
.phx-carte .phx-sp{
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--phx-muted);
}
/* Les deux titres du bas de fiche prennent l'échelle de la maquette. */
.phx-compare-titre{ font-size: clamp(22px, 3vw, 32px); }
.phx-specs-titre{ font-size: clamp(20px, 2.6vw, 28px); margin-bottom: 24px; }

/* ══════════════════════════════════════════════════════════════════════
   Reprise d'accessibilité — mesures relevées le 22/09/2026
   ══════════════════════════════════════════════════════════════════════ */

/* Le focus clavier n'était visible nulle part : le thème parent enlève le
   contour des boutons. Sans lui, la fiche est inutilisable au clavier. */
.phx-wrap :focus-visible,
.phx-barre :focus-visible,
.phx-entete :focus-visible,
.phx-lecteur :focus-visible{
  outline: 2px solid var(--phx-brand);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Zones tactiles : 44 px minimum, sans grossir le dessin ───────────
   Les pastilles de coloris, les flèches d'avis et les points de pagination
   étaient sous le seuil. On agrandit la zone sensible par un pseudo-élément
   plutôt que l'élément : le rendu ne bouge pas. */
.phx-teintes button{ width: 44px; height: 44px; }

.phx-ico{ width: 44px; height: 44px; align-items: center; justify-content: center; }

.phx-stepper > button{ width: 44px; height: 44px; }

.phx-avis-fleches button,
.phx-avis-points button,
.phx-ugc-play{ position: relative; }
.phx-avis-fleches button::after,
.phx-avis-points button::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}

/* Les liens du fil d'Ariane et du pied de page faisaient 15 à 17 px de haut :
   sous le minimum de 24 px des critères WCAG 2.5.8. */
.phx-fil a,
.phx-pied ul a{
  display: inline-block;
  padding: 4px 0;
}
.phx-financement-note a{ display: inline-block; padding: 3px 0; }

/* Réserver la place des illustrations évite le saut de mise en page au
   chargement — les images arrivent après le texte. */
.phx-recit-vue{ aspect-ratio: 4 / 3; }
.phx-recit-vue img{ height: 100%; object-fit: cover; }

/* ── Le magasin, en fin de fiche ─────────────────────────────────────── */
.phx-boutique{
  display: grid;
  grid-template-columns: 1.2fr auto;
  gap: 34px;
  align-items: center;
  margin-top: 56px;
  padding: clamp(28px, 4.5vw, 52px);
  border-radius: var(--phx-r-lg);
  background: var(--phx-sable);
}
.phx-boutique h2{
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -.03em;
  margin: 6px 0 12px;
}
.phx-boutique p{ color: #4a505d; margin: 0; max-width: 32em; }
.phx-horaires{ margin-top: 18px; font-size: 14.5px; color: #3d434f; }
.phx-horaires b{ display: block; font-weight: 650; }
.phx-boutique-actions{ display: grid; gap: 10px; }

@media (max-width: 860px){
  .phx-boutique{ grid-template-columns: 1fr; gap: 22px; margin-top: 40px; }
  .phx-boutique-actions .phx-btn{ width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   Apparition des blocs du récit
   La classe `phx-anim` est posée par le script, jamais écrite dans le
   balisage : sans JavaScript, rien n'est masqué. Seuls l'opacité et la
   translation bougent — aucun recalcul de mise en page, donc aucun saut.

   La transition est déclarée sur l'état d'arrivée, pas sur l'état de départ.
   Écrite sur le départ, elle animait la disparition : le bloc s'affichait au
   chargement, s'effaçait en une demi-seconde, puis revenait au défilement.
   ══════════════════════════════════════════════════════════════════════ */
.phx-recit .phx-anim{
  opacity: 0;
  transform: translate3d(0, 22px, 0);
}
.phx-recit .phx-anim.vu{
  opacity: 1;
  transform: none;
  transition: opacity .44s ease-out, transform .44s cubic-bezier(.22,.61,.36,1);
}

/* Dans un bloc à deux colonnes, le texte suit l'image d'un souffle : le
   regard part de l'illustration et arrive sur le titre. */
.phx-recit-bloc.phx-anim .phx-recit-texte{
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}
.phx-recit-bloc.phx-anim.vu .phx-recit-texte{
  opacity: 1;
  transform: none;
  transition: opacity .44s ease-out .09s, transform .44s cubic-bezier(.22,.61,.36,1) .09s;
}

/* Le diaphragme se referme disque après disque quand le panneau apparaît. */
.phx-chiffre.phx-anim .phx-diaph figure{
  opacity: 0;
  transform: scale(.82);
}
.phx-chiffre.phx-anim.vu .phx-diaph figure{
  opacity: 1;
  transform: none;
  transition: opacity .38s ease-out, transform .38s cubic-bezier(.22,.61,.36,1);
}
.phx-chiffre.phx-anim.vu .phx-diaph figure:nth-child(1){ transition-delay: .12s; }
.phx-chiffre.phx-anim.vu .phx-diaph figure:nth-child(2){ transition-delay: .18s; }
.phx-chiffre.phx-anim.vu .phx-diaph figure:nth-child(3){ transition-delay: .24s; }
.phx-chiffre.phx-anim.vu .phx-diaph figure:nth-child(4){ transition-delay: .30s; }

@media (prefers-reduced-motion: reduce){
  .phx-recit .phx-anim,
  .phx-recit-bloc.phx-anim .phx-recit-texte,
  .phx-chiffre.phx-anim .phx-diaph figure{
    opacity: 1;
    transform: none;
    transition: none;
  }
}