/* ==========================================================================
   adv-pages.css — ajouts pour les pages produit ADV (prefixe pp- : aucune
   collision possible avec les classes de l'accueil).
   Charge par les 3 pages produit ET par l'accueil (qui garde son <style> inline).
   Cree le 2026-09-02.
   ========================================================================== */

/* --- fil d'Ariane --- */
.pp-fil{background:#fff;border-bottom:1px solid var(--bord);font-size:.86rem;color:var(--gris);}
.pp-fil .wrap{padding:12px 22px;}
.pp-fil a{color:var(--gris);text-decoration:none;font-weight:600;}
.pp-fil a:hover{color:var(--rouge);text-decoration:underline;}
.pp-fil span[aria-hidden]{margin:0 6px;color:var(--gris-cl);}

/* --- en-tete de page produit : reprend .hero, un peu moins haut --- */
.pp-hero{padding:72px 20px;}
.pp-hero h1{max-width:820px;}
.pp-hero .btn{margin-top:8px;}
/* sur mobile on resserre le hero pour que le bouton de devis reste
   AU-DESSUS DE LA LIGNE DE FLOTTAISON (verifiable a 390 px dans l apercu) */
@media(max-width:600px){ .pp-hero{padding:44px 18px 40px;} }

/* --- bouton de devis : valeurs REPRISES A L IDENTIQUE de .menuD__btn,
       le bouton devis de l en-tete de l accueil (ambre #ef9f27 / #412402). --- */
.pp-devis{display:inline-flex;align-items:center;gap:9px;background:#ef9f27;color:#412402;
  border:none;border-radius:11px;padding:11px 16px;font-family:inherit;font-weight:800;
  font-size:.95rem;text-decoration:none;cursor:pointer;white-space:nowrap;
  box-shadow:0 2px 10px rgba(239,159,39,.35);transition:.15s;}
.pp-devis:hover{background:#e0900f;box-shadow:0 4px 16px rgba(239,159,39,.5);}
.pp-devis:focus-visible{outline:2px solid #412402;outline-offset:2px;}
.pp-devis__ic{width:18px;height:18px;flex:none;display:block;}
.pp-devis__gratuit{background:#fff;color:#8a5200;font-size:.68rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:999px;line-height:1.5;}

/* variante large : hero et bandeau de bas de page */
.pp-devis--lg{padding:16px 26px;font-size:1.05rem;border-radius:13px;gap:11px;margin-top:8px;
  box-shadow:0 3px 16px rgba(239,159,39,.42);}
.pp-devis--lg:hover{box-shadow:0 6px 22px rgba(239,159,39,.55);}
.pp-devis--lg .pp-devis__ic{width:21px;height:21px;}
@media(max-width:600px){
  .pp-devis--lg{width:100%;justify-content:center;white-space:normal;padding:15px 18px;}
}

/* --- grilles 2 et 3 colonnes (l'accueil n'a qu'un .grid4) --- */
.pp-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.pp-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:900px){.pp-grid3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.pp-grid2,.pp-grid3{grid-template-columns:1fr;}}

/* --- cartes de texte : meme cadre que .card, sans zone media --- */
.pp-card{padding:22px;}
.pp-card h3{margin:0 0 8px;font-size:1.05rem;font-weight:700;color:var(--navy);}
.pp-card p{margin:0 0 10px;color:var(--gris);font-size:.95rem;}
.pp-card p:last-child{margin-bottom:0;}
.pp-card--lien{display:block;text-decoration:none;transition:.15s;}
.pp-card--lien:hover{transform:translateY(-2px);box-shadow:var(--shadow);}

.pp-lien{color:var(--rouge);font-weight:700;font-size:.92rem;text-decoration:none;}
.pp-lien:hover{text-decoration:underline;}

/* --- listes de marques --- */
.pp-groupe{margin:0 0 26px;}
.pp-groupe:last-child{margin-bottom:0;}
.pp-groupe__t{margin:0 0 12px;font-size:.82rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--navy);}
.pp-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px;}
.pp-chips li{background:#fff;border:1px solid var(--bord);border-radius:999px;
  padding:8px 15px;font-size:.92rem;font-weight:600;color:var(--navy);}
.pp-note{margin:14px 0 0;color:var(--gris);font-size:.93rem;max-width:760px;}

/* --- bandeau d'appel a l'action en bas de page --- */
.pp-cta{background:var(--navy);color:#fff;text-align:center;}
.pp-cta h2{color:#fff;}
.pp-cta__lead{color:rgba(255,255,255,.86);margin:0 auto 28px;}

/* --- accueil : la grille des 3 gammes (memes cartes que les pages produit) --- */
.pp-gammes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:900px){.pp-gammes{grid-template-columns:1fr;}}