/* ==========================================================================
   RETROVAULT — pages.css
   Styles SPÉCIFIQUES à chaque page. Un bloc par page, préfixé .pg-<page>.
   Ne jamais toucher aux blocs d'une autre page. Tout ce qui est réutilisable
   remonte dans forgeos.css / tokens.css.
   ========================================================================== */

/* ==========================================================================
   .pg-home — ACCUEIL · v4 « BENTO × MEMPHIS » (docs/DA-V4-G.md)
   Réf. exacte : docs/maquettes-G/G-Accueil.dc.html
   ========================================================================== */
.pg-home .accueil { padding-block: 40px 56px; display: flex; flex-direction: column; gap: 46px; }
.pg-home .sect { padding-top: 0; }

/* --- HERO : bloc indigo 7 col + bloc photo 5 col ------------------------- */
.pg-home .hero-sect { position: relative; }
/* les formes débordent du hero pour rester visibles autour des blocs */
.pg-home .hero-sect > .fo-formes { inset: -40px 0 -20px; overflow: hidden; }
@media (min-width: 1081px) {
  .pg-home .hero-sect > .fo-formes { inset: -70px -56px -40px; overflow: visible; }
}
.pg-home .hero-sect > .bento-grid { position: relative; z-index: 1; }

.pg-home .hero-bloc {
  padding: 46px 44px;
  min-height: 420px;
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
}
.pg-home .hero-bloc h1 { font-size: var(--t-hero); color: #fff; }
.pg-home .hero-bloc .kick { margin-bottom: 0; }
.pg-home .hero-p { max-width: 430px; font-size: 18.5px; line-height: 1.55; color: var(--indigo-sur); }
.pg-home .hero-acts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }

.pg-home .hero-photo { min-height: 420px; background: var(--indigo-pale); }
.pg-home .hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-home .hero-photo .tag-photo { position: absolute; top: 18px; left: 18px; font-size: 12.5px; padding: 8px 14px; }
.pg-home .hero-photo .prix { position: absolute; right: 18px; bottom: 18px; }

/* --- LES QUATRE RAYONS --------------------------------------------------- */
.pg-home .rayon {
  min-height: 228px;
  padding: 24px 24px 0;
  display: block;
  /* QA v4 : plus de `color: inherit` ici — la couleur vient du ton du bloc
     (règle a.bento.<ton> de forgeos.css), sinon on retombait sur l'encre
     texte sombre posé sur un bloc plein (contraste insuffisant). */
}
.pg-home .rayon h3 { margin: 0 0 10px; font-size: 27px; }
.pg-home .rayon p { margin: 0; max-width: 150px; font-size: 14.5px; line-height: 1.45; opacity: .92; font-weight: 500; }
.pg-home .rayon .bento-icone { position: absolute; right: 22px; bottom: 20px; }


/* --- PREUVE -------------------------------------------------------------- */
.pg-home .preuve-shot { min-height: 260px; }
.pg-home .preuve-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-home .preuve-shot figcaption { position: absolute; left: 14px; bottom: 14px; }

/* --- JOURNAL ------------------------------------------------------------- */
.pg-home .tuile .corps { padding: 24px 22px 26px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pg-home .tuile h3 { font-size: 22px; }
.pg-home .tuile p { font-size: 15px; line-height: 1.55; color: var(--gris); }
.pg-home .tuile { color: var(--encre); }

/* --- CTA RACHAT ---------------------------------------------------------- */
.pg-home .cta-bloc { padding: 46px 44px; }
.pg-home .cta-txt { max-width: 640px; display: flex; flex-direction: column; gap: 16px; }
.pg-home .cta-bloc h2 { font-size: var(--t-xxl); color: var(--corail-encre); }
.pg-home .cta-bloc p { font-size: 17px; line-height: 1.55; color: var(--corail-encre); }
.pg-home .cta-lien { color: var(--corail-encre); text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1080px) {
  .pg-home .hero-bloc { min-height: 0; padding: 36px 30px; }
  .pg-home .hero-photo { min-height: 320px; }
}
@media (max-width: 720px) {
  .pg-home .accueil { padding-block: 24px 40px; gap: 36px; }
  .pg-home .hero-bloc { padding: 28px 22px; gap: 16px; }
  .pg-home .hero-photo { min-height: 260px; }
  .pg-home .rayon { min-height: 200px; }
  .pg-home .cta-bloc { padding: 28px 22px; }
  .pg-home .hero-acts .pill { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   PAGE CONSOLES — le rayon  (.pg-consoles) · v4 « BENTO × MEMPHIS »
   Réf : docs/DA-V4-G.md + docs/maquettes-G/G-Carte.dc.html
   En-tête bento, filtres en pilules, grille de cartes produit, fiche modale
   en carte blanche 20 px.
   ========================================================================== */

.pg-consoles .page-consoles {
  padding-block: 40px 56px;
  display: flex; flex-direction: column; gap: 46px;
}
.pg-consoles .sect { padding-top: 0; display: flex; flex-direction: column; gap: var(--s-6); }

/* --- En-tête bento -------------------------------------------------------- */
.pg-consoles .tete-sect-bento { position: relative; }
.pg-consoles .tete-sect-bento > .fo-formes { inset: -30px -10px -20px; }
.pg-consoles .tete-bloc {
  padding: 44px 44px 40px;
  display: flex; flex-direction: column; gap: 18px;
  min-height: 380px; justify-content: center;
}
.pg-consoles .tete-bloc h1 { font-size: var(--t-hero); color: #fff; }
.pg-consoles .tete-bloc .kick { margin-bottom: 0; }
.pg-consoles .tete-p { max-width: 46ch; font-size: var(--c-l); line-height: 1.55; color: var(--indigo-sur); }
.pg-consoles .tete-compte {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; color: var(--indigo-sur);
}
.pg-consoles .tete-compte i { font-style: normal; font-weight: 700; color: #fff; }
.pg-consoles .tete-compte .sep { color: var(--vert-sur); }

.pg-consoles .tete-photo { min-height: 380px; background: var(--indigo-pale); }
.pg-consoles .tete-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-consoles .tete-photo .tag-photo { position: absolute; left: 18px; bottom: 18px; }

/* --- Filtres en pilules --------------------------------------------------- */
.pg-consoles .filtres {
  background: var(--indigo-pale);
  border-radius: var(--r-2);
  padding: 22px 24px 20px;
  display: grid; gap: var(--s-4);
}
.pg-consoles .frow {
  display: grid; grid-template-columns: 104px minmax(0, 1fr);
  gap: var(--s-3) var(--s-4); align-items: center;
}
.pg-consoles .frow > .label {
  font-family: var(--f-corps); font-size: 14px; font-weight: 600;
  color: var(--indigo-txt); text-transform: none; letter-spacing: 0;
}
.pg-consoles .fopts { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }

.pg-consoles .fbtn {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: var(--r-p);
  padding: 10px 17px; min-height: 42px;
  background: var(--blanc); color: var(--encre);
  border: 1.5px solid var(--bord-champ);
  font-family: var(--f-corps); font-size: 15px; font-weight: 600;
  transition: background var(--step-fast) var(--ease-standard), color var(--step-fast) var(--ease-standard),
              border-color var(--step-fast) var(--ease-standard), transform var(--step-fast) var(--ease-standard);
}
.pg-consoles .fbtn:hover { border-color: var(--encre); transform: translateY(-2px); }
.pg-consoles .fbtn .n { color: var(--gris-2); font-weight: 500; }
.pg-consoles .fbtn[aria-pressed="true"] {
  background: var(--noir); color: #fff; border-color: var(--noir);
}
.pg-consoles .fbtn[aria-pressed="true"] .n { color: rgba(255, 255, 255, .72); }

/* Champ de recherche */
.pg-consoles .find {
  display: flex; align-items: center; gap: 10px;
  background: var(--blanc);
  border: 1.5px solid var(--bord-champ);
  border-radius: var(--r-p);
  padding: 0 8px 0 16px; min-height: 48px;
}
.pg-consoles .find:focus-within { border-color: var(--indigo); }
.pg-consoles .find-ic { display: inline-flex; flex: 0 0 auto; }
.pg-consoles .find input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: none; padding: 0;
  min-height: 44px; font-size: 16px; color: var(--encre);
}
.pg-consoles .find input:focus { border: 0; }
.pg-consoles .find input::-webkit-search-cancel-button { display: none; }
.pg-consoles .find .x {
  flex: 0 0 auto; border-radius: var(--r-p);
  background: var(--indigo-pale); color: var(--indigo-txt);
  padding: 9px 15px; min-height: 40px; font-size: 14px; font-weight: 600;
}
.pg-consoles .find .x:hover { background: var(--noir); color: #fff; }

/* Curseur de prix */
.pg-consoles .prix-box { display: grid; gap: 8px; }
.pg-consoles .prix-val { font-size: 15px; font-weight: 600; color: var(--encre); }
.pg-consoles .prix-val span { color: var(--gris-2); font-weight: 400; }
.pg-consoles input[type="range"] {
  width: 100%; max-width: 420px; height: 26px;
  background: none; border: 0; padding: 0; min-height: 0;
  -webkit-appearance: none; appearance: none;
}
.pg-consoles input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; border-radius: var(--r-p); background: var(--bord-champ);
}
.pg-consoles input[type="range"]::-moz-range-track {
  height: 8px; border-radius: var(--r-p); background: var(--bord-champ);
}
.pg-consoles input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; margin-top: -8px;
  border-radius: var(--r-p); background: var(--indigo);
  border: 3px solid var(--blanc); box-shadow: 0 0 0 1.5px var(--indigo);
  cursor: pointer;
}
.pg-consoles input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: var(--r-p);
  background: var(--indigo); border: 3px solid var(--blanc); cursor: pointer;
}
.pg-consoles .tri { max-width: 340px; border-radius: var(--r-p); padding-left: 18px; }

.pg-consoles .fbas {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4);
  padding-top: var(--s-3);
  border-top: 1.5px solid var(--bord-sep);
  font-size: 15px; color: var(--gris);
}
.pg-consoles .fbas .btn-lien { margin-left: auto; }

/* --- Cartes du rayon (G-Carte) -------------------------------------------- */
.pg-consoles .rv-carte { display: flex; flex-direction: column; }
.pg-consoles .rv-carte .photo {
  position: relative; height: 252px; overflow: hidden;
  background: var(--indigo-pale);
}
.pg-consoles .rv-carte .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-consoles .rv-carte .photo.est-modele img { object-fit: contain; padding: 22px; }
.pg-consoles .photo.ton-indigo { background: var(--indigo-pale); }
.pg-consoles .photo.ton-rose   { background: var(--rose-pale); }
.pg-consoles .photo.ton-jaune  { background: var(--jaune-pale); }
.pg-consoles .photo.ton-corail { background: var(--surface); }
.pg-consoles .rv-carte .tag-photo { position: absolute; top: 14px; left: 14px; }
.pg-consoles .rv-carte .prix { position: absolute; right: 14px; bottom: 14px; font-size: var(--e-l); padding: 11px 20px; }
.pg-consoles .rv-carte .ruban {
  position: absolute; left: 14px; bottom: 14px;
  border-radius: var(--r-p); padding: 7px 14px;
  font-size: 12.5px; font-weight: 600;
}
.pg-consoles .rv-carte .ruban.reservee { background: var(--rose-pale); color: var(--rose-txt); }
.pg-consoles .rv-carte .ruban.vendue { background: var(--surface-2); color: var(--gris); }

.pg-consoles .rv-carte .corps {
  padding: 22px 22px 24px;
  display: flex; flex-direction: column; gap: 13px; flex: 1 1 auto;
}
.pg-consoles .rv-carte h3 { font-size: var(--t-l); }
.pg-consoles .rv-carte .badges { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-consoles .rv-carte .desc { font-size: 15px; line-height: 1.55; color: var(--gris); }
.pg-consoles .rv-carte .prix-avant { font-size: 14px; color: var(--gris-2); }
.pg-consoles .rv-carte .legende { margin-top: 0; }
.pg-consoles .rv-carte .pill { margin-top: auto; }
.pg-consoles .rv-carte .deja {
  margin-top: auto; font-size: 14.5px; color: var(--gris-2);
  background: var(--indigo-pale); border-radius: var(--r-1); padding: 12px 14px;
}
.pg-consoles .rv-carte.est-vendue { opacity: .78; }
.pg-consoles .rv-carte.est-vendue:hover { transform: none; }

.pg-consoles .vide { display: grid; gap: var(--s-3); justify-items: center; }
.pg-consoles .vide svg { stroke: var(--gris-2); }

/* --- Bloc « faire une demande » ------------------------------------------- */
.pg-consoles .cta-bloc { padding: 44px 44px 42px; }
.pg-consoles .cta-txt { max-width: 720px; display: flex; flex-direction: column; gap: 16px; }
.pg-consoles .cta-bloc h2 { font-size: var(--t-xxl); color: var(--jaune-encre); }
.pg-consoles .cta-bloc p { font-size: 17px; line-height: 1.55; color: var(--jaune-encre); }
.pg-consoles .cta-acts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }

.pg-consoles .notes { display: grid; gap: 10px; }
.pg-consoles .notes li {
  position: relative; padding-left: 26px;
  font-size: 15px; color: var(--gris); line-height: 1.55;
}
.pg-consoles .notes li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 11px; height: 11px; border-radius: var(--r-p); background: var(--jaune);
}
.pg-consoles .notes b { color: var(--encre); font-weight: 600; }

