/* ==========================================================================
   Catalogue produits — art-piramida.com — 22/09/2026
   Fichier NEUF (ne redéfinit aucun jeton de style.css, ne réutilise que
   var(--xxx) déjà déclarés là-bas). Mode clair uniquement (CM-0417/CM-0575).
   ========================================================================== */

/* ---- Fil d'Ariane court, réutilisé sur archive/gamme/produit ---- */
.ap-fil{font-size:13px;color:var(--sourde);margin-bottom:10px}
.ap-fil a{text-decoration:underline;text-decoration-thickness:1px}

/* ---- Cartes produit (grille gamme + archive) ----
   S'appuie sur .ap-carte déjà stylé (fond plaque, filet). On ajoute juste
   la pastille prix + les chips d'options, jamais de case vide : la grille
   parente reste .ap-grille.ap-grille--4 (auto-fit déjà en place). */
.ap-carte--produit{position:relative;transition:transform .15s ease,box-shadow .15s ease}
.ap-carte--produit:hover{transform:translateY(-3px);box-shadow:0 18px 30px -20px rgba(17,12,15,.35)}
.ap-carte--produit .ap-pastille{position:absolute;top:10px;left:10px;background:var(--plaque-haute);color:var(--argon);border:1px solid var(--filet);font-family:var(--police-lecture);font-weight:700;font-variant-numeric:tabular-nums;font-size:13px;padding:5px 10px;white-space:nowrap;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis}
.ap-carte--produit .ap-carte-corps h3{margin-bottom:6px}
.ap-carte--produit-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ap-chip{display:inline-block;background:var(--fond);border:1px solid var(--filet);color:var(--sourde);font-size:12px;padding:4px 9px;white-space:nowrap}

/* ---- Bande "Comment ça marche" (page gamme) ---- */
.ap-etapes-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gouttiere);counter-reset:etape}
@media (max-width:760px){.ap-etapes-3{grid-template-columns:1fr}}
.ap-etapes-3 li{list-style:none;background:var(--plaque);border:1px solid var(--filet);padding:22px 20px;position:relative}
.ap-etapes-3 li::before{counter-increment:etape;content:counter(etape);display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-family:var(--police-boitier);font-size:15px;margin-bottom:10px}

/* ---- FAQ en accordéon natif (jamais un <table>) ---- */
.ap-accordeon{border-top:1px solid var(--filet)}
.ap-accordeon details{border-bottom:1px solid var(--filet)}
.ap-accordeon summary{cursor:pointer;padding:16px 4px;font-family:var(--police-boitier);font-size:17px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;-webkit-tap-highlight-color:transparent}
.ap-accordeon summary::-webkit-details-marker{display:none}
.ap-accordeon summary::after{content:"+";font-size:22px;color:var(--accent);flex:none}
.ap-accordeon details[open] summary::after{content:"–"}
.ap-accordeon summary:focus-visible{outline:2px solid var(--argon);outline-offset:2px}
.ap-accordeon .ap-accordeon-corps{padding:0 4px 18px;color:var(--sourde)}

/* ==========================================================================
   FICHE PRODUIT (single-produit.php)
   ========================================================================== */
.ap-produit-tete{padding-block:28px 8px}
.ap-produit-tete h1{font-size:clamp(28px,3.4vw,42px);max-width:24ch}

/* Galerie : image principale + vignettes cliquables (JS vanilla) */
.ap-produit-galerie{display:grid;gap:10px}
.ap-produit-galerie-principale{aspect-ratio:4/3;background:var(--plaque);overflow:hidden;position:relative}
.ap-produit-galerie-principale img{width:100%;height:100%;object-fit:cover}
.ap-produit-vignettes{display:flex;gap:8px}
.ap-produit-vignettes button{padding:0;border:2px solid transparent;background:none;cursor:pointer;width:76px;height:58px;flex:none;overflow:hidden}
.ap-produit-vignettes button img{width:100%;height:100%;object-fit:cover;display:block}
.ap-produit-vignettes button.est-active{border-color:var(--accent)}
.ap-produit-vignettes button:focus-visible{outline:2px solid var(--argon);outline-offset:2px}

/* Colonne info sticky — même mécanique que .ap-avec-aside > .ap-aside-devis
   (style.css), appliquée ici à notre propre classe pour ne pas modifier ce
   fichier. S'arrête naturellement en fin de grille (pas de "bloc" figé). */
