/* ============================================================================
 * LOOK 2026 DE PHONEDROID.PRO — boutique 6 uniquement            29/09/2026
 * ============================================================================
 * Chargee par templates/_partials/stylesheets.tpl SEULEMENT quand
 * $shop.id == 6, apres le CSS combine. Le .fr et le .net ne la voient jamais.
 * Demande de Nico : refondre le look du .pro et le rapprocher du .fr.
 *
 * ⚠️ A CHAQUE RETOUCHE : incrementer ?v= dans stylesheets.tpl. Cloudflare
 *    garde un CSS 7 jours ; sans nouveau numero, personne ne voit la retouche.
 *
 * LA PALETTE — relevee dans le SCSS du .fr (_phonedroid.scss), pas inventee
 *    --pdp-ink      #082e3c  titres (le « $pd-ink » du .fr)
 *    --pdp-night    #001f2b  panneau sombre (fond du panneau d accueil du .fr)
 *    --pdp-teal     #5f90a2  traits, accents
 *    --pdp-teal-dk  #355d6c  texte courant
 *    --pdp-pale     #b5dce4  texte clair sur fond sombre
 *    --pdp-mist     #daeaf0  pastilles
 *    --pdp-tint     #f0f5f7  sections alternees (la colonne « Accessoires » du .fr)
 * ========================================================================== */

:root {
  --pdp-ink: #082e3c;
  --pdp-night: #001f2b;
  --pdp-teal: #5f90a2;
  --pdp-teal-dk: #355d6c;
  --pdp-pale: #b5dce4;
  --pdp-mist: #daeaf0;
  --pdp-tint: #f0f5f7;
  --pdp-head-font: Montserrat, sans-serif;
  /* 29/09, remarque de Nico : le .fr n a NI coins arrondis NI ombres sur ses
     blocs. Angles droits partout (les boutons gardent un leger arrondi). */
  --pdp-radius: 0;
}

/* Un peu plus large sur grand ecran : le conteneur de Bootstrap plafonne a
   1140 px, et les marges laterales dominaient la page (remarque de Nico). */
@media (min-width: 1400px) {
  .pdp-section > .container,
  .pdp-pricing > .container { max-width: 1320px; }
}

/* ─── Menu ───────────────────────────────────────────────────────────────── */
/* 29/09 apres-midi : l en-tete du .pro est desormais celui du .fr (bouton
   « Categories de produit », menu a gauche, bandeau du haut) — tout se fait
   dans header.tpl et ps_mainmenu.tpl, avec les styles du .fr. L ancienne
   entree « PRO », qui etait rouge puis bleu pale ici, n existe plus dans la
   barre : ses quatre familles sont passees dans le deroulant. */

/* Le menu du .pro a des intitules plus longs que celui du .fr (« Notre valeur
   ajoutee », « Contactez-nous »). Mesure du 29/09 a 1280 px : il ne tenait
   plus sur une ligne, et chaque intitule se coupait en deux. Intitules
   insecables partout ; espacements resserres de 18 a 12 px sous 1400 px — a
   1200 px (premier palier du menu d ordinateur) le panier tient alors a 14 px
   du bord. */
.pd-nav .pd-nav__links-item > a,
.pd-nav .pd-nav__categories-toggle { white-space: nowrap; }
@media (max-width: 1399.98px) {
  .pd-nav .pd-nav__links > .pd-nav__links-item > a { padding-left: 12px; padding-right: 12px; }
}

/* Barre de menu : liseret et centrage (Nico, 29/09 : « une sorte de liseret
   blanc assez volumineux […] le texte n est pas centre verticalement »).
   Mesure a 1440 et 1920 px : 1. la bande du logo finissait par une bordure
   #dee2e6 (gris Bootstrap), presque blanche sur le bleu nuit, quand les autres
   separations de l en-tete sont a 8 % de blanc ; 2. la barre avait 6 px de
   marge en haut et 0 en bas, et des liens de 40 px (50 sur le .fr) : le texte
   tombait 3 px trop bas et les traits verticaux ne touchaient pas le haut.
   Liens portes a 50 px comme sur le .fr, marge du haut retiree : texte centre,
   traits verticaux d un bord a l autre. */