/* ==========================================================================
   FICHE MODALE — carte blanche rayon 20 px
   ========================================================================== */
/* P9 — <dialog> natif : position, top layer, ::backdrop et défilement sont
   posés par .fo-dialog (css/forgeos.css §13 ter). Ici, la mise en page seule. */
.pg-consoles .fiche-modal {
  display: flex; align-items: flex-start; justify-content: center;
}
.pg-consoles .fiche-win {
  position: relative;
  width: 100%; max-width: 980px; margin: auto;
  background: var(--blanc);
  border: 1.5px solid var(--bord-carte);
  border-radius: var(--r-2);
  box-shadow: 12px 14px 0 var(--omb-rose);
  overflow: hidden;
}
.pg-consoles .fiche-tete {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 18px 22px;
  border-bottom: 1.5px solid var(--bord-carte);
}
.pg-consoles .fiche-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-p);
  background: var(--indigo-pale); color: var(--indigo-txt);
}
.pg-consoles .fiche-x svg { stroke: currentColor; }
.pg-consoles .fiche-x:hover { background: var(--noir); color: #fff; }

.pg-consoles .fiche-corps {
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: var(--s-6); padding: 24px 24px 28px;
}
.pg-consoles .gal { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pg-consoles .gal-main {
  position: relative; width: 100%; height: 300px;
  border-radius: var(--r-2); overflow: hidden; background: var(--indigo-pale);
  display: flex; align-items: center; justify-content: center;
}
.pg-consoles .gal-main img { width: 100%; height: 100%; object-fit: cover; }
.pg-consoles .gal-main.est-modele img { object-fit: contain; padding: 18px; }
.pg-consoles .gal-main .modele-cadre { height: 100%; }
.pg-consoles .gal-main .tag-photo { position: absolute; top: 14px; left: 14px; }
.pg-consoles .gal-mini { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-consoles .gal-mini button {
  width: 62px; height: 54px; padding: 0; overflow: hidden;
  border-radius: var(--r-1); border: 1.5px solid var(--bord-champ); background: var(--indigo-pale);
}
.pg-consoles .gal-mini button img { width: 100%; height: 100%; object-fit: cover; }
.pg-consoles .gal-mini button[aria-current="true"] { border-color: var(--indigo); }
.pg-consoles .gal-nav b { color: var(--encre); font-weight: 600; }

.pg-consoles .infos { display: flex; flex-direction: column; gap: 15px; min-width: 0; }
.pg-consoles .infos h2 { font-size: var(--t-xl); }
.pg-consoles .infos h3 { font-size: var(--t-s); margin-bottom: 9px; }
.pg-consoles .infos .badges { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-consoles .infos .desc { font-size: 15.5px; line-height: 1.6; color: var(--gris); }
.pg-consoles .infos .bloc {
  background: var(--indigo-pale); border-radius: var(--r-1); padding: 16px 18px;
}
.pg-consoles .infos .bloc .desc { color: var(--gris); }
.pg-consoles .infos .liste { display: flex; flex-direction: column; gap: 8px; }
.pg-consoles .infos .liste li { font-size: 15px; color: var(--gris); }
.pg-consoles .infos .liste b { display: block; color: var(--encre); font-weight: 600; }
.pg-consoles .infos .liste em { font-style: normal; font-size: 14px; color: var(--gris-2); }
.pg-consoles .prix-fiche { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.pg-consoles .prix-fiche .avant { font-size: 14.5px; color: var(--gris-2); }
.pg-consoles .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }

/* --- Adaptations ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .pg-consoles .tete-bloc { padding: 34px 30px; min-height: 0; }
  .pg-consoles .tete-photo { min-height: 280px; }
  .pg-consoles .fiche-corps { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .pg-consoles .gal-main { height: 260px; }
}
@media (max-width: 720px) {
  .pg-consoles .page-consoles { padding-block: 26px 40px; gap: 32px; }
  .pg-consoles .tete-bloc { padding: 26px 22px; }
  .pg-consoles .tete-photo { min-height: 220px; }
  .pg-consoles .filtres { padding: 18px 16px; }
  .pg-consoles .frow { grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start; }
  .pg-consoles .fbas .btn-lien { margin-left: 0; }
  .pg-consoles .rv-carte .photo { height: 210px; }
  .pg-consoles .cta-bloc { padding: 28px 22px; }
  .pg-consoles .cta-acts .pill { flex: 1 1 auto; justify-content: center; }
  .pg-consoles .fiche-modal { padding: 0; }
  .pg-consoles .fiche-win { border-radius: var(--r-2) var(--r-2) 0 0; box-shadow: none; margin: 40px 0 0; }
  .pg-consoles .fiche-corps { padding: 18px 16px 24px; }
  .pg-consoles .actions .pill { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   PAGE MODDING — l'atelier  (.pg-modding) · v4 « BENTO × MEMPHIS »
   Réf : docs/DA-V4-G.md. Familles en blocs colorés, mods en cartes cochables,
   rendu live (photo + calque d'écran indigo), récapitulatif en carte jaune.
   ========================================================================== */

.pg-modding .page-modding {
  padding-block: 40px 56px;
  display: flex; flex-direction: column; gap: 46px;
}
.pg-modding .sect { padding-top: 0; display: flex; flex-direction: column; gap: var(--s-5); }

/* --- En-tête bento -------------------------------------------------------- */
.pg-modding .tete-sect-bento { position: relative; }
.pg-modding .tete-sect-bento > .fo-formes { inset: -30px -10px -20px; }
.pg-modding .tete-bloc {
  padding: 44px 44px 40px;
  display: flex; flex-direction: column; gap: 18px;
  min-height: 360px; justify-content: center;
}
.pg-modding .tete-bloc h1 { font-size: var(--t-hero); color: var(--encre); }
.pg-modding .tete-bloc .kick { margin-bottom: 0; }
.pg-modding .tete-p { max-width: 44ch; font-size: var(--c-l); line-height: 1.55; color: var(--encre); }
.pg-modding .tete-compte {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; color: var(--encre);
}
.pg-modding .tete-compte i { font-style: normal; font-weight: 700; color: var(--encre); }
.pg-modding .tete-compte .sep { color: var(--encre); }

.pg-modding .tete-photo { min-height: 360px; background: var(--indigo-pale); }
.pg-modding .tete-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-modding .tete-photo .tag-photo { position: absolute; left: 18px; bottom: 18px; }

/* --- Étape 1 : familles en blocs colorés ---------------------------------- */
.pg-modding .fam-grid {
  display: grid; gap: var(--bento-gap);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.pg-modding .fam { display: block; cursor: pointer; }
.pg-modding .fam .cb { position: absolute; opacity: 0; width: 0; height: 0; }
.pg-modding .fam-in {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 18px 18px 16px; min-height: 186px;
}
.pg-modding .fam-px {
  height: 88px; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .88); border-radius: var(--r-1); padding: 8px;
}
.pg-modding .fam-px .modele-cadre { height: 100%; }
.pg-modding .fam-px .modele-img { filter: none; }
.pg-modding .fam-txt { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.pg-modding .fam-nom { font-family: var(--f-titre); font-weight: 600; font-size: var(--t-s); }
.pg-modding .fam-n { font-size: 13.5px; font-weight: 500; }
.pg-modding .fam-in.indigo { color: #fff; }
.pg-modding .fam-in.rose { color: var(--encre); }
.pg-modding .fam-in.jaune { color: var(--jaune-encre); }
.pg-modding .fam-in.corail { color: var(--corail-encre); }

.pg-modding .fam-coche {
  position: absolute; top: 14px; right: 14px;
  width: 26px; height: 26px; border-radius: var(--r-p);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .34); color: transparent;
  transition: background var(--step-fast) var(--ease-standard);
}
.pg-modding .fam-coche svg { stroke: currentColor; }
.pg-modding .fam .cb:checked + .fam-in { outline: 3px solid var(--encre); outline-offset: 3px; }
.pg-modding .fam .cb:checked + .fam-in .fam-coche { background: var(--blanc); color: var(--encre); }
.pg-modding .fam .cb:focus-visible + .fam-in { outline: 3px solid var(--indigo); outline-offset: 3px; }

/* --- Étape 2 + rendu en direct -------------------------------------------- */
.pg-modding .cfg {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: var(--s-6); align-items: start;
}
.pg-modding .cfg-form { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }

/* La bascule « je fournis les pièces » : une pilule cochable */
.pg-modding .piece-tog {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--indigo-pale); border-radius: var(--r-2);
  padding: 16px 18px; cursor: pointer;
}
.pg-modding .piece-txt { display: flex; flex-direction: column; gap: 3px; }
.pg-modding .piece-txt b { font-size: 16px; font-weight: 600; }
.pg-modding .piece-txt em { font-style: normal; font-size: 14.5px; color: var(--gris); }

/* Case à cocher stylée en pilule (mods + « je fournis les pièces ») */
.pg-modding .cb { position: absolute; opacity: 0; width: 0; height: 0; }
.pg-modding .cb-box {
  flex: 0 0 auto; width: 46px; height: 28px;
  border-radius: var(--r-p);
  background: var(--blanc);
  border: 1.5px solid var(--bord-champ);
  position: relative;
  display: inline-flex; align-items: center; justify-content: flex-end;
  padding-right: 7px; color: transparent;
  transition: background var(--step-fast) var(--ease-standard), border-color var(--step-fast) var(--ease-standard);
}
.pg-modding .cb-box::before {
  content: ''; position: absolute; left: 3px; top: 50%;
  width: 20px; height: 20px; margin-top: -10px;
  border-radius: var(--r-p); background: var(--bord-champ);
  transition: transform var(--step-fast) var(--ease-standard), background var(--step-fast) var(--ease-standard);
}
.pg-modding .cb-box svg { stroke: currentColor; position: relative; z-index: 1; }
.pg-modding .cb:checked + .cb-box {
  background: var(--indigo); border-color: var(--indigo); color: #fff;
}
.pg-modding .cb:checked + .cb-box::before { background: var(--blanc); transform: translateX(18px); }
.pg-modding .cb:focus-visible + .cb-box { outline: 3px solid var(--indigo); outline-offset: 3px; }
.pg-modding .cb:disabled + .cb-box { opacity: .5; }

/* --- Les mods : cartes cochables ------------------------------------------ */
.pg-modding .mod-list { display: flex; flex-direction: column; gap: 12px; }
.pg-modding .mod {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--blanc);
  border: 1.5px solid var(--bord-carte);
  border-radius: var(--r-2);
  box-shadow: 8px 10px 0 var(--omb-indigo);
  padding: 18px 20px; cursor: pointer;
  transition: transform var(--step-med) var(--ease-standard), box-shadow var(--step-med) var(--ease-standard),
              border-color var(--step-fast) var(--ease-standard);
}
.pg-modding .mod:hover { transform: translateY(-3px); }
.pg-modding .mod.on { border-color: var(--indigo); box-shadow: 8px 10px 0 var(--omb-rose); }
.pg-modding .mod.off { opacity: .55; cursor: not-allowed; box-shadow: none; }
.pg-modding .mod.off:hover { transform: none; }
.pg-modding .mod-in { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 auto; }
.pg-modding .mod-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
}
.pg-modding .mod-nom { font-family: var(--f-titre); font-weight: 600; font-size: var(--t-s); }
.pg-modding .mod-prix {
  font-family: var(--f-titre); font-weight: 700; font-size: var(--e-m); color: var(--vert-profond);
}
.pg-modding .mod-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pg-modding .mod-diff {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; color: var(--gris-2); font-weight: 500;
}
.pg-modding .mod-diff .crans { display: inline-flex; gap: 3px; }
.pg-modding .mod-diff i {
  width: 7px; height: 7px; border-radius: var(--r-p);
  background: var(--bord-champ); display: block;
}
.pg-modding .mod-diff i.on { background: var(--indigo); }
.pg-modding .mod-desc { font-size: 15px; line-height: 1.55; color: var(--gris); }
.pg-modding .mod-pre { font-size: 13.5px; color: var(--gris-2); }
.pg-modding .mod-off {
  font-size: 13.5px; color: var(--rose-txt);
  background: var(--rose-pale); border-radius: var(--r-1); padding: 9px 12px;
}
.pg-modding .mod-vide {
  background: var(--indigo-pale); border-radius: var(--r-2);
  padding: var(--s-6); color: var(--gris); text-align: center;
}

/* --- Colonne de droite : rendu live + récap ------------------------------- */
.pg-modding .cfg-live { min-width: 0; }
.pg-modding .cfg-live-in {
  position: sticky; top: calc(var(--header-h) + 16px);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.pg-modding .cfg-screen { padding: 18px 18px 14px; }
.pg-modding .cfg-stage {
  position: relative;
  height: 230px;
  display: flex; align-items: center; justify-content: center;
}
.pg-modding .cfg-stage .modele-cadre { height: 100%; }
.pg-modding .cfg-stage .modele-img { filter: none; }
.pg-modding .cfg-vide { font-size: 14px; color: var(--gris-2); }
.pg-modding .cfg-stage-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap; margin-top: 12px;
  font-size: 14px; font-weight: 600; color: var(--gris-2);
}
.pg-modding .cfg-stage-meta .on { color: var(--menthe-nuit); }

/* Le calque « écran » : une teinte indigo translucide, jamais un aplat opaque */
.pg-modding .cfg-ecran {
  position: absolute; display: block; overflow: hidden;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1.5px rgba(22, 101, 52, .55);
  z-index: 1; pointer-events: none;
}
.pg-modding .cfg-voile {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 0; display: block;
  background: rgba(22, 101, 52, .42);
  transition: height var(--step-slow) var(--ease-standard);
}
.pg-modding .cfg-ecran.ips { box-shadow: inset 0 0 0 1.5px rgba(143, 240, 200, .9); }
.pg-modding .cfg-ecran.ips .cfg-voile { background: rgba(139, 92, 246, .4); }
@media (prefers-reduced-motion: reduce) {
  .pg-modding .cfg-voile { transition: none; }
}

.pg-modding .cfg-badges {
  position: absolute; top: 0; display: flex; flex-direction: column; gap: 6px;
  pointer-events: none; z-index: 2; max-width: 44%;
}
.pg-modding .cfg-badges.g { left: 0; align-items: flex-start; }
.pg-modding .cfg-badges.d { right: 0; align-items: flex-end; }
.pg-modding .cfg-badge {
  display: block; font-style: normal;
  background: var(--blanc); color: var(--encre);
  border-radius: var(--r-p); padding: 5px 11px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(11, 31, 23, .12);
}

/* --- Récapitulatif : carte jaune ------------------------------------------ */
.pg-modding .recap { padding: 22px 22px 20px; color: var(--jaune-encre); }
.pg-modding .recap-tete {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  margin-bottom: 14px;
}
.pg-modding .recap h3 { font-size: var(--t-m); color: var(--jaune-encre); }
.pg-modding .recap-x {
  border-radius: var(--r-p); background: rgba(11, 31, 23, .12);
  padding: 5px 12px; font-size: 13px; font-weight: 600;
}
.pg-modding .recap-lines { display: flex; flex-direction: column; gap: 8px; }
.pg-modding .recap-lines li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  font-size: 14.5px;
}
.pg-modding .recap-lines .l { min-width: 0; }
.pg-modding .recap-lines b { font-weight: 600; white-space: nowrap; }
.pg-modding .recap-lines .rtete { font-family: var(--f-titre); font-weight: 600; font-size: 16px; }
.pg-modding .recap-lines .rvide { opacity: .74; }
.pg-modding .recap-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  margin-top: 14px; padding-top: 14px;
  border-top: 1.5px solid rgba(11, 31, 23, .18);
  font-size: 15px; font-weight: 600;
}
.pg-modding .recap-total b { font-family: var(--f-titre); font-weight: 600; font-size: 34px; }
.pg-modding .recap-meta { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.pg-modding .recap-meta li {
  display: flex; gap: 10px; font-size: 13.5px;
}
.pg-modding .recap-meta li > span:first-child { flex: 0 0 62px; font-weight: 600; }
.pg-modding .recap-note { margin-top: 12px; font-size: 13px; line-height: 1.5; }

.pg-modding .cfg-go { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.pg-modding #go.attente { opacity: .72; }

/* --- Comment ça se passe --------------------------------------------------- */
.pg-modding .etape {
  padding: 24px 22px 22px; min-height: 250px;
  display: flex; flex-direction: column; gap: 10px;
}
.pg-modding .etape-n { font-family: var(--f-titre); font-weight: 600; font-size: 30px; opacity: .8; }
.pg-modding .etape h3 { font-size: var(--t-m); color: inherit; }
.pg-modding .etape p { font-size: 14.5px; line-height: 1.5; }
.pg-modding .etape-d {
  margin-top: auto; border-radius: var(--r-p);
  background: var(--blanc); color: var(--encre); padding: 7px 13px;
  font-size: 12.5px; font-weight: 600; align-self: flex-start;
}

.pg-modding .notes { display: grid; gap: 10px; }
.pg-modding .notes li {
  position: relative; padding-left: 26px;
  font-size: 15px; color: var(--gris); line-height: 1.55;
}
.pg-modding .notes li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 11px; height: 11px; border-radius: var(--r-p); background: var(--rose);
}
.pg-modding .notes b { color: var(--encre); font-weight: 600; }

/* --- Établi ---------------------------------------------------------------- */
.pg-modding .etabli-shot { min-height: 300px; }
.pg-modding .etabli-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-modding .etabli-shot figcaption { position: absolute; left: 14px; bottom: 14px; }

/* --- Adaptations ----------------------------------------------------------- */
@media (max-width: 1080px) {
  .pg-modding .tete-bloc { padding: 34px 30px; min-height: 0; }
  .pg-modding .tete-photo { min-height: 280px; }
  .pg-modding .cfg { grid-template-columns: minmax(0, 1fr); }
  .pg-modding .cfg-live-in { position: static; }
  .pg-modding .cfg-stage { height: 260px; }
}
@media (max-width: 720px) {
  .pg-modding .page-modding { padding-block: 26px 40px; gap: 32px; }
  .pg-modding .tete-bloc { padding: 26px 22px; }
  .pg-modding .tete-photo { min-height: 220px; }
  .pg-modding .fam-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .pg-modding .fam-in { min-height: 160px; padding: 14px; }
  .pg-modding .fam-px { height: 66px; }
  .pg-modding .mod { padding: 15px 15px; gap: 12px; }
  .pg-modding .cfg-stage { height: 210px; }
  .pg-modding .etabli-shot { min-height: 220px; }
  .pg-modding .etape { min-height: 0; }
}
@media (max-width: 420px) {
  .pg-modding .cfg-badges { max-width: 50%; }
  .pg-modding .cfg-badge { font-size: 11px; padding: 4px 9px; }
}

/* ==========================================================================
   C4 (docs/CHANTIERS-UX.md · P15) — RÉCAP COLLANT, modding + rachat
   Le prix est la seule information qui doit rester visible pendant qu'on coche.
     · ≥ 1081 px — colonne de droite `position: sticky`, calée sous l'en-tête
       (`--header-h` + 16 px) : déjà en place sur modding (`.cfg-live-in`),
       ajoutée ici sur rachat (`.rc-carte`).
     · ≤ 720 px  — barre basse de 64 px, POSÉE AU-DESSUS de `.fo-keybar` et
       jamais par-dessus. Le rembourrage bas du document est augmenté d'autant :
       aucun contenu, pas même le pied de page, ne passe sous la barre.
   Le détail se déplie au tap, dans un `<details>` natif ; le CTA vit hors du
   `<details>` pour rester atteignable quand le détail est replié.
   ========================================================================== */

/* --- rachat : deux colonnes au-dessus de 1080 px -------------------------- */
.pg-rachat .rc-colonne { display: none; }

@media (min-width: 1081px) {
  /* `.sect.scan` et non `.scan` : `.pg-rachat .sect` (flex colonne) est déclaré
     plus bas dans ce fichier, à spécificité égale — il gagnerait autrement. */
  .pg-rachat .sect.scan { flex-direction: row; align-items: stretch; gap: var(--bento-gap); }
  .pg-rachat .rc-flux {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; gap: var(--s-5);
  }
  .pg-rachat .rc-colonne { display: block; flex: 0 0 300px; }
  .pg-rachat .rc-carte {
    position: sticky; top: calc(var(--header-h) + 16px);
    padding: 24px 22px 22px; color: #fff;
    display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  }
  .pg-rachat .rc-carte .rc-lab {
    margin: 0; font-size: 13px; font-weight: 700;
    letter-spacing: .04em; color: var(--indigo-sur);
  }
  .pg-rachat .rc-carte .rc-four {
    margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
    font-family: var(--f-titre); font-weight: 600; font-size: 30px; line-height: 1.05; color: #fff;
  }
  .pg-rachat .rc-carte .rc-four i { font-style: normal; font-size: 15px; color: var(--indigo-sur); }
  .pg-rachat .rc-carte .rc-piece { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--indigo-sur); }
  .pg-rachat .rc-carte .rc-go { margin-top: 6px; width: 100%; justify-content: center; }
  .pg-rachat .rc-carte .rc-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--indigo-sur); }
  /* Tant que l'estimation n'est pas complète, le CTA guide au lieu de mentir. */
  .pg-rachat .rc-colonne:not(.est-pret) .rc-go { opacity: .72; }
}