.ap-produit-corps{display:grid;grid-template-columns:1fr;gap:32px;align-items:start;padding-block:8px 40px}
@media (min-width:1000px){
  .ap-produit-corps{grid-template-columns:1fr 360px}
  .ap-produit-corps>.ap-produit-info{position:sticky;top:calc(var(--entete-h) + 12px)}
}
@media (max-height:760px){.ap-produit-corps>.ap-produit-info{position:static}}

.ap-produit-info{background:var(--plaque);border:1px solid var(--filet);padding:22px}
.ap-produit-info .ap-produit-prix{font-family:var(--police-boitier);font-size:clamp(24px,2.6vw,32px);color:var(--argon);font-variant-numeric:tabular-nums;margin:2px 0 4px}
.ap-produit-info .ap-produit-unite{color:var(--sourde);font-size:14px;margin-bottom:14px}
.ap-produit-info .ap-produit-delai{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--sourde);margin-bottom:16px}
.ap-produit-info .ap-bouton{width:100%;text-align:center;margin-bottom:10px}
.ap-produit-info .ap-meta-source{font-size:11.5px;color:var(--sourde);margin-top:14px;line-height:1.5;border-top:1px solid var(--filet);padding-top:12px}

/* Options en chips, jamais une puce nue */
.ap-produit-options{list-style:none;margin:14px 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ap-produit-options li{background:var(--fond);border:1px solid var(--filet);font-size:12.5px;padding:5px 10px}

/* Sélecteur de dimensions — purement indicatif */
.ap-produit-dims{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px}
.ap-produit-dims button{background:var(--fond);border:1px solid var(--filet);color:var(--encre);font-size:13px;padding:8px 12px;cursor:pointer;min-height:44px}
.ap-produit-dims button.est-choisi{border-color:var(--accent);color:var(--accent);font-weight:700}
.ap-produit-dims button:focus-visible{outline:2px solid var(--argon);outline-offset:2px}

/* Fiche caractéristiques — infographie en cases, jamais un <table> */
.ap-produit-fiche{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--filet);border:1px solid var(--filet);margin:22px 0}
.ap-produit-fiche>div{background:var(--plaque);padding:16px 18px}
.ap-produit-fiche dt{font-size:12px;color:var(--sourde);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.ap-produit-fiche dd{margin:0;font-family:var(--police-boitier);font-size:16px}

/* Réglette de prix — repère visuel, jamais un chiffre nouveau */
.ap-produit-reglette{margin:18px 0 26px}
.ap-produit-reglette-piste{height:8px;background:var(--filet);position:relative}
.ap-produit-reglette-remplissage{position:absolute;inset:0;background:var(--argon);width:100%}
.ap-produit-reglette-legende{display:flex;justify-content:space-between;font-size:12px;color:var(--sourde);margin-top:6px;font-variant-numeric:tabular-nums}

/* Galerie de réalisations */
.ap-produit-galerie-secondaire{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:640px){.ap-produit-galerie-secondaire{grid-template-columns:repeat(2,1fr)}}
.ap-produit-galerie-secondaire img{aspect-ratio:4/3;object-fit:cover;width:100%}

/* Bandeau CTA collant mobile — jamais recouvert par le footer.
   Remplace .ap-barre-mobile (site-wide, header.php) SUR la fiche produit
   seulement : deux barres fixes empilées en bas d'écran sont un défaut
   (MO-010/MO-011 grille Mathias). On ne touche pas header.php : on masque
   juste .ap-barre-mobile via body.ap-a-cta-mobile (classe posée par notre
   propre script inline, jamais par header.php). */
.ap-produit-cta-mobile{display:none}
@media (max-width:999px){
  .ap-produit-cta-mobile{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--plaque-haute);border-top:1px solid var(--filet);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:10px;align-items:center;
  }
  .ap-produit-cta-mobile .ap-produit-cta-prix{flex:none;font-family:var(--police-boitier);color:var(--argon);font-size:15px;font-variant-numeric:tabular-nums}
  .ap-produit-cta-mobile .ap-bouton{flex:1;margin:0}
}
@media (max-width:640px){
  body.ap-a-cta-mobile{padding-bottom:64px}
  body.ap-a-cta-mobile .ap-barre-mobile{display:none}
}

/* Carrousel galerie mobile (scroll-snap) */
@media (max-width:640px){
  .ap-produit-galerie-secondaire{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;
    grid-template-columns:none;padding-bottom:4px;-webkit-overflow-scrolling:touch;
  }
  .ap-produit-galerie-secondaire img{flex:0 0 78%;scroll-snap-align:start;aspect-ratio:4/3}
}

/* ==========================================================================
   PAGE GAMME (taxonomy-gamme.php) & ARCHIVE (archive-produit.php)
   ========================================================================== */