.header-bottom { border-bottom-color: rgba(255, 255, 255, .08); }
.header-nav-full-width__container { padding-top: 0; }
.pd-nav .pd-nav__links-item > a,
.pd-nav .pd-nav__categories-toggle { min-height: 50px; }

/* ─── Sections et en-tetes ───────────────────────────────────────────────── */

/* Pleine largeur, meme formule auto-correctrice que les blocs du .fr : si
   l element occupe deja toute la largeur, les marges tombent a zero. */
.pdp-hero,
.pdp-section,
.pdp-pricing {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ⚠️ « 100vw » COMPTE LA BARRE DE DEFILEMENT VERTICALE : les blocs pleine
   largeur depassaient de ~8 px et faisaient naitre une barre HORIZONTALE
   (mesure du 29/09 : scrollWidth 2553 pour 2545 visibles). `clip` coupe ce
   depassement sans creer de conteneur de defilement — `hidden` casserait
   l en-tete collant. Le carrousel de marques garde son propre cadre. */
.page-content--home { overflow-x: clip; }

/* La page d accueil du theme est une GRILLE espacee de 40 px (#content,
   gap: 40px). Sur le .fr les blocs sont separes par du blanc, c est voulu ;
   ici chaque section porte son propre fond pleine largeur, et l ecart
   apparaissait comme une bande blanche entre deux sections colorees. */
.page-content--home { gap: 0; }

.pdp-section { padding: 80px 0; background: #fff; }
.pdp-section--tint { background: var(--pdp-tint); }

.pdp-head { margin: 0 0 40px; max-width: 46rem; }
.pdp-head .pd-eyebrow { color: var(--pdp-teal); }

.pdp-head__title {
  margin: 0;
  font-family: var(--pdp-head-font);
  font-size: 34px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--pdp-ink);
  text-wrap: balance;
}
.pdp-head__title strong { font-weight: 700; }

/* ─── 1. Bloc d ouverture ────────────────────────────────────────────────── */

.pdp-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 32rem;
  padding: 90px 0;
  background-color: var(--pdp-night);
  background-size: cover;
  background-position: center;
  color: #fff;
}
/* Voile : lisibilite du texte a gauche, la photo respire a droite. */
.pdp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 31, 43, .92) 0%, rgba(0, 31, 43, .70) 45%, rgba(0, 31, 43, .15) 100%);
}
.pdp-hero > .container { position: relative; }

.pdp-hero__eyebrow { color: #9ebcc7; }
.pdp-hero .pd-eyebrow::before { background: #f1f1f1; }

.pdp-hero__title {
  margin: 0 0 20px;
  max-width: 36rem;
  font-family: var(--pdp-head-font);
  font-size: 48px;
  line-height: 1.12;
  font-weight: 500;
  color: #9ebcc7;
}
.pdp-hero__title strong { font-weight: 700; color: var(--pdp-mist); }

.pdp-hero__lead {
  margin: 0;
  max-width: 32rem;
  font-size: 16px;
  line-height: 1.6;
  color: #79a4b4;
}

/* ─── 2. Six arguments ───────────────────────────────────────────────────── */

.pdp-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.pdp-value {
  display: flex;
  flex-direction: column;
  padding: 28px 28px 30px;
  /* Aplat clair sur fond blanc, comme la colonne « Accessoires » du .fr. */
  background: var(--pdp-tint);
  border-radius: var(--pdp-radius);
}

.pdp-value__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 0 20px;
  border-radius: 50%;
  /* Blanc : la pastille doit ressortir sur l aplat #f0f5f7. */
  background: #fff;
  color: var(--pdp-ink);
  font-size: 24px;
}

.pdp-value__title {
  margin: 0 0 10px;
  font-family: var(--pdp-head-font);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--pdp-ink);
}

.pdp-value__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--pdp-teal-dk);
}

/* ─── 3. Quatre familles ─────────────────────────────────────────────────── */

.pdp-families {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.pdp-family {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--pdp-radius);
  background: var(--pdp-tint);
  color: inherit;
  text-decoration: none;
  transition: background-color .2s ease;
}
/* Survol sans ombre (le .fr n en a pas) : la tuile fonce legerement. */
.pdp-family:hover,
.pdp-family:focus-visible {
  background: var(--pdp-mist);
  text-decoration: none;
  color: inherit;
}
.pdp-family:focus-visible { outline: 2px solid var(--pdp-teal); outline-offset: 3px; }