/* --- barre basse mobile (les deux pages) ---------------------------------- */
.pg-modding .rc-barre,
.pg-rachat .rc-barre { display: none; }

@media (max-width: 720px) {
  .pg-modding .rc-barre,
  .pg-rachat .rc-barre {
    position: fixed; z-index: 69;
    left: 0; right: 0;
    bottom: calc(var(--keybar-h) + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: end; column-gap: 12px;
    padding: 0 16px;
    background: var(--blanc);
    border-top: 1.5px solid var(--bord-tete);
    box-shadow: 0 -8px 24px rgba(11, 31, 23, .08);
  }
  /* Le contenu n'est jamais masqué : on rend au document la hauteur prise. */
  /* 64 px de barre + sa bordure haute de 1,5 px, arrondis à 66. */
  body.pg-modding,
  body.pg-rachat { padding-bottom: calc(var(--keybar-h) + 66px + env(safe-area-inset-bottom)); }

  /* Le détail s'ouvre VERS LE HAUT : la barre est ancrée en bas. */
  .pg-modding .rc-det,
  .pg-rachat .rc-det { display: flex; flex-direction: column-reverse; min-width: 0; }

  .pg-modding .rc-tete,
  .pg-rachat .rc-tete {
    display: flex; align-items: center; gap: 10px;
    min-height: 64px; cursor: pointer; list-style: none;
    color: var(--encre);
  }
  .pg-modding .rc-tete::-webkit-details-marker,
  .pg-rachat .rc-tete::-webkit-details-marker { display: none; }
  .pg-modding .rc-tete:focus-visible,
  .pg-rachat .rc-tete:focus-visible { outline: 3px solid var(--indigo); outline-offset: -3px; border-radius: var(--r-0); }

  .pg-modding .rc-lab,
  .pg-rachat .rc-lab {
    margin: 0; font-size: 12.5px; font-weight: 600; color: var(--gris-2);
    display: flex; flex-direction: column; min-width: 0;
  }
  .pg-modding .rc-x { font-style: normal; font-size: 12px; color: var(--gris-2); }
  .pg-modding .rc-total,
  .pg-rachat .rc-total {
    font-family: var(--f-titre); font-weight: 600; font-size: 22px;
    line-height: 1; color: var(--encre); white-space: nowrap;
  }
  .pg-rachat .rc-total { font-size: 19px; }

  .pg-modding .rc-chevron,
  .pg-rachat .rc-chevron {
    margin-left: auto; width: 11px; height: 11px; flex: 0 0 auto;
    border-right: 2.2px solid var(--gris-2); border-bottom: 2.2px solid var(--gris-2);
    transform: rotate(-135deg) translate(-2px, -2px);
    transition: transform var(--step-fast) var(--ease);
  }
  .pg-modding .rc-det[open] .rc-chevron,
  .pg-rachat .rc-det[open] .rc-chevron { transform: rotate(45deg) translate(-2px, -2px); }

  .pg-modding .rc-corps,
  .pg-rachat .rc-corps {
    padding: 14px 0 4px; max-height: 42vh; overflow-y: auto;
    border-bottom: 1.5px solid var(--bord-sep);
  }
  .pg-modding .rc-lines { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .pg-modding .rc-lines li {
    display: flex; justify-content: space-between; gap: 12px;
    font-size: 14.5px; color: var(--gris);
  }
  .pg-modding .rc-lines b { font-weight: 600; color: var(--encre); white-space: nowrap; }
  .pg-modding .rc-lines .rtete { font-family: var(--f-titre); font-weight: 600; font-size: 16px; color: var(--encre); }
  .pg-modding .rc-lines .rvide { opacity: .74; }
  .pg-modding .rc-note,
  .pg-rachat .rc-note { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--gris-2); }
  .pg-rachat .rc-piece { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--encre); }

  .pg-modding .rc-cta,
  .pg-rachat .rc-cta { display: flex; align-items: center; min-height: 64px; }
  .pg-modding .rc-go,
  /* 14,5 px : trop petit pour du blanc sur violet (4,23) → vert profond (7,1) */
  .pg-rachat .rc-go { min-height: 46px; padding: 0 18px; font-size: 14.5px; background: var(--vert-profond); }
  .pg-modding .rc-go:hover,
  .pg-rachat .rc-go:hover { background: var(--vert-nuit); }
  .pg-rachat .rc-barre:not(.est-pret) .rc-go { opacity: .72; }

  /* La colonne de droite de modding reste dans le flux : la barre reprend le
     total, le détail et le CTA, elle ne double donc rien à l'écran. */
}