.ap-gamme-sousnav{position:sticky;top:var(--entete-h);background:var(--fond);z-index:10;padding-block:12px;margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--filet)}
.ap-gamme-guide{background:var(--plaque);border:1px solid var(--filet);padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:28px}
.ap-gamme-guide p{margin:0;color:var(--sourde);font-size:14px}

.ap-archive-gammes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gouttiere)}
.ap-archive-gammes .ap-carte{position:relative}
.ap-archive-gammes .ap-carte .ap-photo{aspect-ratio:4/3}
.ap-archive-gammes .ap-carte-corps p{color:var(--sourde);font-size:14px;margin:4px 0 0}

/* Comptage produits d'une gamme, badge discret */
.ap-gamme-compte{display:inline-block;background:var(--plaque);border:1px solid var(--filet);color:var(--sourde);font-size:12.5px;padding:4px 10px;margin-bottom:14px}

/* ==========================================================================
   FICHE PRODUIT — refonte 23/09/2026 (R-0845/46/47)
   En-tête mis en scène, repères illustrés, points numérotés, frise pose/délais.
   ========================================================================== */
.apd-ico{flex:none;display:block}

/* En-tête : plaque claire sur la façade, un tube d'accent, repères à droite */
.ap-produit-tete{padding-block:24px 36px;background:linear-gradient(180deg,var(--plaque-haute) 0,var(--fond) 100%);border-bottom:1px solid var(--filet);margin-bottom:28px;position:relative;overflow:hidden}
.ap-produit-tete .ap-conteneur{position:relative;z-index:1}
.ap-produit-tete-grille{display:grid;gap:28px;align-items:end}
@media (min-width:1000px){.ap-produit-tete-grille{grid-template-columns:minmax(0,1fr) 380px;gap:48px}}
.ap-produit-gamme{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);text-decoration:none;margin-bottom:14px}
.ap-produit-gamme:hover{color:var(--accent-survol);text-decoration:underline}
.ap-produit-gamme-tube{width:28px;height:4px;background:var(--accent);display:block}
.ap-produit-tete h1{font-size:clamp(32px,4.2vw,56px);line-height:1.02;max-width:18ch;margin:0 0 18px;letter-spacing:-.01em}
.ap-produit-accroche{font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--encre);max-width:58ch;margin:0 0 22px;padding-left:18px;border-left:4px solid var(--accent)}
.ap-produit-accroche a{color:inherit}
.ap-produit-tete-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.ap-produit-lien-bas{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--encre);text-decoration:none;min-height:44px}
.ap-produit-lien-bas .apd-ico{width:18px;height:18px;transform:rotate(90deg);transition:transform .2s ease}
.ap-produit-lien-bas:hover .apd-ico{transform:rotate(90deg) translateX(3px)}