.pdp-family__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  padding: 24px 24px 0;
}
/* Les photos du catalogue sont sur fond BLANC : « multiply » fond ce blanc
   dans la teinte de la tuile, sans retoucher une seule image. */
.pdp-family__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.pdp-family__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 24px 24px;
}

.pdp-family__title {
  margin: 0 0 8px;
  font-family: var(--pdp-head-font);
  font-size: 20px;
  font-weight: 700;
  color: var(--pdp-ink);
}

.pdp-family__text {
  flex: 1;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--pdp-teal-dk);
}

.pdp-family__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--pdp-ink);
}
.pdp-family__cta::after {
  content: "→";
  transition: transform .2s ease;
}
.pdp-family:hover .pdp-family__cta::after { transform: translateX(4px); }

/* ─── 4. Grille des prix : panneau sombre ────────────────────────────────── */

/* Bleu nuit du bandeau du haut et du pied de page (29/09, remarque de Nico).
   Le #355d6c d abord choisi est celui du panneau « Innovation » du .fr, qui
   n y couvre qu une moitie a cote d une photo : seul et en pleine largeur, il
   paraissait delave. */
.pdp-pricing {
  padding: 70px 0;
  background: var(--pdp-ink);
  color: var(--pdp-pale);
}

.pdp-pricing__inner {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 48px;
  align-items: center;
}

.pdp-pricing__eyebrow { color: #9ebcc7; }
.pdp-pricing .pd-eyebrow::before { background: #f1f1f1; }

.pdp-pricing__title {
  margin: 0 0 16px;
  font-family: var(--pdp-head-font);
  font-size: 34px;
  line-height: 1.2;
  font-weight: 500;
  color: #fff;
  text-wrap: balance;
}
.pdp-pricing__title strong { font-weight: 700; }

.pdp-pricing__lead { margin: 0 0 28px; font-size: 16px; line-height: 1.6; color: var(--pdp-pale); }

.pdp-pricing__facts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.pdp-pricing__facts li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--pdp-radius);
  background: rgba(255, 255, 255, .07);
  font-family: var(--pdp-head-font);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
}
.pdp-pricing__facts .material-icons { font-size: 22px; color: var(--pdp-pale); }

/* ─── Boutons ────────────────────────────────────────────────────────────── */
/* Les anciens boutons du .pro : fond #5f90a2 et texte fonce, contraste faible.
   Ceux-ci reprennent le bleu nuit du .fr, texte blanc. */

.pdp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border: 0;
  border-radius: 6px;
  background: var(--pdp-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}