@media (prefers-reduced-motion: reduce) {
  .pg-modding .rc-chevron,
  .pg-rachat .rc-chevron { transition: none; }
}

/* ==========================================================================
   PAGE RACHAT — l'estimation  (.pg-rachat) · v4 « BENTO × MEMPHIS »
   Réf : docs/DA-V4-G.md. Quatre étapes en blocs bento colorés (famille jaune,
   modèle blanc, état corail, résultat indigo), « ce que je chasse » en pilules
   photo, règles du rachat en carte lavande.
   ========================================================================== */

.pg-rachat .page-rachat {
  padding-block: 40px 56px;
  display: flex; flex-direction: column; gap: 46px;
}
.pg-rachat .sect { padding-top: 0; display: flex; flex-direction: column; gap: var(--s-5); }

/* --- En-tête bento -------------------------------------------------------- */
.pg-rachat .tete-sect-bento { position: relative; }
.pg-rachat .tete-sect-bento > .fo-formes { inset: -30px -10px -20px; }
.pg-rachat .tete-bloc {
  padding: 44px 44px 40px;
  display: flex; flex-direction: column; gap: 18px;
  min-height: 360px; justify-content: center;
  color: var(--corail-encre);
}
.pg-rachat .tete-bloc h1 { font-size: var(--t-hero); color: var(--corail-encre); }
.pg-rachat .tete-bloc .kick { margin-bottom: 0; }
.pg-rachat .tete-p { max-width: 46ch; font-size: var(--c-l); line-height: 1.55; }
.pg-rachat .tete-p b { font-weight: 700; }
.pg-rachat .tete-compte {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500;
}
.pg-rachat .tete-compte i { font-style: normal; font-weight: 700; }
.pg-rachat .tete-compte .sep { opacity: .55; }

.pg-rachat .tete-photo { min-height: 360px; background: var(--indigo-pale); }
.pg-rachat .tete-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-rachat .tete-photo .tag-photo { position: absolute; left: 18px; bottom: 18px; }

/* --- Les quatre étapes ---------------------------------------------------- */
.pg-rachat .scan { gap: var(--bento-gap); }
.pg-rachat .etape { padding: 28px 30px 30px; display: flex; flex-direction: column; gap: 16px; }
.pg-rachat .etape.vient { animation: rv-vient var(--step-slow) var(--ease-enter) both; }
@keyframes rv-vient { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pg-rachat .etape.vient { animation: none; } }

.pg-rachat .etape-tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
}
.pg-rachat .etape-n { font-size: 13.5px; font-weight: 600; opacity: .85; }
.pg-rachat .etape-x {
  border-radius: var(--r-p); padding: 6px 13px;
  font-size: 13px; font-weight: 600;
  background: rgba(11, 31, 23, .1);
}
.pg-rachat .etape h2 { font-size: var(--t-xl); }
.pg-rachat .etape h3 { font-size: var(--t-s); }
.pg-rachat .etape-note { font-size: 13.5px; line-height: 1.55; opacity: .8; }