.ap-produit-reperes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--filet);border:1px solid var(--filet)}
.apd-repere{background:var(--plaque-haute);padding:14px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.apd-repere .apd-ico{color:var(--accent);margin-bottom:4px}
.apd-repere-lbl{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--sourde);font-weight:700}
.apd-repere-val{font-family:var(--police-boitier);font-size:16px;line-height:1.25;color:var(--encre);overflow-wrap:anywhere}
.apd-repere--prix{grid-column:1/-1;background:var(--encre);color:#fff}
.apd-repere--prix .apd-repere-lbl{color:#CFC4CC}
.apd-repere--prix .apd-repere-val{color:#fff;font-size:clamp(24px,2.4vw,30px);font-variant-numeric:tabular-nums}
@media (max-width:420px){.ap-produit-reperes{grid-template-columns:1fr}}

/* Galerie : crédit discret posé sur l'image, vignettes plus franches */
.ap-produit-galerie-principale img{transition:opacity .2s ease}
.ap-produit-galerie-principale img.est-en-change{opacity:.35}
.ap-produit-credit{position:absolute;right:0;bottom:0;background:rgba(17,12,15,.55);color:#EDE6EA;font-size:10.5px;line-height:1.3;padding:3px 8px;max-width:70%;opacity:.8}
.ap-produit-vignettes button{width:92px;height:69px;opacity:.7;transition:opacity .15s ease,border-color .15s ease}
.ap-produit-vignettes button:hover,.ap-produit-vignettes button.est-active{opacity:1}

/* Titres de section numérotés */
.ap-produit-section{margin-top:48px}
.ap-produit-section h2{display:flex;align-items:baseline;gap:14px;font-size:clamp(26px,2.4vw,34px);margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--filet)}
.ap-produit-h2-num{font-family:var(--police-lecture);font-size:14px;font-weight:700;color:var(--accent);letter-spacing:.06em;font-variant-numeric:tabular-nums}

/* Description en points numérotés (cartes) */
.ap-produit-points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px;counter-reset:pt}
.ap-produit-points li:last-child:nth-child(odd){grid-column:1/-1}
@media (max-width:640px){.ap-produit-points{grid-template-columns:1fr}}
.ap-produit-points li{counter-increment:pt;background:var(--plaque);border:1px solid var(--filet);border-top:3px solid var(--encre);padding:18px 18px 16px;position:relative}
.ap-produit-points li::before{content:counter(pt,decimal-leading-zero);display:block;font-family:var(--police-boitier);font-size:28px;line-height:1;color:var(--accent);margin-bottom:10px}
.ap-produit-points li p{margin:0;font-size:15.5px;line-height:1.6}

/* Ce qui est compris + fiche technique */
.ap-produit-compris{display:grid;gap:18px;margin-top:22px}
@media (min-width:760px){.ap-produit-compris{grid-template-columns:1.2fr 1fr}}
.ap-produit-compris-bloc{background:var(--plaque-haute);border:1px solid var(--filet);padding:20px 22px}
.ap-produit-compris-bloc h3{font-size:18px;margin:0 0 12px}
.ap-produit-coches{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ap-produit-coches li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45}
.ap-produit-coches .apd-ico{width:20px;height:20px;color:#fff;background:var(--conforme);padding:3px;margin-top:1px}
.ap-produit-compris .ap-produit-fiche{margin:0;grid-template-columns:1fr}
.ap-produit-fiche dt{display:flex;align-items:center;gap:8px}
.ap-produit-fiche dt .apd-ico{width:18px;height:18px;color:var(--accent)}
.ap-produit-fiche dd{font-size:15.5px;line-height:1.4}

/* Pose & délais : deux tuiles + frise */
.ap-produit-duo{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.ap-produit-duo-tuile{background:var(--plaque-haute);border:1px solid var(--filet);padding:20px 22px;display:flex;flex-direction:column;gap:4px}
.ap-produit-duo-tuile .apd-ico{width:28px;height:28px;color:var(--accent);margin-bottom:8px}
.ap-produit-duo-tuile strong{font-family:var(--police-boitier);font-weight:400;font-size:21px;line-height:1.2}
.ap-produit-duo-tuile p{margin:6px 0 0;color:var(--sourde);font-size:14.5px;line-height:1.5}

.ap-produit-frise{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;position:relative}
.ap-produit-frise::before{content:"";position:absolute;left:12.5%;right:12.5%;top:27px;height:2px;background:repeating-linear-gradient(90deg,var(--accent) 0 10px,transparent 10px 16px)}
.ap-produit-frise li{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 4px}
.ap-frise-pastille{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:var(--encre);color:#fff;border:4px solid var(--fond);margin-bottom:8px;position:relative;z-index:1}
.ap-produit-frise li:last-child .ap-frise-pastille{background:var(--accent)}
.ap-produit-frise strong{font-size:15px;line-height:1.3}
.ap-produit-frise span:last-child{font-size:13px;color:var(--sourde);line-height:1.4}
@media (max-width:700px){
  .ap-produit-frise{grid-template-columns:1fr;gap:0}
  .ap-produit-frise::before{left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--accent) 0 10px,transparent 10px 16px)}
  .ap-produit-frise li{display:grid;grid-template-columns:56px 1fr;column-gap:14px;text-align:left;align-items:center;padding:6px 0}
  .ap-frise-pastille{grid-row:1/3;margin:0}
  .ap-produit-frise strong{align-self:end}
  .ap-produit-frise span:last-child{align-self:start}
}
.ap-produit-section .ap-mention-editeur{font-size:12px;margin-top:22px}

/* Colonne info */
.ap-produit-info-titre{font-family:var(--police-boitier);font-size:19px;line-height:1.2;margin:0 0 2px}
.ap-produit-info-liste{list-style:none;margin:6px 0 18px;padding:14px 0 0;border-top:1px solid var(--filet);display:grid;gap:10px}
.ap-produit-info-liste li{display:flex;align-items:center;gap:10px;font-size:14px}
.ap-produit-info-liste .apd-ico{width:18px;height:18px;color:var(--accent)}
@media (prefers-reduced-motion:reduce){.ap-produit-galerie-principale img,.ap-produit-lien-bas .apd-ico,.ap-produit-vignettes button{transition:none}}
.ap-produit-reperes .apd-repere:last-child:nth-child(even){grid-column:1/-1}