.pdp-btn::after { content: "→"; transition: transform .2s ease; }
.pdp-btn:hover,
.pdp-btn:focus-visible { background: var(--pdp-night); color: #fff; text-decoration: none; }
.pdp-btn:hover::after { transform: translateX(4px); }
.pdp-btn:focus-visible { outline: 2px solid var(--pdp-teal); outline-offset: 3px; }

.pdp-btn--light { background: #fff; color: var(--pdp-ink); }
.pdp-btn--light:hover,
.pdp-btn--light:focus-visible { background: var(--pdp-mist); color: var(--pdp-ink); }

/* ─── 5. Marques et bureaux ──────────────────────────────────────────────── */

.pdp-split { row-gap: 48px; align-items: stretch; }

.pdp-office {
  height: 100%;
  padding: 36px;
  border-radius: var(--pdp-radius);
  background: var(--pdp-tint);
}
.pdp-office .pd-eyebrow { color: var(--pdp-teal); }
.pdp-office .pdp-head__title { margin-bottom: 18px; font-size: 28px; }

.pdp-office__intro { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--pdp-teal-dk); }

.pdp-office__address {
  display: flex;
  gap: 10px;
  margin: 0 0 26px;
  font-style: normal;
  font-size: 15px;
  line-height: 1.5;
  color: var(--pdp-ink);
}
.pdp-office__address .material-icons { color: var(--pdp-teal); font-size: 22px; }

/* ─── Pied de page : bandeau de reassurance du .pro ──────────────────────── */
/* Le .fr y met des JPG de 110 px (.pd-reassurance__item img) ; le .pro des
   SVG (voir _partials/pro/footer-reassurance-pro.tpl), qu il faut dimensionner
   pareil pour que rien ne bouge d une boutique a l autre. */
.pd-reassurance--pro svg {
  display: inline-block;
  width: 110px;
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

/* ─── Pages categorie : conditions professionnelles ──────────────────────── */
/* Remplace le cadre orange (29/09). Meme vocabulaire que l accueil : aplat
   #f0f5f7, angles droits, pastille blanche pour le pictogramme. */
.pdp-cond {
  margin: 0 0 24px;
  padding: 18px 22px;
  background: var(--pdp-tint);
  border-radius: var(--pdp-radius);
}
.pdp-cond__list {
  display: grid;
  /* Chaque case prend la largeur de son texte, l ecart se repartit entre
     elles : en parts egales, « 5 pieces minimum » se coupait a 1280 px. */
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  gap: 16px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pdp-cond__item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pdp-cond__icon {
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: var(--pdp-ink);
  font-size: 20px;
}
.pdp-cond__text { font-size: 13px; line-height: 1.4; color: var(--pdp-teal-dk); }
.pdp-cond__text strong {
  display: block;
  font-family: var(--pdp-head-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--pdp-ink);
  white-space: nowrap;
}
.pdp-cond__text a { color: var(--pdp-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.pdp-cond__text a:hover,
.pdp-cond__text a:focus-visible { color: var(--pdp-teal); }

@media (max-width: 1199.98px) {
  .pdp-cond__list { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
}
@media (max-width: 575.98px) {
  .pdp-cond { padding: 16px; }
  .pdp-cond__list { grid-template-columns: 1fr; gap: 14px; }
}

/* ─── Mouvement ──────────────────────────────────────────────────────────── */

/* ─── Pages categorie : lignes produit ───────────────────────────────────── */
/* Gabarit : catalog/_partials/miniatures/product-pro.tpl (29/09). Le theme
   compile pose encore `display: table` et des largeurs de cellules sur
   .pdpro-row : on repasse en grille, les anciennes cellules n existent plus. */
.pdpro-row {
  display: block;
  padding: 14px 16px;
  border-bottom: 1px solid #e8ebed;
  transition: background-color .15s ease;
}
.pdpro-row:hover { background: var(--pdp-tint); }

.pdpro-row__tete {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}
.pdpro-row__media {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #fff;
  cursor: zoom-in;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
}
.pdpro-row__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* le fond blanc des photos se fond dans la teinte du survol */
  mix-blend-mode: multiply;
}

.pdpro-row__id { min-width: 0; }
.pdpro-row__brand {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pdp-teal);
}
.pdpro-row__name {
  margin: 0;
  font-family: var(--pdp-head-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--pdp-ink);
}

.pdpro-row__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--pdp-ink);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--pdp-ink);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.pdpro-row__cta .material-icons { font-size: 16px; }
.pdpro-row__cta:hover,
.pdpro-row__cta:focus-visible { background: var(--pdp-ink); color: #fff; text-decoration: none; }
.pdpro-row__cta:focus-visible { outline: 2px solid var(--pdp-teal); outline-offset: 2px; }

/* Header du .pro : le bouton « Catégories de produit » devient un lien « Catalogue »
   (ps_mainmenu.tpl, 29/09). Même allure, une icône grille à la place du burger. */
.pd-nav__categories--lien .pd-nav__categories-toggle { text-decoration: none; }
.pd-nav__categories--lien .pd-nav__categories-toggle:hover { text-decoration: none; opacity: .85; }
.pd-nav__catalogue-icone { font-size: 20px; margin-right: 8px; vertical-align: -5px; }

/* ─── Catalogue du .pro (29/09, Claude Maison, les 8 points de Nico) ─────────
   Gabarits : miniatures/product-pro.tpl (thème) + ligne-*.tpl (module
   phonedroidpro). Charte du .fr : boutons en pilule bleu nuit (#082E3C, la
   couleur du header), texte blanc, Inter 600 13 px — mais COMPACTS (34 px). */
.pdpro-row__loupe {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--pdp-ink);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  opacity: 0;
  transition: opacity .15s ease;
}
.pdpro-row__media:hover .pdpro-row__loupe,
.pdpro-row__media:focus-visible .pdpro-row__loupe { opacity: 1; }
.pdpro-row__media:focus-visible { outline: 2px solid var(--pdp-teal); outline-offset: 2px; }

/* Pro connecté : le produit à GAUCHE, ses variantes juste À CÔTÉ (Nico, 2e essai :
   « il y a vraiment beaucoup de vide » — chaque variante s'étalait sur toute la
   largeur, nom à un bout, prix à l'autre). Bloc des variantes plafonné : les
   colonnes restent serrées même sur un très grand écran. */
.pdpro-row:has(.pdc-variantes) {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  padding: 12px 16px;
}
.pdpro-row:has(.pdc-variantes) .pdpro-row__tete { grid-template-columns: 56px minmax(0, 1fr); }
.pdc-variantes {
  display: grid;
  gap: 6px;
  margin: 0;
}
/* Nico, 3e essai : « tu as juste déplacé le vide » — plafonner le bloc des variantes
   repoussait le vide à droite. Le remède : la ZONE CATALOGUE entière (conditions,
   filtres, tri, lignes) garde une largeur de lecture et se centre ; les variantes
   remplissent la ligne. body:has(.pdpro-row) = pages de liste du .pro seulement. */
body:has(.pdpro-row) :is(.pdp-cond, .pdc-filtres, .products__selection, #js-product-list) {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}
.pdc-var {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 118px 92px 112px auto;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 5px 6px 5px 14px;
  border-radius: 10px;
  background: var(--pdp-tint);
}
.pdpro-row:hover .pdc-var { background: #fff; }
.pdc-var__nom { font-size: 14px; color: var(--pdp-ink); min-width: 0; }
.pdc-var__prix {
  font-family: var(--pdp-head-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--pdp-ink);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pdc-var__prix small { margin-left: 4px; font-family: Inter, sans-serif; font-size: 11px; font-weight: 600; color: #6b7780; }
.pdc-var__stock { font-size: 12px; font-weight: 600; color: #1e7a3c; white-space: nowrap; }

.pdc-qte {
  display: inline-flex;
  align-items: center;
  height: 34px;
  border: 1px solid #c9d3d8;
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}
.pdc-qte__pas {
  width: 32px;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--pdp-ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.pdc-qte__pas:hover { background: var(--pdp-tint); }
.pdc-qte__champ {
  width: 44px;
  height: 100%;
  border: 0;
  padding: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--pdp-ink);
  background: transparent;
  -moz-appearance: textfield;
  appearance: textfield;
  font-variant-numeric: tabular-nums;
}
.pdc-qte__champ::-webkit-outer-spin-button,
.pdc-qte__champ::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pdc-var__ajouter {
  height: 34px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--pdp-ink);
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease;
}
.pdc-var__ajouter:hover { background: var(--pdp-teal-dk); }
.pdc-var__ajouter:focus-visible,
.pdc-qte__pas:focus-visible,
.pdc-qte__champ:focus-visible { outline: 2px solid var(--pdp-teal); outline-offset: 2px; }
.pdc-var__ajouter:disabled { background: #9fb3bb; cursor: wait; }

/* Les filtres Catégorie / Marque (construits par views/js/catalogue.js du module) */
.pdc-filtres {
  display: grid;
  gap: 10px;
  margin: 20px 0 8px;
  padding: 14px 16px;
  border: 1px solid #e3e9ec;
  border-radius: 12px;
}
.pdc-filtres[hidden] { display: none; }
.pdc-filtres__groupe { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pdc-filtres__titre {
  min-width: 84px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pdp-teal);
}
.pdc-filtres__puces { display: flex; flex-wrap: wrap; gap: 6px; }
.pdc-puce {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #c9d3d8;
  border-radius: 999px;
  background: #fff;
  color: var(--pdp-ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.pdc-puce:hover { border-color: var(--pdp-ink); }
.pdc-puce__n { font-size: 12px; color: #6b7780; font-variant-numeric: tabular-nums; }
.pdc-puce.is-actif { background: var(--pdp-ink); border-color: var(--pdp-ink); color: #fff; }
.pdc-puce.is-actif .pdc-puce__n { color: var(--pdp-pale); }
.pdc-puce.is-vide { color: #9aa7ad; border-color: #e3e9ec; cursor: default; }
.pdc-puce:focus-visible { outline: 2px solid var(--pdp-teal); outline-offset: 2px; }
.pdc-filtres__total { margin: 2px 0 0; font-size: 13px; color: #6b7780; }
.pdc-vide { margin: 24px 0; text-align: center; color: #6b7780; }

/* Le zoom de la photo */
.pdc-zoom {
  width: min(92vw, 880px);
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.pdc-zoom::backdrop { background: rgba(0, 31, 43, .72); }
.pdc-zoom__img { display: block; width: 100%; max-height: 88vh; object-fit: contain; cursor: zoom-out; }
.pdc-zoom__fermer {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--pdp-ink);
  color: #fff;
  font-size: 22px;
  line-height: 36px;
  cursor: pointer;
}

@media (max-width: 991.98px) {
  .pdpro-row:has(.pdc-variantes) { display: block; }
  .pdc-variantes { max-width: none; margin: 10px 0 0 72px; }
  .pdc-var { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 8px; }
  .pdc-var__nom { grid-column: 1 / -1; font-weight: 600; }
  .pdc-var__prix { text-align: left; }
}
@media (max-width: 575.98px) {
  .pdpro-row__tete { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; }
  .pdc-variantes { margin-left: 0; }
  .pdc-var { grid-template-columns: 1fr auto; padding: 8px 10px; }
  .pdc-var__stock { text-align: right; }
  .pdc-filtres { padding: 12px; }
  .pdc-filtres__titre { min-width: 0; width: 100%; }
}

@media (max-width: 575.98px) {
  .pdpro-row { padding: 10px 4px; }
  .pdpro-row__media { width: 44px; height: 44px; }
  .pdpro-row__name { font-size: 14px; }
  .pdpro-row__cta { padding: 7px 10px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .pdp-family,
  .pdp-family__cta::after,
  .pdp-btn,
  .pdp-btn::after,
  .pdpro-row,
  .pdpro-row__cta { transition: none; }
}

/* ─── Tablette et mobile ─────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
  .pdp-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdp-families { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdp-pricing__inner { grid-template-columns: 1fr; gap: 32px; }
  .pdp-hero__title { font-size: 40px; }
}

@media (max-width: 575.98px) {
  .pdp-section { padding: 52px 0; }
  .pdp-head { margin-bottom: 28px; }
  .pdp-head__title,
  .pdp-pricing__title { font-size: 26px; }
  .pdp-hero { min-height: 0; padding: 64px 0; }
  .pdp-hero__title { font-size: 32px; }
  .pdp-values { grid-template-columns: 1fr; gap: 16px; }
  .pdp-value { padding: 22px; }
  .pdp-families { grid-template-columns: 1fr; gap: 16px; }
  .pdp-family__media { height: 170px; }
  .pdp-pricing { padding: 52px 0; }
  .pdp-office { padding: 26px 22px; }
}

/* ─── Inscription des professionnels (module phonedroidpro, 29/09) ───────── */
/* Bouton de l en-tete : « il n y a pas de bouton d inscription, seulement se
   connecter […] c est trompeur » (Nico). Angles droits, pas d ombre (regle du .fr). */
.pd-pro-compte { margin-left: 12px; }
/* 29/09 soir : le bleu ciel plein « dénature le design » (Nico, via Maison 2). Bouton en
   CONTOUR, transparent, texte blanc, en pilule — dans l'esprit du sélecteur FR · EN voisin. */
.pd-pro-compte__bouton {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 16px; background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px;
  font-family: var(--pdp-head-font); font-weight: 600; font-size: .85rem;
  text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
.pd-pro-compte__bouton:hover, .pd-pro-compte__bouton:focus-visible { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; text-decoration: none; }
.pd-pro-compte__bouton:focus-visible { outline: 2px solid var(--pdp-pale); outline-offset: 2px; }
.pd-pro-compte__bouton .material-icons { font-size: 18px; }
.ps-customersignin { display: flex; align-items: center; }

/* Haut du formulaire, et page « demande recue ». */
.pd-pro-inscription-intro { background: var(--pdp-tint); padding: 18px 22px; margin: 0 0 28px; }
.pd-pro-inscription-intro__titre { font-family: var(--pdp-head-font); font-weight: 700; color: var(--pdp-ink); margin: 0 0 6px; font-size: 1.05rem; }
.pd-pro-inscription-intro__texte { margin: 0; color: var(--pdp-teal-dk); }
#customer-form input[type="file"].form-control { padding: 8px; }
.pd-pro-merci { max-width: 40rem; padding: 12px 0 28px; }
.pd-pro-merci__icone { font-size: 48px; color: var(--pdp-teal); }
.pd-pro-merci__texte { font-size: 1.05rem; color: var(--pdp-ink); }
.pd-pro-merci__contact { color: var(--pdp-teal-dk); }

@media (max-width: 767.98px) {
  .pd-pro-compte { margin-left: 6px; }
  .pd-pro-compte__bouton { padding: 6px 10px; font-size: .78rem; }
}
/* Telephone : le libelle ne tient pas a cote du logo, de la recherche et du compte
   (verifie a 375 px) — l icone seule, le libelle reste lu par les lecteurs d ecran. */
@media (max-width: 575.98px) {
  .pd-pro-compte__bouton { padding: 6px 8px; }
  .pd-pro-compte__bouton span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ─── Accueil : CINQ arguments (29/09, Claude Maison) ─────────────────────
   La carte « Paiement à 30 ou 60 jours » est retirée (Nico : « ne parle plus de
   paiement »). Avec 5 cartes sur 3 colonnes, la 2e rangée laissait un trou à
   droite : grille de 6 pistes, chaque carte en couvre 2, et les deux dernières
   se CENTRENT. Reste juste avec 6 cartes (règle inactive). */
.pdp-values { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pdp-value { grid-column: span 2; }
.pdp-value:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
/* 29/09, plus tard : la carte « Une équipe en Chine » est retirée aussi (Nico) → QUATRE
   cartes. En ordinateur, 2 × 2 (chacune sur 3 pistes) plutôt que 3 + 1. */
@media (min-width: 992px) {
  .pdp-value:first-child:nth-last-child(4),
  .pdp-value:first-child:nth-last-child(4) ~ .pdp-value { grid-column: span 3; }
}
@media (max-width: 991.98px) {
  .pdp-values { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pdp-value:nth-child(4):nth-last-child(2) { grid-column: span 2; }
  .pdp-value:nth-child(5):last-child { grid-column: 2 / span 2; }
}
@media (max-width: 575.98px) {
  .pdp-values { grid-template-columns: 1fr; }
  .pdp-value,
  .pdp-value:nth-child(4):nth-last-child(2),
  .pdp-value:nth-child(5):last-child { grid-column: auto; }
}

/* ─── Accueil : familles masquées si vides (29/09, Claude Maison) ─────────
   Une famille sans produit disponible disparaît (home-pro.tpl) : en ordinateur,
   les cartes restantes se partagent la largeur au lieu de laisser un trou. */
@media (min-width: 992px) {
  .pdp-families { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .pdp-families:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ─── Barre du haut : sélecteur de langue FR · EN (29/09, Claude Maison) ──── */
.pd-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pd-topbar__langues { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.pd-topbar__langues a {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: inherit;
  text-decoration: none;
  opacity: .7;
}
.pd-topbar__langues a:hover { opacity: 1; }
.pd-topbar__langues a[aria-current] { opacity: 1; background: rgba(255, 255, 255, .14); }
.pd-topbar__langues a:focus-visible { outline: 2px solid var(--pdp-pale); outline-offset: 2px; }

/* Tunnel de commande du .pro : le logo du moyen de paiement (Virement bancaire)
   était calé en haut, le texte « Payer par virement bancaire » plus bas, et le
   bouton radio encore ailleurs (Nico, 30/09 : « le logo virement n est pas bien
   aligné avec le texte »). Radio, logo et texte centrés sur une même ligne. */
.payment-option__form-check { display: flex; align-items: center; gap: .6rem; padding-left: 0; }
.payment-option__form-check .payment-option__input { float: none; margin: 0; flex-shrink: 0; }
.payment-option__label { display: inline-flex; align-items: center; gap: .6rem; margin: 0; }
.payment-option__label img { max-height: 48px; width: auto; }