.pg-rachat .etape.jaune { color: var(--jaune-encre); }
.pg-rachat .etape.corail { color: var(--corail-encre); }
.pg-rachat .etape.indigo { color: #fff; }
.pg-rachat .etape.indigo h2, .pg-rachat .etape.indigo h3 { color: #fff; }
.pg-rachat .etape.indigo .etape-x { background: rgba(255, 255, 255, .2); color: #fff; }
.pg-rachat .etape.blanc .etape-x { background: var(--indigo-pale); color: var(--indigo-txt); }
.pg-rachat .etape.is-actif { outline: 3px solid var(--encre); outline-offset: 3px; }
.pg-rachat .etape.indigo.is-actif { outline-color: var(--indigo-clair); }

/* Étape 1 : familles en pilules photo */
.pg-rachat .fam-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.pg-rachat .fam {
  display: flex; align-items: center; gap: 12px;
  background: var(--blanc); color: var(--encre);
  border: 1.5px solid transparent;
  border-radius: var(--r-p);
  padding: 9px 18px 9px 9px; min-height: 64px;
  text-align: left;
  transition: transform var(--step-fast) var(--ease-standard), border-color var(--step-fast) var(--ease-standard);
}
.pg-rachat .fam:hover { transform: translateY(-2px); }
.pg-rachat .fam.on { border-color: var(--encre); }
.pg-rachat .fam-px {
  flex: 0 0 46px; height: 46px; border-radius: var(--r-p);
  display: flex; align-items: center; justify-content: center; padding: 5px;
  overflow: hidden;
}
.pg-rachat .fam-px .modele-cadre { height: 100%; }
.pg-rachat .fam-px .modele-img { filter: none; }
.pg-rachat .fam-px.ton-indigo { background: var(--indigo-pale); }
.pg-rachat .fam-px.ton-rose   { background: var(--rose-pale); }
.pg-rachat .fam-px.ton-jaune  { background: var(--jaune-pale); }
.pg-rachat .fam-px.ton-corail { background: var(--surface); }
.pg-rachat .fam-txt { display: flex; flex-direction: column; min-width: 0; }
.pg-rachat .fam-n { font-size: 15px; font-weight: 600; }
.pg-rachat .fam-c { font-size: 12.5px; color: var(--gris-2); }
.pg-rachat .etiq-txt { display: inline-flex; align-items: center; justify-content: center; }
.pg-rachat .etiq-txt svg { stroke: var(--gris-2); }

/* Étape 2 : recherche + modèles */
.pg-rachat .find {
  display: flex; align-items: center; gap: 10px;
  background: var(--blanc);
  border: 1.5px solid var(--bord-champ);
  border-radius: var(--r-p);
  padding: 0 16px; min-height: 48px; max-width: 460px;
}
.pg-rachat .find:focus-within { border-color: var(--indigo); }
.pg-rachat .find-ic { display: inline-flex; flex: 0 0 auto; }
.pg-rachat .find-in {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; padding: 0;
  min-height: 44px; font-size: 16px;
}
.pg-rachat .find-in::-webkit-search-cancel-button { display: none; }

.pg-rachat .mod-list {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.pg-rachat .mod {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  background: var(--blanc); color: var(--encre);
  border: 1.5px solid var(--bord-carte);
  border-radius: var(--r-2);
  padding: 12px 14px; min-height: 74px; text-align: left;
  transition: transform var(--step-fast) var(--ease-standard), border-color var(--step-fast) var(--ease-standard);
}
.pg-rachat .mod:hover { transform: translateY(-2px); border-color: var(--encre); }
.pg-rachat .mod.on { border-color: var(--indigo); box-shadow: 0 0 0 1.5px var(--indigo); }
.pg-rachat .mod-px {
  flex: 0 0 48px; height: 48px; border-radius: var(--r-1);
  background: var(--indigo-pale);
  display: flex; align-items: center; justify-content: center; padding: 5px; overflow: hidden;
}
.pg-rachat .mod-px .modele-cadre { height: 100%; }
.pg-rachat .mod-px .modele-img { filter: none; }
.pg-rachat .mod-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pg-rachat .mod-n { font-size: 15px; font-weight: 600; line-height: 1.3; }
.pg-rachat .mod-c { font-size: 12.5px; color: var(--gris-2); }
.pg-rachat .mod-prio { position: absolute; top: -10px; right: 10px; font-size: 11.5px; padding: 5px 10px; }
.pg-rachat .mod-vide {
  background: var(--indigo-pale); border-radius: var(--r-1);
  padding: var(--s-4); font-size: 14.5px; color: var(--gris);
}

.pg-rachat .var-zone { display: flex; flex-direction: column; gap: 10px; }
.pg-rachat .var-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-rachat .var {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--r-p); padding: 10px 16px; min-height: 44px;
  background: var(--indigo-pale); color: var(--encre);
  border: 1.5px solid transparent;
  font-size: 14.5px; font-weight: 600;
}
.pg-rachat .var:hover { border-color: var(--encre); }
.pg-rachat .var.on { background: var(--noir); color: #fff; }
.pg-rachat .var-d { font-weight: 500; opacity: .75; font-size: 13px; }

/* Étape 3 : états */
.pg-rachat .etat-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.pg-rachat .etat {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--blanc); color: var(--encre);
  border: 1.5px solid transparent;
  border-radius: var(--r-2);
  padding: 16px 18px; text-align: left;
  transition: transform var(--step-fast) var(--ease-standard), border-color var(--step-fast) var(--ease-standard);
}
.pg-rachat .etat:hover { transform: translateY(-3px); }
.pg-rachat .etat.on { border-color: var(--encre); box-shadow: 0 0 0 1.5px var(--encre); }
.pg-rachat .etat-n { font-family: var(--f-titre); font-weight: 600; font-size: var(--t-s); }
.pg-rachat .etat-d { font-size: 14px; line-height: 1.5; color: var(--gris); }
.pg-rachat .etat-k {
  align-self: flex-start; margin-top: 2px;
  border-radius: var(--r-p); background: var(--indigo-pale); color: var(--indigo-txt);
  padding: 5px 11px; font-size: 12.5px; font-weight: 600;
}

.pg-rachat .extras { border: 0; display: flex; flex-direction: column; gap: 10px; }
.pg-rachat .extras legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.pg-rachat .extras-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-rachat .extra {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--blanc); border-radius: var(--r-p);
  padding: 9px 16px 9px 10px; min-height: 44px;
  font-size: 14.5px; font-weight: 600; color: var(--encre); cursor: pointer;
}
.pg-rachat .extra input { position: absolute; opacity: 0; width: 0; height: 0; }
.pg-rachat .extra-box {
  width: 24px; height: 24px; border-radius: var(--r-p);
  border: 1.5px solid var(--bord-champ); background: var(--blanc);
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent; flex: 0 0 auto;
}
.pg-rachat .extra-box svg { stroke: currentColor; }
.pg-rachat .extra input:checked + .extra-box {
  background: var(--indigo); border-color: var(--indigo); color: #fff;
}
.pg-rachat .extra input:focus-visible + .extra-box { outline: 3px solid var(--indigo); outline-offset: 3px; }

/* Étape 4 : le résultat */
.pg-rachat .etape-res { gap: 14px; }
.pg-rachat .res-top { font-size: 13.5px; font-weight: 600; color: var(--indigo-sur); }
.pg-rachat .res-piece { font-family: var(--f-titre); font-weight: 600; font-size: var(--t-xl); color: #fff; }
.pg-rachat .res-lab { font-size: 14px; font-weight: 600; color: var(--indigo-sur); margin-top: 6px; }
.pg-rachat .res-four {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px;
  font-family: var(--f-titre); font-weight: 600; font-size: 56px;
  line-height: 1.04; letter-spacing: -0.025em; color: #fff;
}
.pg-rachat .res-four i { font-style: normal; font-size: 22px; color: var(--indigo-sur); }
.pg-rachat .res-calc { font-size: 13.5px; color: var(--indigo-sur); }

.pg-rachat .res-cotes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.pg-rachat .rc {
  display: flex; flex-direction: column; gap: 3px;
  background: rgba(255, 255, 255, .1); border-radius: var(--r-1);
  padding: 11px 15px; min-width: 150px;
}
.pg-rachat .rc i { font-style: normal; font-size: 12.5px; color: #fff; }
.pg-rachat .rc b { font-family: var(--f-titre); font-weight: 600; font-size: var(--e-m); color: #fff; }

.pg-rachat .pourquoi { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.pg-rachat .pourquoi li { display: flex; gap: 12px; align-items: flex-start; }
.pg-rachat .pourquoi li > span {
  flex: 0 0 auto; border-radius: var(--r-p);
  background: var(--blanc); color: var(--indigo-txt);
  padding: 5px 12px; font-size: 12.5px; font-weight: 600;
}
.pg-rachat .pourquoi p { font-size: 14.5px; line-height: 1.55; color: var(--indigo-sur); }
.pg-rachat .res-note {
  font-size: 14px; line-height: 1.55; color: #fff;
  background: rgba(255, 255, 255, .1); border-radius: var(--r-1); padding: 12px 15px;
}
.pg-rachat .res-note.prio { background: var(--jaune); color: var(--jaune-encre); font-weight: 600; }
.pg-rachat .res-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: 4px; }
.pg-rachat .res-lien { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.pg-rachat .res-lien:hover { color: var(--indigo-sur); }

/* --- Ce que je chasse : pilules photo ------------------------------------- */
.pg-rachat .chasse-t { font-size: var(--t-m); }
.pg-rachat .cart-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.pg-rachat .cart {
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--blanc); color: var(--encre);
  border: 1.5px solid var(--bord-carte);
  border-radius: var(--r-p);
  padding: 7px 18px 7px 7px; min-height: 56px;
  font-size: 15px; font-weight: 600;
  transition: transform var(--step-fast) var(--ease-standard), border-color var(--step-fast) var(--ease-standard);
}
.pg-rachat .cart:hover { transform: translateY(-2px); border-color: var(--encre); }
.pg-rachat .cart-px {
  flex: 0 0 42px; height: 42px; border-radius: var(--r-p);
  display: flex; align-items: center; justify-content: center; padding: 4px; overflow: hidden;
}
.pg-rachat .cart-px .modele-cadre { height: 100%; }
.pg-rachat .cart-px .modele-img { filter: none; }
.pg-rachat .cart-px.ton-indigo { background: var(--indigo-pale); }
.pg-rachat .cart-px.ton-rose   { background: var(--rose-pale); }
.pg-rachat .cart-px.ton-jaune  { background: var(--jaune-pale); }
.pg-rachat .cart-px.ton-corail { background: var(--surface); }
.pg-rachat .cart-c { font-weight: 500; color: var(--gris-2); font-size: 13.5px; }

/* --- Les règles du rachat : carte lavande --------------------------------- */
.pg-rachat .bento.lavande { background: var(--surface-2); color: var(--encre); box-shadow: 10px 12px 0 var(--omb-corail); }
.pg-rachat .honnete { padding: 34px 34px 32px; display: flex; flex-direction: column; gap: 18px; }
.pg-rachat .honnete h2 { font-size: var(--t-xxl); }
.pg-rachat .honnete-liste { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-rachat .honnete-liste li { display: flex; gap: 12px; align-items: flex-start; }
.pg-rachat .honnete-liste li > span {
  flex: 0 0 auto; border-radius: var(--r-p);
  background: var(--blanc); color: var(--indigo-txt);
  padding: 6px 12px; font-size: 12.5px; font-weight: 700;
}
.pg-rachat .honnete-liste p { font-size: 15px; line-height: 1.55; color: var(--gris); }

/* --- Passerelle modding --------------------------------------------------- */
.pg-rachat .cta-bloc { padding: 34px 34px 32px; display: flex; flex-direction: column; gap: 14px; }
.pg-rachat .cta-bloc h2 { font-size: var(--t-xl); }
.pg-rachat .cta-bloc p { font-size: 16px; line-height: 1.55; color: var(--gris); max-width: 72ch; }

/* --- Adaptations ----------------------------------------------------------- */
@media (max-width: 1080px) {
  .pg-rachat .tete-bloc { padding: 34px 30px; min-height: 0; }
  .pg-rachat .tete-photo { min-height: 280px; }
  .pg-rachat .honnete-liste { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .pg-rachat .page-rachat { padding-block: 26px 40px; gap: 32px; }
  .pg-rachat .tete-bloc { padding: 26px 22px; }
  .pg-rachat .tete-photo { min-height: 220px; }
  .pg-rachat .etape { padding: 22px 18px 24px; }
  .pg-rachat .fam-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .pg-rachat .mod-list { grid-template-columns: minmax(0, 1fr); }
  .pg-rachat .res-four { font-size: 42px; gap: 10px; }
  .pg-rachat .honnete, .pg-rachat .cta-bloc { padding: 24px 20px; }
  .pg-rachat .res-cta .pill { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 380px) {
  .pg-rachat .res-four { font-size: 34px; }
  .pg-rachat .fam-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   .pg-pc — ATELIER PC · v4 « BENTO × MEMPHIS » (docs/DA-SPEC.md §12)
   Entête + 3 offres en blocs colorés, wizard de diagnostic en carte blanche,
   forfaits en cartes bento, preuve photo réelle de l'établi.
   ========================================================================== */
.pg-pc .pc-page { padding-block: 34px 56px; display: flex; flex-direction: column; gap: 46px; }
.pg-pc .sect { padding-top: 0; }

/* --- Entête ---------------------------------------------------------------- */
/* P10 — en-tête bento commun : bloc indigo 7 colonnes + photo 5 colonnes.
   Le texte de lecture est posé sur le bloc opaque : les formes de fond ne
   passent plus derrière lui (DA-V4 §3). */
.pg-pc .pc-head { position: relative; padding-block: 18px 6px; }
.pg-pc .pc-head > .fo-formes { inset: -24px -10px -10px; }
.pg-pc .pc-head .bento-grid { position: relative; z-index: 1; }
.pg-pc .tete-bloc {
  padding: 44px 44px 40px;
  display: flex; flex-direction: column; gap: 18px;
  min-height: 380px; justify-content: center;
}
.pg-pc .tete-bloc h1 { font-size: var(--t-hero); color: #fff; margin: 0; }
.pg-pc .tete-bloc .kick { align-self: flex-start; margin-bottom: 0; }
.pg-pc .tete-p {
  max-width: 48ch; font-size: var(--c-l); line-height: 1.55;
  color: var(--indigo-sur); margin: 0;
}
.pg-pc .tete-p b { color: #fff; font-weight: 600; }
.pg-pc .tete-compte {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0; font-size: 15px; font-weight: 500; color: var(--indigo-sur);
}
.pg-pc .tete-compte i { font-style: normal; font-weight: 700; color: #fff; }
.pg-pc .tete-compte .sep { color: var(--vert-sur); }
.pg-pc .tete-compte .dim { color: var(--indigo-sur); }
.pg-pc .tete-photo { min-height: 380px; background: var(--indigo-pale); }
.pg-pc .tete-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-pc .tete-photo .tag-photo { position: absolute; left: 18px; bottom: 18px; }
.pg-pc .head-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--s-3); }

@media (max-width: 1080px) {
  .pg-pc .tete-bloc { padding: 34px 30px; min-height: 0; }
  .pg-pc .tete-photo { min-height: 240px; }
}

/* --- Les trois offres ------------------------------------------------------ */
.pg-pc .offre {
  display: flex; flex-direction: column; gap: 10px;
  padding: 26px 24px 24px; color: inherit; min-height: 230px;
}

.pg-pc .offre h2 { font-size: var(--t-l); }
.pg-pc .offre p { font-size: 15px; line-height: 1.5; font-weight: 500; }
.pg-pc .offre .etiq-offre {
  align-self: flex-start; border-radius: var(--r-p);
  background: var(--noir); color: #fff;
  font-size: 12.5px; font-weight: 600; padding: 6px 13px;
}
.pg-pc .offre .offre-prix {
  margin-top: auto; font-family: var(--f-titre); font-weight: 600; font-size: var(--e-m);
}
.pg-pc .offre .offre-go {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start; border-radius: var(--r-p);
  background: transparent; border: 1.5px solid currentColor; padding: 10px 18px;
  font-size: 14.5px; font-weight: 600; min-height: 44px;
}
.pg-pc .offre.jaune .offre-go, .pg-pc .offre.corail .offre-go { background: var(--blanc); border-color: var(--blanc); }

/* --- Listes à pilules (partagées par toute la page) ------------------------ */
.pg-pc .log li { padding-left: 0; display: flex; gap: 10px; align-items: flex-start; }
.pg-pc .log li::before { content: none; }
.pg-pc .log .tag {
  flex: 0 0 auto; border-radius: var(--r-p);
  background: var(--indigo-pale); color: var(--indigo-txt);
  font-size: 12px; font-weight: 600; padding: 3px 11px; line-height: 1.5;
}
.pg-pc .log .tag.ok { background: var(--menthe-pale); color: var(--vert-profond); }
.pg-pc .log.non .tag { background: var(--rose-pale); color: var(--rose-txt); }
.pg-pc .log.non li { color: var(--gris-2); }

/* --- Diagnostic guidé ------------------------------------------------------ */
.pg-pc .diag .win-body { padding-top: var(--s-5); }
.pg-pc .diag-bar {
  height: 10px; border-radius: var(--r-p); background: var(--indigo-pale);
  overflow: hidden; margin-bottom: var(--s-5);
}
.pg-pc .diag-bar i {
  display: block; height: 100%; width: 0; border-radius: var(--r-p);
  background: var(--indigo); transition: width var(--step-med) var(--ease-standard);
}
.pg-pc .diag-sym {
  display: inline-flex; border-radius: var(--r-p);
  background: var(--indigo-pale); color: var(--indigo-txt);
  padding: 7px 15px; font-size: 13.5px; font-weight: 600; margin-bottom: var(--s-4);
}
.pg-pc .diag-q {
  font-family: var(--f-titre); font-weight: 600; font-size: var(--t-m);
  line-height: 1.2; margin-bottom: var(--s-4);
}
.pg-pc .diag-opts { display: grid; gap: 10px; }
.pg-pc .diag-opt {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  border-radius: var(--r-p); border: 1.5px solid var(--bord-champ);
  background: var(--blanc); color: var(--encre);
  padding: 13px 20px; min-height: 52px;
  font-size: 16px; font-weight: 500;
  transition: border-color var(--step-fast) var(--ease-standard), background var(--step-fast) var(--ease-standard),
              transform var(--step-fast) var(--ease-standard);
}
.pg-pc .diag-opt .k {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--r-p);
  display: grid; place-items: center;
  background: var(--indigo-pale); color: var(--indigo-txt);
  font-size: 13px; font-weight: 600;
}
.pg-pc .diag-opt:hover, .pg-pc .diag-opt:focus-visible {
  border-color: var(--indigo); background: var(--indigo-pale); transform: translateY(-2px);
}
.pg-pc .diag-nav { margin-top: var(--s-5); }
.pg-pc .diag-rep { margin: var(--s-4) 0; }
.pg-pc .diag-out {
  border-radius: var(--r-2); background: var(--indigo); color: #fff;
  padding: 22px 24px; margin-top: var(--s-4);
}
.pg-pc .diag-out-k { font-size: 13.5px; font-weight: 600; color: var(--indigo-sur); }
.pg-pc .diag-out-n {
  font-family: var(--f-titre); font-weight: 600; font-size: var(--t-l);
  line-height: 1.1; margin: 6px 0 12px; color: #fff;
}
.pg-pc .diag-out-p {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-family: var(--f-titre); font-weight: 600; font-size: var(--e-m);
}
.pg-pc .diag-out-x {
  border-radius: var(--r-p); background: rgba(255, 255, 255, .18);
  padding: 6px 13px; font-family: var(--f-corps); font-size: 13px; font-weight: 600;
}
.pg-pc .diag-msg { margin-top: var(--s-4); color: var(--gris); font-size: var(--c-m); line-height: 1.6; }
.pg-pc .diag-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: var(--s-5); }

/* --- Machines (émulation / montage) ---------------------------------------- */
.pg-pc .emu-grid, .pg-pc .pc-grid {
  display: grid; gap: var(--bento-gap);
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  align-items: start;
}
.pg-pc .emu-machine, .pg-pc .pc-machine { position: sticky; top: calc(var(--header-h) + 16px); }
.pg-pc .machine-bloc { padding: var(--s-5); display: grid; place-items: center; min-height: 240px; }
.pg-pc .emu-stage, .pg-pc .pc-stage {
  width: 100%; display: grid; place-items: center;
  /* QA v4 : sans min-width:0 le `min-width:auto` de l'élément de grille laissait
     la photo (hauteur fixe + ratio) pousser le bloc à 376 px dans un conteneur
     de 244 px → débordement à 320/390 px. */
  min-width: 0; max-width: 100%; overflow: hidden;
}
.pg-pc .pc-stage img { width: 100%; border-radius: var(--r-1); object-fit: cover; }
.pg-pc .legende { margin-top: 10px; }
.pg-pc .emu-etat, .pg-pc .pc-etat { margin-top: 6px; font-size: var(--c-s); color: var(--gris); }
.pg-pc .emu-etat b, .pg-pc .pc-etat b { color: var(--encre); font-weight: 600; }
.pg-pc .emu-log, .pg-pc .pc-etapes { margin-top: var(--s-4); }
.pg-pc .pc-etapes li.off { opacity: .55; }
.pg-pc .px-add { animation: pc-add var(--step-med) var(--ease-enter) 1; }
@keyframes pc-add { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pg-pc .px-add { animation: none; } }

/* --- Cartes de forfait ----------------------------------------------------- */
.pg-pc .emu-cards, .pg-pc .pc-cards { display: grid; gap: var(--bento-gap); }
.pg-pc .formule .win-bar { align-items: center; }
.pg-pc .formule.braise { box-shadow: 10px 12px 0 var(--omb-jaune); }
.pg-pc .formule.is-lit { border-color: var(--indigo-clair); }
.pg-pc .formule .f-badge { margin-bottom: var(--s-3); }
.pg-pc .formule .f-resume { color: var(--gris); font-size: var(--c-m); margin-bottom: var(--s-4); max-width: 64ch; }
.pg-pc .formule .log.non { margin-top: var(--s-3); }
.pg-pc .formule .f-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-top: var(--s-5);
}
.pg-pc .formule .f-duree {
  border-radius: var(--r-p); background: var(--indigo-pale); color: var(--indigo-txt);
  padding: 7px 14px; font-size: 13px; font-weight: 600;
}
.pg-pc #emu-appareils { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* --- Encadré « tu fournis tes jeux » --------------------------------------- */
.pg-pc .encadre { padding: 26px 26px 28px; margin-top: var(--bento-gap); }
.pg-pc .encadre-t { font-family: var(--f-titre); font-weight: 600; font-size: var(--t-m); margin-bottom: 10px; }
.pg-pc .encadre p { font-size: var(--c-m); line-height: 1.6; max-width: 76ch; }
.pg-pc .encadre p b { font-weight: 600; }

/* --- Réparation ------------------------------------------------------------ */
.pg-pc .win-body.flush { padding: 8px 0 0; }
.pg-pc .rep-l { padding: 18px 22px; border-bottom: 1.5px solid var(--bord-carte); }
.pg-pc .rep-l:last-child { border-bottom: none; }
.pg-pc .rep-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.pg-pc .rep-n { font-family: var(--f-titre); font-weight: 600; font-size: var(--t-s); }
.pg-pc .rep-p {
  border-radius: var(--r-p); background: var(--violet); color: var(--fond);
  padding: 7px 15px; font-family: var(--f-titre); font-weight: 700; font-size: 19px;
  white-space: nowrap;
}
.pg-pc .rep-p.est-offert { background: var(--menthe-pale); color: var(--vert-profond); }
.pg-pc .rep-d { color: var(--gris); font-size: var(--c-s); margin-top: 8px; max-width: 74ch; }
.pg-pc .rep-f { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.pg-pc .rep-t {
  border-radius: var(--r-p); background: var(--indigo-pale); color: var(--indigo-txt);
  padding: 6px 13px; font-size: 12.5px; font-weight: 600;
}
.pg-pc .rep-f .rep-ask { margin-left: auto; }

/* --- Rayons (consoles rétro, téléphones, PC) ------------------------------- */
.pg-pc .rep-p.est-devis { background: var(--surface-2); color: var(--encre); border: 1.5px solid var(--bord-carte); }
.pg-pc .rayon-app { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pg-pc .rayon-cote { display: flex; flex-direction: column; }
.pg-pc .rayon-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bento-gap); }
.pg-pc .tete-sect h3 { font-family: var(--f-titre); font-weight: 600; font-size: var(--t-m); margin: 0; }
@media (max-width: 980px) { .pg-pc .rayon-cards { grid-template-columns: minmax(0, 1fr); } }

/* --- Preuve photo ---------------------------------------------------------- */
.pg-pc .preuve { position: relative; min-height: 300px; }
.pg-pc .preuve img { width: 100%; height: 100%; max-height: 520px; object-fit: cover; }
.pg-pc .preuve figcaption { position: absolute; left: 16px; bottom: 16px; }

/* --- FAQ ------------------------------------------------------------------- */
.pg-pc .faq { padding: 6px 4px; }
.pg-pc .faq-i { border-bottom: 1.5px solid var(--bord-carte); }
.pg-pc .faq-i:last-child { border-bottom: none; }
.pg-pc .faq-i > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 20px 22px; min-height: 60px;
  font-family: var(--f-titre); font-weight: 600; font-size: var(--t-s); color: var(--encre);
  border-radius: var(--r-2);
}
.pg-pc .faq-i > summary::-webkit-details-marker { display: none; }
.pg-pc .faq-i > summary::after {
  content: ''; flex: 0 0 auto; width: 22px; height: 22px;
  background: no-repeat center / 22px 22px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234F46E5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  transition: transform var(--step-fast) var(--ease-standard);
}
.pg-pc .faq-i[open] > summary::after { transform: rotate(180deg); }
.pg-pc .faq-i > summary:hover, .pg-pc .faq-i > summary:focus-visible { background: var(--indigo-pale); }
.pg-pc .faq-r { padding: 0 22px var(--s-5); }
.pg-pc .faq-r p { color: var(--gris); font-size: var(--c-m); line-height: 1.6; max-width: 76ch; }
.pg-pc .faq-r .log { gap: 12px; }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 980px) {
  .pg-pc .emu-grid, .pg-pc .pc-grid { grid-template-columns: minmax(0, 1fr); }
  .pg-pc .emu-machine, .pg-pc .pc-machine { position: static; }
}
@media (max-width: 620px) {
  .pg-pc .pc-page { gap: 36px; }
  .pg-pc .tete-compte { display: grid; gap: 6px; justify-items: start; }
  .pg-pc .tete-compte .sep { display: none; }
  .pg-pc .head-actions .pill { width: 100%; }
  .pg-pc .rep-f .rep-ask { margin-left: 0; width: 100%; }
  .pg-pc .rep-p { white-space: normal; }
  .pg-pc .diag-actions .pill { width: 100%; }
  .pg-pc .offre { min-height: 0; }
}

/* ==========================================================================
   .pg-journal — JOURNAL DE LA BOUTIQUE · v4 « BENTO × MEMPHIS »
   Bloc « tous les liens » en tête (pilule noire « Estimer ma console »),
   flux en grille de cartes avec pilule de pilier, preuve avant/après réelle.
   ========================================================================== */
.pg-journal .jn-page { padding-block: 34px 56px; display: flex; flex-direction: column; gap: 46px; }
.pg-journal .sect { padding-top: 0; }

/* --- Bloc lien-en-bio ------------------------------------------------------ */
.pg-journal .bio-bloc { padding: 34px 32px 32px; display: flex; flex-direction: column; gap: 14px; }
.pg-journal .bio-bloc h1 { font-size: clamp(34px, 5.4vw, 50px); color: #fff; }
.pg-journal .bio-bloc .kick { margin-bottom: 0; }
.pg-journal .bio-handle { font-size: var(--c-m); font-weight: 600; color: var(--indigo-sur); }
.pg-journal .bio-line { font-size: var(--c-l); line-height: 1.55; color: var(--indigo-sur); max-width: 46ch; }
.pg-journal .bio-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.pg-journal .chip-lien {
  display: inline-flex; align-items: center; min-height: 44px;
  border-radius: var(--r-p); background: rgba(255, 255, 255, .14);
  color: #fff; padding: 10px 18px; font-size: 14.5px; font-weight: 600;
}
.pg-journal .chip-lien:hover { background: rgba(255, 255, 255, .24); color: #fff; }

.pg-journal .bio-links {
  padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 12px; justify-content: center;
}
.pg-journal .bio-links-t {
  font-family: var(--f-titre); font-weight: 600; font-size: var(--t-s);
  color: var(--encre); margin-bottom: 4px;
}
.pg-journal .bio-links .pill { justify-content: space-between; gap: var(--s-4); }
.pg-journal .bio-links .pill .go { font-size: 13.5px; opacity: .72; font-weight: 600; }

/* --- Filtres --------------------------------------------------------------- */
.pg-journal .filtres { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--s-5); }
.pg-journal .filtre { cursor: pointer; min-height: 44px; }
.pg-journal .filtre.on, .pg-journal .filtre[aria-pressed="true"] { background: var(--noir); color: #fff; }

/* --- Flux : grille de cartes ----------------------------------------------- */
.pg-journal .flux { list-style: none; }
.pg-journal .entree { display: flex; flex-direction: column; }
.pg-journal .entree .corps {
  padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px;
  flex: 1 1 auto; align-items: flex-start;
}
.pg-journal .entree .ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pg-journal .entree .date { font-size: 13px; font-weight: 600; color: var(--gris-2); }
.pg-journal .entree .titre { font-family: var(--f-titre); font-weight: 600; font-size: var(--t-m); line-height: 1.12; }
.pg-journal .entree .accroche { font-size: 15px; line-height: 1.55; color: var(--gris); flex: 1 1 auto; }
.pg-journal .entree .btn-lien { margin-top: 2px; }

/* --- Listes à pilules ------------------------------------------------------ */
.pg-journal .log li { padding-left: 0; display: flex; gap: 10px; align-items: flex-start; }
.pg-journal .log li::before { content: none; }
.pg-journal .log .tag {
  flex: 0 0 auto; border-radius: var(--r-p);
  background: var(--indigo-pale); color: var(--indigo-txt);
  font-size: 12px; font-weight: 600; padding: 3px 11px; line-height: 1.5;
}
.pg-journal .log .tag.ok { background: var(--menthe-pale); color: var(--vert-profond); }

/* --- Avant / après --------------------------------------------------------- */
.pg-journal .preuve-photo { min-height: 340px; }
.pg-journal .preuve-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-journal .preuve-photo figcaption { position: absolute; left: 16px; bottom: 16px; }
.pg-journal .preuve-txt .win-bar { align-items: center; }
.pg-journal .prix-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-bottom: var(--s-5);
}
.pg-journal .prix-av, .pg-journal .prix-ap { display: flex; flex-direction: column; gap: 5px; }
.pg-journal .prix-row .label { color: var(--gris-2); font-size: 12.5px; }
.pg-journal .prix-av b {
  font-family: var(--f-titre); font-weight: 600; font-size: var(--e-m); color: var(--gris);
}
.pg-journal .prix-ap .prix { font-size: var(--e-l); padding: 10px 20px; }
.pg-journal .prix-row .fleche { color: var(--indigo); font-size: 22px; font-weight: 600; align-self: flex-end; }
.pg-journal .term { color: var(--gris); font-size: var(--c-s); }
.pg-journal .term b { color: var(--encre); font-weight: 600; }

/* --- Autres pièces de l'inventaire ----------------------------------------- */
.pg-journal .autres .piece .photo { position: relative; height: 200px; background: var(--indigo-pale); overflow: hidden; }
.pg-journal .autres .piece .photo img.piece-photo { width: 100%; height: 100%; object-fit: cover; }
.pg-journal .autres .piece .photo .modele-cadre {
  position: absolute; inset: 14px; display: grid; place-items: center;
  height: auto; width: auto; aspect-ratio: auto;
}
.pg-journal .autres .piece .photo .modele-img { width: 100%; height: 100%; object-fit: contain; }
.pg-journal .autres .piece .tag-photo { position: absolute; left: 12px; top: 12px; }
.pg-journal .autres .piece .corps { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 9px; }
.pg-journal .piece-nom { font-family: var(--f-titre); font-weight: 600; font-size: var(--t-m); line-height: 1.15; }
.pg-journal .piece-prix { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pg-journal .piece-prix s { color: var(--gris-2); font-size: 14px; }
.pg-journal .piece-quoi { font-size: 14.5px; line-height: 1.5; color: var(--gris); }
.pg-journal .note { max-width: 78ch; }

/* --- Press start ----------------------------------------------------------- */
.pg-journal .press-bloc { padding: 40px 36px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.pg-journal .press-bloc h2 { font-size: var(--t-xxl); color: var(--corail-encre); max-width: 22ch; }
.pg-journal .press-bloc p { font-size: var(--c-l); line-height: 1.55; color: var(--corail-encre); max-width: 62ch; }
.pg-journal .press-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.pg-journal .press-actions .btn-lien { color: var(--corail-encre); text-decoration: underline; text-underline-offset: 4px; }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 720px) {
  .pg-journal .jn-page { gap: 36px; }
  .pg-journal .bio-bloc { padding: 26px 22px; }
  .pg-journal .press-bloc { padding: 28px 22px; }
  .pg-journal .preuve-photo { min-height: 260px; }
}

/* ==========================================================================
   .pg-mentions — MENTIONS LÉGALES · v4 « BENTO × MEMPHIS »
   Une colonne lisible, cartes blanches, numéros de règle en pilules.
   Les crédits photo (Wikimedia Commons / Evan-Amos) sont conservés.
   ========================================================================== */
.pg-mentions .mn-page { padding-block: 34px 56px; display: flex; flex-direction: column; gap: 40px; }
.pg-mentions .sect { padding-top: 0; }

/* --- Entête ---------------------------------------------------------------- */
.pg-mentions .intro { position: relative; padding-block: 16px 0; }
.pg-mentions .intro > .fo-formes { inset: -20px -10px 0; }
.pg-mentions .intro-in { position: relative; z-index: 1; }
.pg-mentions .intro h1 { font-size: clamp(34px, 5.6vw, 52px); margin: 4px 0 var(--s-4); }
.pg-mentions .chapo { color: var(--gris); font-size: var(--c-l); line-height: 1.6; max-width: 62ch; }

/* --- Fiche éditeur / hébergeur --------------------------------------------- */
.pg-mentions .fiche { display: grid; gap: var(--s-3); }
.pg-mentions .fiche dt {
  font-family: var(--f-corps); font-weight: 600; font-size: 13.5px; color: var(--indigo-txt);
}
.pg-mentions .fiche dd { font-size: var(--c-m); color: var(--encre); margin-bottom: var(--s-3); }
.pg-mentions .fiche dd:last-of-type { margin-bottom: 0; }
.pg-mentions .placeholder {
  display: inline-flex; align-items: center; border-radius: var(--r-p);
  background: var(--jaune-pale); color: var(--jaune-txt);
  padding: 4px 12px; font-size: 13px; font-weight: 600;
}
.pg-mentions .note { color: var(--gris-2); font-size: 13.5px; }

/* --- Contacts -------------------------------------------------------------- */
.pg-mentions .contacts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); }

/* --- Règles numérotées ----------------------------------------------------- */
.pg-mentions .log { gap: var(--s-4); }
.pg-mentions .log li { padding-left: 0; display: flex; gap: 14px; align-items: flex-start; }
.pg-mentions .log li::before { content: none; }
.pg-mentions .log .tag {
  flex: 0 0 auto; border-radius: var(--r-p);
  background: var(--indigo-pale); color: var(--indigo-txt);
  font-family: var(--f-titre); font-weight: 600; font-size: 13px;
  min-width: 38px; padding: 5px 10px; text-align: center;
}
.pg-mentions .log li > span:last-child {
  font-size: var(--c-m); line-height: 1.65; color: var(--gris); max-width: 78ch;
}
.pg-mentions .log li b { color: var(--encre); font-weight: 600; }

/* --- Textes courants -------------------------------------------------------- */
.pg-mentions .term { color: var(--gris); font-size: var(--c-s); line-height: 1.6; max-width: 78ch; }
.pg-mentions .fiche + .term { margin-top: var(--s-5); }
.pg-mentions .contacts + .term { margin-top: var(--s-4); }
.pg-mentions .term b { color: var(--encre); font-weight: 600; }
.pg-mentions .win-foot { line-height: 1.6; }
.pg-mentions .maj { color: var(--gris-2); }

@media (max-width: 620px) {
  .pg-mentions .mn-page { gap: 30px; }
  .pg-mentions .log li { gap: 10px; }
}

/* ==========================================================================
   PHOTOS DE MODELES — STRUCTURE.md §8
   Plus aucun dessin de console : toute machine est une VRAIE photo.
   `.modele-cadre` fixe le ratio exact de la photo, ce qui permet de poser
   les rectangles `screen` (en %) de data/modeles.json pile sur l'ecran.
   Aucune photo n'est pixelisee ni filtree.
   ========================================================================== */
.modele-cadre {
  position: relative;
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  line-height: 0;
}
.modele-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;                       /* JAMAIS pixelated sur une photo */
  max-width: 100%;
}

/* Legende generique (les pages qui en ont deja une gardent la leur) */
.legende {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--f-corps);
  font-size: 13.5px;
  letter-spacing: 0;
  color: var(--gris-2);
}
.legende.modele { color: var(--gris-2); }

/* --- ATELIER PC ---------------------------------------------------------- */
.pg-pc .emu-stage { position: relative; }
.pg-pc .emu-stage .modele-cadre { height: 170px; }
.pg-pc .pc-stage { display: block; padding: 0; }
.pg-pc .pc-photo { display: block; width: 100%; height: auto; }
.pg-pc .pc-etapes { margin-top: var(--s-3); }
.pg-pc .pc-etapes li.off { opacity: 0.45; }

/* L'ecran de la portable : rangees de jaquettes GENERIQUES + slider + luminosite */
/* Le calque « ecran » de la Steam Deck : cale en JS sur la boite reelle de la
   photo (forgeos.calerEcran), fond transparent — jamais un aplat opaque — et
   un simple lisere 1 px. Les jaquettes / le slider / la luminosite restent
   DANS l'ecran de la photo. */
.pg-pc .emu-ecran {
  position: absolute;
  display: block;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--grid);
  overflow: hidden;
  pointer-events: none;
}
.pg-pc .emu-rows {
  position: absolute;
  left: 6%; right: 6%; top: 18%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pg-pc .emu-row { display: flex; gap: 4px; }
.pg-pc .jaq {
  display: block;
  flex: 1 1 0;
  height: 14px;
  background: var(--indigo);
}
.pg-pc .jaq.alt { background: var(--rose); }
.pg-pc .emu-lum {
  position: absolute;
  right: 5%; top: 6%;
  display: flex;
  gap: 3px;
}
.pg-pc .emu-lum i { display: block; width: 5px; height: 5px; background: var(--jaune); }
.pg-pc .emu-slider {
  position: absolute;
  left: 6%; right: 6%; bottom: 8%;
  height: 4px;
  background: var(--grid);
}
.pg-pc .emu-slider i { display: block; height: 100%; background: var(--jaune); }

/* --- JOURNAL ------------------------------------------------------------- */
.pg-journal .piece-art { display: flex; align-items: center; justify-content: center; }
.pg-journal .piece-art .modele-cadre { height: 120px; }
.pg-journal .piece-art .piece-photo { display: block; width: 100%; height: 120px; object-fit: cover; }

/* --- Adaptations etroites ------------------------------------------------ */
@media (max-width: 880px) {
  .pg-pc .emu-stage .modele-cadre { height: 140px; }
}
@media (max-width: 560px) {
  /* la hauteur fixe est remplacée par une largeur pilotée : plus de débordement */
  .pg-pc .emu-stage .modele-cadre { height: auto; width: 100%; max-width: 100%; }
  .pg-pc .emu-stage .modele-img { width: 100%; height: auto; }
}
@media (max-width: 560px) {
  .pg-journal .piece-art .modele-cadre { height: 96px; }
  .pg-journal .piece-art .piece-photo { height: 96px; }
}
/* Note : le seul `image-rendering: pixelated` du site est celui du mode DMG
   (tokens.css, `html.dmg`) — un choix explicite du visiteur, pas un style de photo. */


/* ==========================================================================
   QA v4 (16/09) — l'ancienne « couche v3 » qui vivait ici a été SUPPRIMÉE.
   Elle repeignait journal / accueil / atelier-pc avec les tokens v1-v2
   (--cacao, --cerise, --bois-txt, --menthe-f, --soleil, --creme, --f-ecran)
   et ciblait pour l'essentiel des classes mortes (.vo-*, .machine-*, #ouvrir,
   .prog-head). La seule règle encore active cassait l'AA du journal :
   `.pg-journal .prix-ap b { color: var(--menthe-f) }` posait un texte vert
   foncé sur la pastille prix → contraste 1,64. Les blocs v4
   (.bento, .prix, .chip) fournissent désormais les bonnes couleurs seuls.
   ========================================================================== */

/* ==========================================================================
   .pg-actu — ACTU & GUIDES (DA v4 « Bento × Memphis », docs/DA-SPEC.md §12)
   Bloc ajouté en fin de fichier — ne touche à aucun autre bloc de page.
   Réf : docs/SEO-ACTU.md §2/§5 · js/actu.js · actu.html
   ========================================================================== */
.pg-actu .ac-page { padding-block: 40px 56px; display: flex; flex-direction: column; gap: 46px; }
.pg-actu .sect { padding-top: 0; }

/* --- entête ------------------------------------------------------------- */
.pg-actu .ac-tete { position: relative; }
.pg-actu .ac-tete > .fo-formes { inset: -40px 0 -20px; overflow: hidden; }
.pg-actu .ac-tete > .bento-grid { position: relative; z-index: 1; }
.pg-actu .ac-hero {
  padding: 44px 40px 46px; color: #fff;
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
}
.pg-actu .ac-hero h1 { font-size: var(--t-xxl); color: #fff; margin: 0; }
.pg-actu .ac-hero-p { max-width: 54ch; font-size: 17px; line-height: 1.55; color: var(--indigo-sur); margin: 0; }
.pg-actu .ac-compteur {
  padding: 34px 30px; display: flex; flex-direction: column; justify-content: center; gap: 4px;
  color: var(--jaune-encre);
}
.pg-actu .ac-c-n { font-family: var(--f-titre); font-weight: 700; font-size: 58px; line-height: 1; margin: 0; }
.pg-actu .ac-c-l { margin: 0; font-size: 15px; font-weight: 600; }
.pg-actu .ac-c-maj { margin: 10px 0 0; font-size: 13.5px; opacity: .8; }

/* --- segments (pilules) -------------------------------------------------- */
/* P8 — une seule rangée, un seul style d'état actif (pilule noire). */
.pg-actu .ac-segs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 24px;
}
.pg-actu .ac-seg,
.pg-actu .ac-plat { min-height: 44px; }
.pg-actu .ac-seg { background: var(--blanc); color: var(--encre); border: 1.5px solid var(--bord-champ); }
.pg-actu .ac-seg.is-on { background: var(--noir); color: #fff; border-color: var(--noir); }
.pg-actu .ac-seg-sep { color: var(--gris-2); font-size: 18px; padding: 0 2px; user-select: none; }
.pg-actu .ac-plat.is-on { background: var(--indigo-pale); color: var(--indigo-txt); border-color: var(--indigo-clair); }
.pg-actu .ac-plats { display: flex; flex-wrap: wrap; gap: 10px; }

/* --- cartes -------------------------------------------------------------- */
/* C4 — la carte EST le lien vers la page de l'article : un seul élément
   cliquable, donc une seule cible au clavier comme à la souris. */
.pg-actu .ac-carte { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.pg-actu .ac-carte:hover { color: inherit; }
.pg-actu .ac-carte:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; }
.pg-actu .ac-lire { color: var(--indigo); font-weight: 600; }
.pg-actu .ac-carte:hover .ac-lire { text-decoration: underline; text-underline-offset: 3px; }
.pg-actu .ac-vis { position: relative; aspect-ratio: 2 / 1; background: var(--indigo-pale); overflow: hidden; }
.pg-actu .ac-vis img,
.pg-actu .ac-svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-actu .ac-pastille { position: absolute; left: 14px; top: 14px; }
.pg-actu .ac-type { position: absolute; right: 14px; top: 14px; background: var(--blanc); color: var(--encre); }
.pg-actu .ac-carte .corps {
  padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; flex: 1 1 auto;
}
.pg-actu .ac-carte h3 { margin: 0; font-size: 21px; line-height: 1.2; }
.pg-actu .ac-chapo {
  margin: 0; font-size: 15px; line-height: 1.5; color: var(--gris);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pg-actu .ac-meta { margin: 0; font-size: 13.5px; color: var(--gris-2); }
/* QA v4 : --indigo-clair sur blanc = 1,49. Séparateur décoratif → --gris-2 (7,30). */
.pg-actu .ac-sep { color: var(--gris-2); }
.pg-actu .ac-vide { color: var(--gris); font-size: 16px; }

/* ==========================================================================
   C4 (docs/CHANTIERS-UX.md · P12 / D6) — PAGE D'ARTICLE GÉNÉRÉE (.pg-article)
   La modale de lecture de actu.html a été supprimée : l'article se lit sur sa
   page canonique (actu/<slug>, guides/<slug>), rendue par scripts/build-seo.mjs.
   Ce qui suit habille ce que cette page a gagné : la barre de retour, le
   sommaire et le bouton de partage. Le reste du gabarit vit dans css/seo.css.
   ========================================================================== */
.pg-article .ar-barre {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 18px;
}
.pg-article .ar-retour {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 4px;
  font-family: var(--f-corps); font-size: 15px; font-weight: 600;
  color: var(--indigo); text-decoration: none;
}
.pg-article .ar-retour:hover { text-decoration: underline; text-underline-offset: 4px; }
.pg-article .ar-retour:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: var(--r-0); }
.pg-article .ar-partage { min-height: 44px; font-size: 14.5px; }

.pg-article .ar-sommaire {
  margin: 0 0 28px; padding: 18px 22px 20px;
  background: var(--indigo-pale); border-radius: var(--r-2);
}
.pg-article .ar-sommaire-t {
  margin: 0 0 10px; font-family: var(--f-titre); font-weight: 600;
  font-size: 17px; color: var(--indigo-txt);
}
.pg-article .ar-sommaire ol { margin: 0; padding-left: 20px; }
.pg-article .ar-sommaire li { margin-bottom: 6px; font-size: 15.5px; line-height: 1.5; }
.pg-article .ar-sommaire a { color: var(--indigo-txt); text-decoration: underline; text-underline-offset: 3px; }
.pg-article .ar-sommaire a:hover { color: var(--indigo); }

/* La photo d'en-tête porte un `view-transition-name` : elle doit avoir sa
   propre pile d'affichage, sinon le navigateur refuse de l'isoler. */
.pg-article .rv-entete-img { position: relative; }

@media (max-width: 720px) {
  .pg-article .ar-barre { margin-bottom: 14px; }
  .pg-article .ar-sommaire { padding: 16px 18px 18px; margin-bottom: 22px; }
}

/* --- mobile -------------------------------------------------------------- */
@media (max-width: 720px) {
  .pg-actu .ac-page { gap: 34px; padding-block: 28px 44px; }
  .pg-actu .ac-hero { padding: 32px 24px 34px; }
  .pg-actu .ac-hero h1 { font-size: var(--t-xl); }
  .pg-actu .ac-compteur { padding: 26px 24px; }
  .pg-actu .ac-c-n { font-size: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-actu .ac-carte { transition: none; }
}

/* --- tuile ACTU sur l'accueil (index.html #cta-actu) ---------------------- */
.pg-home .actu-bloc {
  padding: 40px 38px 42px; color: var(--jaune-encre);
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.pg-home .actu-bloc h2 { margin: 0; font-size: var(--t-xxl); color: var(--jaune-encre); }
.pg-home .actu-bloc p { margin: 0; max-width: 58ch; font-size: 16.5px; line-height: 1.55; color: var(--jaune-encre); }
.pg-home .actu-bloc:hover { color: var(--jaune-encre); }
.pg-home .actu-tuile {
  padding: 32px 28px 34px; color: var(--indigo-txt);
  display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: flex-start;
}
.pg-home .actu-tuile h3 { margin: 0; font-size: var(--t-m); color: var(--indigo-txt); }
.pg-home .actu-tuile p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--indigo-txt); opacity: .9; }
.pg-home .actu-tuile:hover { color: var(--indigo-txt); }
@media (max-width: 720px) {
  .pg-home .actu-bloc { padding: 30px 24px 32px; }
  .pg-home .actu-bloc h2 { font-size: var(--t-xl); }
  .pg-home .actu-tuile { padding: 26px 22px 28px; }
}