/* ========================================================================== 
   PIERREDEPLAN — RESPONSIVE CLEAN LAYER
   Version : 2026-09-07
   Usage   : charger CE FICHIER APRES le style.css actuel.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. TOKENS RESPONSIVE / GARDE-FOUS
   -------------------------------------------------------------------------- */
:root{
  --pdp-header-h: 70px;
  --pdp-admin-h: 0px;
  --pdp-gutter: clamp(18px, 5vw, 80px);
  --pdp-section-y: clamp(54px, 7vw, 96px);
  --pdp-card-gap: clamp(14px, 2vw, 24px);
}

html{
  max-width:100%;
  overflow-x:clip;
  scroll-padding-top:calc(var(--pdp-header-h) + 18px);
}
body{
  width:100%;
  max-width:100%;
  min-width:320px;
  overflow-x:clip;
}
.pdp-page{
  width:100%;
  max-width:100%;
  overflow-x:clip;
}

/* Les enfants grid/flex peuvent sinon forcer leur parent à dépasser. */
[class*="pdp-"]{ min-width:0; }
[class*="pdp-"] img,
[class*="pdp-"] video,
[class*="pdp-"] iframe{
  max-width:100%;
}
img{ height:auto; }

/* Champs : évite le zoom iOS + largeur intrinsèque des selects. */
input, select, textarea, button{ max-width:100%; }
input, select, textarea{ min-width:0; }

/* --------------------------------------------------------------------------
   02. HEADER FIXE + BARRE D'ADMIN WORDPRESS
   -------------------------------------------------------------------------- */
.admin-bar{ --pdp-admin-h:32px; }
.admin-bar .pdp-header{
  top:var(--pdp-admin-h) !important;
}
.admin-bar .pdp-profil-parcours.pdp-parcours-sticky,
.admin-bar .pdp-mat-switch.is-sticky{
  top:calc(var(--pdp-admin-h) + var(--pdp-header-h)) !important;
}
.admin-bar .pdp-nav{
  top:calc(var(--pdp-admin-h) + var(--pdp-header-h));
}

@media (max-width:782px){
  .admin-bar{ --pdp-admin-h:46px; }
}

/* Logo fiable quelles que soient les dimensions du fichier source. */
.pdp-header .pdp-logo{
  flex:0 0 auto;
  min-width:0;
}
.pdp-header .pdp-logo img{
  display:block;
  width:auto;
  max-width:190px;
  max-height:44px;
  object-fit:contain;
}

/* Laptop : on garde le desktop mais sans tasser les liens. */
@media (min-width:981px) and (max-width:1280px){
  .pdp-header{ padding-inline:24px; gap:16px; }
  .pdp-nav{ flex:1 1 auto; justify-content:center; min-width:0; }
  .pdp-nav a{
    padding-inline:9px;
    font-size:10px;
    letter-spacing:.075em;
    white-space:nowrap;
  }
  .pdp-nav-right{ gap:10px; flex:0 0 auto; }
  .pdp-btn-nav-fill{ padding:9px 14px; font-size:11px; white-space:nowrap; }
  .pdp-btn-nav-ghost{ font-size:11px; white-space:nowrap; }
}
@media (min-width:981px) and (max-width:1120px){
  .pdp-nav-right .pdp-btn-nav-ghost{ display:none !important; }
}

/* Mobile : panneau réellement contenu sous le header, admin bar comprise. */
@media (max-width:980px){
  .pdp-header{
    height:var(--pdp-header-h);
    padding-inline:18px;
  }
  .pdp-header .pdp-logo img{
    max-width:min(48vw, 170px);
    max-height:38px;
  }
  .pdp-burger{ flex:0 0 44px; }
  .pdp-nav{
    top:calc(var(--pdp-admin-h) + var(--pdp-header-h)) !important;
    max-height:calc(100dvh - var(--pdp-admin-h) - var(--pdp-header-h));
    padding-inline:max(20px, env(safe-area-inset-left));
    padding-bottom:calc(24px + env(safe-area-inset-bottom));
  }
  .pdp-nav a{
    white-space:normal;
    overflow-wrap:anywhere;
  }
}

/* --------------------------------------------------------------------------
   03. TYPOGRAPHIE / ESPACEMENTS MOBILES
   -------------------------------------------------------------------------- */
@media (max-width:760px){
  .pdp-page-title{ font-size:clamp(38px, 11vw, 54px); line-height:1; }
  .pdp-page-sub{ font-size:15px; }
  .pdp-h2,
  .pdp-bc-title,
  .pdp-wh-story-h,
  .pdp-mag-news-h{
    overflow-wrap:anywhere;
  }

  .pdp-bc-sec,
  .pdp-news,
  .pdp-choisir{
    padding-inline:var(--pdp-gutter) !important;
  }
}

/* --------------------------------------------------------------------------
   04. EN-TETES DES PAGES INTERNES
   -------------------------------------------------------------------------- */
.pdp-ppage{ padding-top:var(--pdp-header-h); }
.pdp-pagehead{
  padding-inline:var(--pdp-gutter);
}
.pdp-pagehead-left{ min-width:0; }

@media (max-width:980px){
  .pdp-pagehead{
    padding-top:clamp(42px, 7vw, 64px);
    padding-bottom:32px;
    gap:26px;
  }
  .pdp-pagehead-stats,
  .pdp-pagehead-stats--4{
    width:100%;
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:16px !important;
  }
  .pdp-pstat{
    width:100%;
    max-width:none;
    gap:11px;
  }
  .pdp-pstat-ico{ width:38px; height:38px; }
  .pdp-pstat-num{ font-size:20px; }
}
@media (max-width:420px){
  .pdp-pagehead-stats,
  .pdp-pagehead-stats--4{
    grid-template-columns:1fr !important;
  }
}

/* --------------------------------------------------------------------------
   05. HOME — HERO
   -------------------------------------------------------------------------- */
.pdp-hero{
  height:100svh;
  min-height:620px;
}
@supports (height:100dvh){
  .pdp-hero{ height:100dvh; }
}

@media (max-width:820px){
  .pdp-hero{ min-height:620px; }
  .pdp-hero-content{
    left:var(--pdp-gutter) !important;
    right:var(--pdp-gutter) !important;
    bottom:clamp(92px, 15vh, 132px);
    max-width:none;
  }
  .pdp-hero-title{
    font-size:clamp(42px, 12vw, 64px);
    line-height:.98;
  }
  .pdp-hero-claim{
    max-width:34em;
    font-size:15px;
    line-height:1.6;
  }
  .pdp-hero-btns{
    display:flex;
    flex-wrap:wrap;
    gap:10px 14px;
  }
  .pdp-social-bar{ display:none !important; }
}
@media (max-width:560px){
  .pdp-hero{ min-height:580px; }
  /*
   * Les contenus et les commandes du slider sont positionnés séparément.
   * On réserve donc une vraie zone sous les CTA afin que les flèches ne
   * puissent jamais recouvrir « Parler de votre projet ».
   */
  .pdp-hero-content{ bottom:118px; }
  .pdp-hero-title{ font-size:clamp(38px, 13vw, 54px); }
  .pdp-hero-badge{ font-size:10px; letter-spacing:.14em; }
  .pdp-hero-claim{ margin:14px 0 22px; font-size:14px; }
  .pdp-hero-btns{
    flex-direction:column;
    align-items:stretch;
  }
  .pdp-hero-btns a,
  .pdp-hero-btns button{
    width:100%;
    justify-content:center;
    text-align:center;
  }
  .pdp-hero-arrows{
    right:var(--pdp-gutter) !important;
    bottom:24px !important;
    transform:scale(.9);
    transform-origin:right bottom;
  }
}

/* Écrans mobiles peu hauts : conserver la séparation sans tasser le titre. */
@media (max-width:560px) and (max-height:720px){
  .pdp-hero{ height:auto; min-height:720px; }
}

/* --------------------------------------------------------------------------
   06. HOME — PARCOURS GLOBAL
   -------------------------------------------------------------------------- */
@media (max-width:760px){
  .pdp-parcours{
    padding:42px 0 22px !important;
    overflow:hidden;
  }
  .pdp-parcours-header,
  .pdp-parcours-note{
    margin-inline:var(--pdp-gutter) !important;
  }
  .pdp-parcours .pdp-pp-steps,
  .pdp-parcours-sticky .pdp-pp-steps{
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    gap:10px !important;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    padding:4px var(--pdp-gutter) 10px;
  }
  .pdp-parcours .pdp-pp-steps::-webkit-scrollbar{ display:none; }
  .pdp-parcours .pdp-pp-step,
  .pdp-parcours-sticky .pdp-pp-step{
    flex:0 0 min(78vw, 285px) !important;
    width:auto !important;
    min-height:76px;
    scroll-snap-align:start;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:left !important;
    gap:12px !important;
    padding:12px 14px !important;
    border:1px solid var(--pdp-lighter) !important;
    background:#fff;
  }
  .pdp-parcours .pdp-pp-arrow{ display:none !important; }
  .pdp-parcours .pdp-pp-label{ align-items:flex-start !important; }
  .pdp-parcours .pdp-pp-ico,
  .pdp-parcours .pdp-pp-num{ flex:0 0 auto; }

  .pdp-profil-parcours.pdp-parcours-sticky{
    left:0;
    right:0;
    padding:6px 0 !important;
  }
  .pdp-parcours-sticky .pdp-pp-step{
    flex-basis:min(68vw, 235px) !important;
    min-height:54px;
    padding:8px 10px !important;
  }
}

/* --------------------------------------------------------------------------
   07. HOME — REALISATIONS / GRILLES / FILTRES
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  .pdp-step-intro{
    padding-inline:var(--pdp-gutter) !important;
  }
  .pdp-real-immersive{
    grid-template-columns:1fr !important;
    height:auto !important;
  }
  .pdp-real-featured{ min-height:420px; height:auto !important; }
  .pdp-real-featured-content{ padding:38px var(--pdp-gutter) !important; }

  .pdp-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }
  .pdp-filters{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto;
    gap:8px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .pdp-filters::-webkit-scrollbar{ display:none; }
  .pdp-filter-btn{ flex:0 0 auto; white-space:nowrap; }
}

@media (max-width:820px){
  .pdp-real-column{
    display:flex !important;
    flex-direction:row !important;
    height:auto !important;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .pdp-real-column::-webkit-scrollbar{ display:none; }
  .pdp-real-thumb{
    flex:0 0 min(68vw, 260px) !important;
    min-height:150px;
  }
}

@media (max-width:560px){
  .pdp-real-featured{ min-height:390px; }
  .pdp-real-featured-content{ padding:28px 22px !important; }
  .pdp-real-name{ font-size:clamp(30px, 9vw, 42px); }
  .pdp-grid{ grid-template-columns:1fr !important; }
  .pdp-grid-item{ aspect-ratio:4/3; }
  .pdp-grid-overlay{ padding:22px 20px !important; }
}

/* --------------------------------------------------------------------------
   08. HOME — MARCHES
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  .pdp-marches-head{
    padding-inline:var(--pdp-gutter) !important;
    align-items:flex-start !important;
    flex-direction:column;
    gap:18px;
  }
  .pdp-marches-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    grid-template-rows:auto !important;
  }
  .pdp-marche-large,
  .pdp-marche-wide{
    grid-row:auto !important;
    grid-column:auto !important;
  }
  .pdp-marche-item{ min-height:260px; }
}
@media (max-width:560px){
  .pdp-marches{ padding-top:58px !important; }
  .pdp-marches-grid{ grid-template-columns:1fr !important; gap:2px; }
  .pdp-marche-item{ min-height:235px; }
  .pdp-marche-overlay{ padding:22px 20px !important; }
}

/* --------------------------------------------------------------------------
   09. HOME — COULEURS / BIEN CHOISIR
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  .pdp-couleurs-layout,
  .pdp-choisir-layout{
    grid-template-columns:1fr !important;
    gap:36px !important;
  }
  .pdp-mat-content.active{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }
  .pdp-mats-tabs{
    overflow-x:auto;
    flex-wrap:nowrap !important;
    scrollbar-width:none;
  }
  .pdp-mats-tabs::-webkit-scrollbar{ display:none; }
  .pdp-mat-tab{ flex:0 0 auto; white-space:nowrap; }
}
@media (max-width:560px){
  .pdp-couleurs,
  .pdp-choisir{
    padding-bottom:64px;
  }
  .pdp-mat-content.active{ grid-template-columns:1fr !important; }
  .pdp-mat-card{ padding:18px; }
  .pdp-coloris-feature,
  #pdp-couleurs .pdp-coloris-feature{
    margin-inline:var(--pdp-gutter) !important;
  }
  #pdp-couleurs .pdp-coloris-feature-visual{ min-height:240px !important; }
  #pdp-couleurs .pdp-coloris-feature-body{ padding:28px 22px !important; }
}

/* --------------------------------------------------------------------------
   10. HOME — POURQUOI / SERENITE / PROJET / ACTUALITES
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  .pdp-pourquoi-inner{
    grid-template-columns:1fr !important;
    gap:42px !important;
  }
  .pdp-pourquoi-cta-wrap{
    flex-direction:column;
    align-items:flex-start !important;
  }
  .pdp-serenite{
    flex-direction:column;
    align-items:flex-start !important;
    padding:52px var(--pdp-gutter) !important;
  }
  .pdp-serenite-right{
    width:100%;
    align-items:flex-start !important;
    text-align:left !important;
  }
  .pdp-serenite-big,
  .pdp-serenite-sub{ text-align:left !important; }

  .pdp-projet{
    grid-template-columns:1fr !important;
    min-height:0 !important;
  }
  .pdp-projet-dark,
  .pdp-projet-form{
    min-height:0;
    padding:58px var(--pdp-gutter) !important;
  }

  .pdp-news-head{
    align-items:flex-start !important;
    flex-direction:column;
    gap:16px;
  }
  .pdp-news-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:24px !important;
  }
}

@media (max-width:620px){
  .pdp-big-numbers{ grid-template-columns:1fr !important; }

  /* Le tableau de comparaison de la home devient une fiche lisible. */
  .pdp-compare-head{ display:none !important; }
  .pdp-compare-row{
    grid-template-columns:1fr !important;
    gap:6px !important;
    padding:16px 0 !important;
  }
  .pdp-compare-criteria{
    font-size:11px !important;
    color:var(--pdp-gray) !important;
  }
  .pdp-compare-them,
  .pdp-compare-us{
    padding-left:0 !important;
  }
  .pdp-compare-them::before{
    content:"Standard : ";
    color:var(--pdp-gray);
  }
  .pdp-compare-us::before{
    content:"Pierredeplan : ";
    color:var(--pdp-gold);
  }

  .pdp-projet-dark,
  .pdp-projet-form{ padding:44px 22px !important; }
  .pdp-news-grid{ grid-template-columns:1fr !important; }
  .pdp-news-visual{ height:auto; aspect-ratio:4/3; }
}

/* --------------------------------------------------------------------------
   11. HOME — PUISSANCE INDUSTRIELLE
   -------------------------------------------------------------------------- */
@media (max-width:820px){
  .pdp-power-hero{ min-height:400px; }
  .pdp-power-hero-content{ padding:62px var(--pdp-gutter) !important; }
  .pdp-power-stats{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }
  .pdp-power-stat{ padding:34px 18px !important; }
  .pdp-power-gallery{ grid-template-columns:1fr !important; }
  .pdp-power-photo{ height:auto !important; min-height:280px; }
  .pdp-power-cta{
    flex-direction:column;
    align-items:flex-start !important;
    padding:36px var(--pdp-gutter) !important;
  }
}
@media (max-width:420px){
  .pdp-power-stats{ grid-template-columns:1fr !important; }
}

/* --------------------------------------------------------------------------
   12. ETAPES 1 & 2 — INSPIRATIONS / COULEURS
   -------------------------------------------------------------------------- */
.pdp-explorer{
  min-width:0;
}
.pdp-results,
.pdp-rgrid,
.pdp-cgrid{ min-width:0; }

@media (max-width:980px){
  .pdp-explorer{
    grid-template-columns:1fr !important;
    gap:24px !important;
    padding:0 var(--pdp-gutter) 70px !important;
  }
  .pdp-fpanel{ width:100%; }
  .pdp-results-tools{ min-width:0; }
  .pdp-sort{ min-width:0; }
  .pdp-sort select{ min-width:0; }

  .pdp-rgrid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  .pdp-cgrid{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
}

@media (max-width:620px){
  .pdp-explorer{ padding-inline:18px !important; padding-bottom:58px !important; }
  .pdp-results-bar{ align-items:stretch !important; }
  .pdp-results-tools{
    display:grid !important;
    grid-template-columns:1fr;
    gap:10px !important;
    width:100%;
  }
  .pdp-view-toggle,
  .pdp-sort{ width:100%; }
  .pdp-sort select{ flex:1; }
  .pdp-view-btn{ min-width:0; }

  .pdp-rgrid{ grid-template-columns:1fr !important; }
  .pdp-cgrid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:12px !important; }

  .pdp-rcard-body{ padding:18px !important; }
  .pdp-rcard-title{ font-size:21px; }
  .pdp-ccard-body{ padding-inline:12px !important; }
}

@media (max-width:420px){
  .pdp-rgrid.is-masonry{ column-count:1 !important; }
}
@media (max-width:350px){
  .pdp-cgrid{ grid-template-columns:1fr !important; }
}

/* Modal : largeur protégée même quand une ancienne règle impose un min-width. */
@media (max-width:820px){
  .pdp-modal-dialog{
    width:min(100%, 720px) !important;
    max-width:100% !important;
  }
  .pdp-modal-grid{ grid-template-columns:1fr !important; }
}
@media (max-width:560px){
  .pdp-modal-dialog{
    width:100vw !important;
    max-width:100vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
  }
}

/* --------------------------------------------------------------------------
   13. ETAPE 3 — BIEN CHOISIR
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  .pdp-bc-sec{ padding:64px var(--pdp-gutter) !important; }
  .pdp-bc-start-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:18px !important;
  }
  .pdp-bc-mats-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:18px !important;
  }
  .pdp-bc-cross{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }
  .pdp-bc-cross > :last-child:nth-child(odd){ grid-column:1 / -1; }
}
@media (max-width:640px){
  .pdp-bc-sec{ padding:52px 18px !important; }
  .pdp-bc-head{ margin-bottom:34px; }
  .pdp-bc-start-grid,
  .pdp-bc-mats-grid,
  .pdp-bc-cross{
    grid-template-columns:1fr !important;
  }
  .pdp-bc-cross > :last-child:nth-child(odd){ grid-column:auto; }
  .pdp-bc-start-card{ padding:28px 22px !important; }
  .pdp-bc-mat-img{ height:auto !important; aspect-ratio:16/10; }
  .pdp-bc-mat-in{ padding:22px 18px !important; }
  .pdp-bc-opts{ gap:8px; }
  .pdp-bc-opt{
    flex:1 1 calc(50% - 8px);
    min-height:44px;
    padding:10px 12px !important;
    text-align:center;
  }

  /* Tableau : le scroll horizontal est assumé et confortable. */
  .pdp-bc-table-wrap{
    width:calc(100% + 18px);
    margin-right:-18px;
    border-right:0;
    overflow-x:auto !important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .pdp-bc-table,
  .pdp-bc-table--grid{ min-width:820px !important; }
  .pdp-bc-table th,
  .pdp-bc-table td{ padding:13px 11px !important; }
}
@media (max-width:390px){
  .pdp-bc-opt{ flex-basis:100%; }
}

/* --------------------------------------------------------------------------
   14. ETAPE 4 — POURQUOI PIERREDEPLAN
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  .pdp-wh-hero{ padding:90px var(--pdp-gutter) !important; }
  .pdp-wh-band{ padding-inline:var(--pdp-gutter) !important; }
  .pdp-wh-process{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  .pdp-wh-stats-grid{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
  .pdp-wh-engage{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  .pdp-wh-story{ grid-template-columns:1fr !important; }
}
@media (max-width:560px){
  .pdp-wh-hero{ padding:72px 20px !important; }
  .pdp-wh-band{ min-height:330px !important; padding:38px 20px !important; }
  .pdp-wh-process,
  .pdp-wh-engage{ grid-template-columns:1fr !important; }
  .pdp-wh-stats-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  .pdp-wh-step{ padding-inline:8px; }
  .pdp-wh-eng{ padding:28px 22px !important; }
}
@media (max-width:380px){
  .pdp-wh-stats-grid{ grid-template-columns:1fr !important; }
}

/* Contrat Sérénité. */
@media (max-width:760px){
  .pdp-sere{ padding:64px 20px !important; }
  .pdp-sere-grid{ grid-template-columns:1fr !important; }
  .pdp-sere-card{ min-width:0; }
}

/* --------------------------------------------------------------------------
   15. ETAPE 5 — VOTRE PROJET
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .pdp-pj-paths{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
  .pdp-pj-form-grid{ grid-template-columns:1fr !important; }
  .pdp-pj-aside{ order:0 !important; }
  .pdp-pj-flow{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width:620px){
  .pdp-pj-form{ padding:30px 20px !important; }
  .pdp-pj-row{ grid-template-columns:1fr !important; }
  .pdp-pj-path{ padding:28px 22px !important; }
  .pdp-pj-path-btn,
  .pdp-pj-path-btn-ghost,
  .pdp-pj-submit{
    width:100%;
    justify-content:center;
    text-align:center;
  }
  .pdp-pj-flow{ grid-template-columns:1fr !important; }
  .pdp-pj-aside-img{ min-height:220px; }
}

/* --------------------------------------------------------------------------
   16. ETAPE 6 — ACTUALITES
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  .pdp-mag-feature{ grid-template-columns:1fr !important; }
  .pdp-mag-feature-img{ min-height:300px; }
  .pdp-mag-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  .pdp-mag-filters{
    overflow-x:auto;
    flex-wrap:nowrap !important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .pdp-mag-filters::-webkit-scrollbar{ display:none; }
  .pdp-mag-filters .pdp-fp-pill{ flex:0 0 auto; white-space:nowrap; }
}
@media (max-width:620px){
  .pdp-mag-feature-img{ min-height:240px; }
  .pdp-mag-feature-in{ padding:28px 22px !important; }
  .pdp-mag-grid{ grid-template-columns:1fr !important; }
  .pdp-mag-news{ padding-inline:20px !important; }
  .pdp-mag-news-form{ width:100%; max-width:none; }
  .pdp-mag-news-form button{ width:100%; }
  .pdp-mag-socials{ width:100%; flex-wrap:wrap; }
  .pdp-mag-social{ flex:1 1 140px; justify-content:center; }
}

/* --------------------------------------------------------------------------
   17. ETAPE 7 — ESPACE PRO
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  .pdp-pro-grid3{ grid-template-columns:1fr !important; }
  .pdp-pro-downloads{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  .pdp-pro-search-types{
    justify-content:flex-start !important;
    overflow-x:auto;
    flex-wrap:nowrap !important;
    scrollbar-width:none;
  }
  .pdp-pro-search-types::-webkit-scrollbar{ display:none; }
  .pdp-pro-search-types .pdp-fp-pill{ flex:0 0 auto; white-space:nowrap; }
}
@media (max-width:560px){
  .pdp-pro-gate{ padding:58px 20px !important; }
  .pdp-pro-gate-form form{ flex-direction:column; align-items:stretch; }
  .pdp-pro-gate-form label{ flex-basis:auto; }
  .pdp-pro-gate-form input[type=submit]{ width:100%; align-self:stretch; }
  .pdp-pro-downloads{ grid-template-columns:1fr !important; }
  .pdp-pro-dl{ padding:24px 20px !important; }
  .pdp-pro-search-bar{ padding-inline:12px; }
}

/* --------------------------------------------------------------------------
   18. FORMULAIRES / CONTACT FORM 7
   -------------------------------------------------------------------------- */
.pdp-cf7 input[type="text"],
.pdp-cf7 input[type="email"],
.pdp-cf7 input[type="tel"],
.pdp-cf7 input[type="password"],
.pdp-cf7 input[type="search"],
.pdp-cf7 select,
.pdp-cf7 textarea{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
@media (max-width:760px){
  .pdp-cf7-grid,
  .pdp-pj-row,
  .pdp-pr-row{
    grid-template-columns:1fr !important;
  }
  .pdp-cf7-submit,
  .pdp-pj-submit{
    min-height:46px;
  }
  .pdp-cf7--news form{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100%;
  }
  .pdp-cf7--news .wpcf7-form-control-wrap,
  .pdp-cf7--news .pdp-cf7-submit{
    width:100%;
  }
}

/* --------------------------------------------------------------------------
   19. FOOTER
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  .pdp-footer{ padding:64px var(--pdp-gutter) 28px !important; }
  .pdp-footer-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:34px 28px !important;
    margin-bottom:42px !important;
  }
  .pdp-footer-grid > :first-child{ grid-column:1 / -1; }
  .pdp-footer-bottom{
    align-items:flex-start !important;
    gap:18px;
    flex-wrap:wrap;
  }
}
@media (max-width:560px){
  .pdp-footer{ padding-inline:22px !important; }
  .pdp-footer-grid{ grid-template-columns:1fr !important; }
  .pdp-footer-grid > :first-child{ grid-column:auto; }
  .pdp-footer-socials{ width:100%; flex-wrap:wrap; gap:12px 18px; }
  .pdp-footer-copy{ line-height:1.6; }
}

/* --------------------------------------------------------------------------
   20. CIBLES TACTILES / ACCESSIBILITE / MOTION
   -------------------------------------------------------------------------- */
@media (hover:none) and (pointer:coarse){
  .pdp-filter-btn,
  .pdp-fp-pill,
  .pdp-fp-row,
  .pdp-fp-fin,
  .pdp-fp-mat,
  .pdp-view-btn,
  .pdp-bc-opt,
  .pdp-mat-tab,
  .pdp-pro-search-clear{
    min-height:44px;
  }
  .pdp-rcard:hover,
  .pdp-ccard:hover,
  .pdp-bc-mat:hover,
  .pdp-wh-eng:hover,
  .pdp-pro-dl:hover,
  .pdp-pro-profil:hover{
    transform:none !important;
  }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto !important; }
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}
/* ========================================================================== 
   PIERREDEPLAN — ESPACE PRO / BIBLIOTHEQUE DE RESSOURCES
   Version premium : recherche + filtres + cartes document individuelles
   A charger APRES style.css (et apres la feuille responsive principale).
   ========================================================================== */

/* --- Conteneur ----------------------------------------------------------- */
.pdp-pro-library{
  --pdp-pro-card-border: rgba(28,26,23,.12);
  --pdp-pro-card-soft: #f3f0ea;
  --pdp-pro-card-ink: var(--pdp-ink,#1c1a17);
  --pdp-pro-card-gold: var(--pdp-gold,#b08d57);
}

.pdp-pro-resource-tools{
  max-width: 1180px;
  margin: 34px auto 30px;
}

.pdp-pro-resource-topbar{
  display:grid;
  grid-template-columns:minmax(300px,1fr) auto;
  gap:18px;
  align-items:center;
  padding-bottom:20px;
  border-bottom:1px solid rgba(28,26,23,.10);
}

/* --- Recherche ----------------------------------------------------------- */
.pdp-pro-search-bar--library{
  width:100%;
  max-width:none;
  margin:0;
  min-height:50px;
  background:#fff;
  border:1px solid rgba(28,26,23,.14);
  border-radius:0;
  box-shadow:none;
}

.pdp-pro-search-bar--library:focus-within{
  border-color:var(--pdp-pro-card-gold);
  box-shadow:0 0 0 1px var(--pdp-pro-card-gold);
}

.pdp-pro-search-bar--library input{
  min-width:0;
  font-size:13px;
  letter-spacing:.01em;
}

.pdp-pro-search-clear{
  flex:0 0 34px;
  width:34px;
  height:34px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--pdp-gray,#817a70);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

/* --- Filtres de type ----------------------------------------------------- */
.pdp-pro-search-types--library{
  display:flex;
  gap:7px;
  justify-content:flex-end;
  flex-wrap:nowrap;
  margin:0;
}

.pdp-pro-search-types--library .pdp-fp-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:0 13px;
  white-space:nowrap;
  border:1px solid rgba(28,26,23,.12);
  background:transparent;
  color:var(--pdp-gray,#817a70);
  font-size:9.5px;
  letter-spacing:.10em;
  text-transform:uppercase;
  cursor:pointer;
}

.pdp-pro-search-types--library .pdp-fp-pill span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:rgba(28,26,23,.06);
  font-size:9px;
  letter-spacing:0;
}

.pdp-pro-search-types--library .pdp-fp-pill.is-on{
  background:var(--pdp-pro-card-ink);
  border-color:var(--pdp-pro-card-ink);
  color:#fff;
}

.pdp-pro-search-types--library .pdp-fp-pill.is-on span{
  background:rgba(255,255,255,.15);
}

/* --- Filtres de categorie ---------------------------------------------- */
.pdp-pro-category-filters{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  overflow-x:auto;
  padding:2px 0 4px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.pdp-pro-category-filters::-webkit-scrollbar{ display:none; }

.pdp-pro-cat-pill{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:39px;
  padding:0 14px;
  border:1px solid rgba(28,26,23,.11);
  background:#fff;
  color:var(--pdp-pro-card-ink);
  font-family:'Jost',sans-serif;
  font-size:10px;
  font-weight:400;
  letter-spacing:.04em;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}

.pdp-pro-cat-pill span{
  color:var(--pdp-gray,#817a70);
  font-size:9px;
}

.pdp-pro-cat-pill:hover,
.pdp-pro-cat-pill.is-on{
  border-color:var(--pdp-pro-card-gold);
}

.pdp-pro-cat-pill.is-on{
  background:#f7f3ec;
  color:var(--pdp-pro-card-gold);
}

/* --- Grille -------------------------------------------------------------- */
.pdp-pro-resource-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
  max-width:1180px;
  margin:0 auto;
  align-items:stretch;
}

.pdp-pro-resource-card{
  min-width:0;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--pdp-pro-card-border);
  overflow:hidden;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.pdp-pro-resource-card[hidden]{ display:none !important; }

@media (hover:hover){
  .pdp-pro-resource-card:hover{
    transform:translateY(-4px);
    border-color:rgba(176,141,87,.50);
    box-shadow:0 20px 42px rgba(28,26,23,.09);
  }
}

/* --- Couverture ---------------------------------------------------------- */
.pdp-pro-resource-cover{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:#eeeae2;
  border-bottom:1px solid var(--pdp-pro-card-border);
}

.pdp-pro-resource-cover img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:#eeeae2;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}

@media (hover:hover){
  .pdp-pro-resource-card:hover .pdp-pro-resource-cover img{
    transform:scale(1.018);
  }
}

.pdp-pro-resource-open{
  position:absolute;
  top:12px;
  right:12px;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(28,26,23,.88);
  color:#fff;
  font-family:'Jost',sans-serif;
  font-size:13px;
  opacity:0;
  transform:translateY(3px);
  transition:opacity .2s ease, transform .2s ease;
}

@media (hover:hover){
  .pdp-pro-resource-card:hover .pdp-pro-resource-open{
    opacity:1;
    transform:none;
  }
}

/* Fallback lorsque le serveur ne genere pas de vignette PDF. */
.pdp-pro-resource-fallback{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  padding:22px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.04),transparent 50%),
    #1d1a17;
  color:#fff;
}

.pdp-pro-resource-fallback::before{
  content:"";
  position:absolute;
  inset:16px;
  border:1px solid rgba(255,255,255,.11);
  pointer-events:none;
}

.pdp-pro-resource-fallback--image{ background:#d9d2c7; color:#1d1a17; }
.pdp-pro-resource-fallback--video{ background:#292520; }

.pdp-pro-resource-fallback-mark{
  position:absolute;
  top:24px;
  left:24px;
  width:38px;
  height:38px;
  color:var(--pdp-pro-card-gold);
}
.pdp-pro-resource-fallback-mark svg{ width:100%; height:100%; }

.pdp-pro-resource-fallback-brand{
  position:relative;
  z-index:1;
  font-family:'Jost',sans-serif;
  font-size:16px;
  font-weight:500;
  letter-spacing:-.02em;
}

.pdp-pro-resource-fallback-ext{
  position:relative;
  z-index:1;
  margin-top:5px;
  color:var(--pdp-pro-card-gold);
  font-family:'Jost',sans-serif;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* --- Contenu de carte ---------------------------------------------------- */
.pdp-pro-resource-body{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:184px;
  padding:20px 20px 18px;
}

.pdp-pro-resource-cat{
  margin:0 0 9px !important;
  color:var(--pdp-pro-card-gold) !important;
  font-family:'Jost',sans-serif !important;
  font-size:8.5px !important;
  font-weight:500 !important;
  line-height:1.3 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase;
}

.pdp-pro-resource-title{
  margin:0;
  color:var(--pdp-pro-card-ink);
  font-size:18px;
  font-weight:400;
  line-height:1.14;
}

.pdp-pro-resource-title a{
  color:inherit !important;
  text-decoration:none !important;
}

.pdp-pro-resource-desc{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:10px 0 0 !important;
  color:var(--pdp-gray,#817a70) !important;
  font-family:'Jost',sans-serif !important;
  font-size:11.5px !important;
  font-weight:300 !important;
  line-height:1.5 !important;
}

.pdp-pro-resource-foot{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  padding-top:18px;
}

.pdp-pro-resource-meta{
  color:var(--pdp-gray,#817a70);
  font-family:'Jost',sans-serif;
  font-size:9.5px;
  line-height:1.35;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.pdp-pro-resource-link{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--pdp-pro-card-ink) !important;
  font-family:'Jost',sans-serif;
  font-size:9px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:.11em;
  text-transform:uppercase;
  text-decoration:none !important;
  transition:color .2s ease, gap .2s ease;
}

.pdp-pro-resource-link:hover{
  color:var(--pdp-pro-card-gold) !important;
  gap:10px;
}

/* --- Etats vides --------------------------------------------------------- */
.pdp-pro-search-empty,
.pdp-pro-library-empty-admin{
  max-width:1180px;
  margin:26px auto 0;
  padding:24px;
  border:1px solid rgba(28,26,23,.10);
  background:#fff;
  color:var(--pdp-gray,#817a70);
  font-family:'Jost',sans-serif;
  font-size:12px;
  text-align:center;
}

.pdp-empty-reset{
  margin-left:6px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--pdp-pro-card-gold);
  text-decoration:underline;
  cursor:pointer;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width:1120px){
  .pdp-pro-resource-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .pdp-pro-resource-topbar{ grid-template-columns:1fr; }
  .pdp-pro-search-types--library{ justify-content:flex-start; overflow-x:auto; scrollbar-width:none; }
  .pdp-pro-search-types--library::-webkit-scrollbar{ display:none; }
}

@media (max-width:780px){
  .pdp-pro-resource-tools{ margin-top:26px; }
  .pdp-pro-resource-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .pdp-pro-resource-topbar{ gap:12px; padding-bottom:14px; }
  .pdp-pro-resource-body{ min-height:170px; padding:17px 16px 16px; }
  .pdp-pro-resource-title{ font-size:17px; }
  .pdp-pro-resource-open{ opacity:1; transform:none; }
}

@media (max-width:540px){
  .pdp-pro-resource-grid{ grid-template-columns:1fr; gap:18px; }
  .pdp-pro-resource-cover{ aspect-ratio:16 / 10; }
  .pdp-pro-resource-body{ min-height:0; padding:19px 18px 17px; }
  .pdp-pro-resource-title{ font-size:20px; }
  .pdp-pro-resource-desc{ font-size:12px !important; }
  .pdp-pro-resource-foot{ align-items:center; }
  .pdp-pro-search-types--library .pdp-fp-pill,
  .pdp-pro-cat-pill{ min-height:44px; }
}

@media (hover:none) and (pointer:coarse){
  .pdp-pro-resource-card:hover{ transform:none; box-shadow:none; }
  .pdp-pro-resource-open{ opacity:1; transform:none; }
}


/* ========================================================================== 
   PIERREDEPLAN — Correctif Newsletter + Footer
   À charger APRÈS style.css / style-responsive.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   NEWSLETTER — desktop premium + comportement responsive propre
   -------------------------------------------------------------------------- */
.pdp-news .pdp-newsletter {
  width: 100%;
  max-width: none;
  margin: 64px 0 0 !important;
  padding: 34px 38px !important;
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
  align-items: center;
  gap: 34px 52px;
  background: #f7f4ee;
  border: 1px solid rgba(176, 141, 87, .18);
}

.pdp-newsletter-txt {
  min-width: 0 !important;
}

.pdp-newsletter-h {
  margin: 0 0 7px !important;
  font-size: clamp(22px, 2vw, 28px) !important;
  line-height: 1.18;
  font-weight: 300 !important;
  color: var(--pdp-ink, #2a2722) !important;
}

.pdp-newsletter-sub {
  margin: 0 !important;
  max-width: 560px;
  font-size: 13px !important;
  line-height: 1.65;
  color: #736b61 !important;
}

.pdp-newsletter-form {
  width: 100%;
  max-width: none !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px !important;
  align-items: stretch;
}

.pdp-newsletter-form input[type="email"] {
  width: 100% !important;
  min-width: 0;
  height: 48px;
  box-sizing: border-box;
  padding: 0 16px !important;
  border: 1px solid #ddd6ca !important;
  background: #fff !important;
  color: var(--pdp-ink, #2a2722) !important;
}

.pdp-newsletter-form input[type="email"]::placeholder {
  color: #a39b91;
  opacity: 1;
}

/* .pdp-btn-submit est globalement width:100% dans le thème : on l'annule ici. */
.pdp-newsletter-form .pdp-btn-submit {
  width: auto !important;
  min-width: 132px;
  height: 48px;
  margin: 0 !important;
  padding: 0 22px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Compatible avec un futur formulaire Brevo / CF7 placé dans le même bloc. */
.pdp-newsletter-form form,
.pdp-newsletter-form .wpcf7-form,
.pdp-newsletter-form .sib_signup_form,
.pdp-newsletter-form .sib_signup_box_inside_1 {
  width: 100%;
  margin: 0;
}

/* --------------------------------------------------------------------------
   FOOTER — reset des boutons + grille lisible sur desktop
   -------------------------------------------------------------------------- */
.pdp-footer {
  padding: 70px max(5%, 28px) 28px !important;
}

.pdp-footer-grid {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto 54px !important;
  display: grid !important;
  grid-template-columns: minmax(230px, 1.55fr) repeat(3, minmax(145px, .85fr)) minmax(170px, 1fr) !important;
  gap: 42px 52px !important;
  align-items: start;
}

.pdp-footer-brand {
  min-width: 0;
  padding-right: 18px;
}

.pdp-footer .pdp-logo {
  display: inline-flex !important;
  margin-bottom: 20px;
}

.pdp-footer .pdp-logo img {
  width: auto !important;
  height: 70px !important;
  max-height: none !important;
  object-fit: contain;
}

.pdp-footer-tagline {
  max-width: 310px;
  margin-bottom: 20px !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: rgba(244,240,234,.54) !important;
}

.pdp-footer-address {
  font-size: 13px !important;
  line-height: 1.75 !important;
  color: rgba(244,240,234,.40) !important;
}

.pdp-footer-address a {
  color: rgba(244,240,234,.72) !important;
  text-decoration: none !important;
}

/* IMPORTANT : ces titres sont des <button>; sans reset le navigateur crée les
   rectangles blancs visibles sur la capture. */
.pdp-footer .pdp-footer-col-h,
.pdp-footer .pdp-footer-toggle {
  width: 100%;
  min-height: 0;
  margin: 0 0 17px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0;
  box-shadow: none !important;
  background: transparent !important;
  appearance: none;
  -webkit-appearance: none;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  cursor: default;
  color: rgba(244,240,234,.58) !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 10px !important;
  line-height: 1.25;
  letter-spacing: .18em !important;
  text-transform: uppercase;
}

.pdp-footer-toggle-icon {
  display: none;
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 0;
}

.pdp-footer-panel {
  display: block;
  height: auto;
  overflow: visible;
}

.pdp-footer-links li {
  margin: 0 0 8px !important;
}

.pdp-footer-links li a {
  display: inline-block;
  font-size: 13px !important;
  line-height: 1.55;
  color: rgba(244,240,234,.52) !important;
}

.pdp-footer-links li a:hover,
.pdp-footer-links li a:focus-visible {
  color: #f4f0ea !important;
}

.pdp-footer-stack {
  display: grid;
  gap: 30px;
  align-content: start;
}

.pdp-footer-bottom {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding-top: 22px !important;
}

.pdp-footer-copy {
  color: rgba(244,240,234,.34) !important;
}

.pdp-footer-socials a {
  color: rgba(244,240,234,.46) !important;
}

/* --------------------------------------------------------------------------
   TABLETTE
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .pdp-news .pdp-newsletter {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .pdp-newsletter-form {
    max-width: 680px !important;
  }

  .pdp-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 34px 42px !important;
  }

  .pdp-footer-brand {
    grid-column: 1 / -1;
    padding-right: 0;
  }

  .pdp-footer-tagline {
    max-width: 520px;
  }
}

/* --------------------------------------------------------------------------
   MOBILE — newsletter verticale + vrais accordéons footer
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .pdp-news .pdp-newsletter {
    margin-top: 46px !important;
    padding: 26px 20px !important;
    gap: 22px;
  }

  .pdp-newsletter-h {
    font-size: 22px !important;
  }

  .pdp-newsletter-form {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  .pdp-newsletter-form .pdp-btn-submit {
    width: 100% !important;
  }

  .pdp-footer {
    padding: 48px 22px 24px !important;
  }

  .pdp-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-bottom: 34px !important;
  }

  .pdp-footer-brand {
    grid-column: auto;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(244,240,234,.10);
  }

  .pdp-footer .pdp-logo img {
    width: 128px !important;
  }

  .pdp-footer-group,
  .pdp-footer-stack .pdp-footer-group {
    margin: 0 !important;
    border-bottom: 1px solid rgba(244,240,234,.10);
  }

  .pdp-footer-stack {
    display: block;
  }

  .pdp-footer .pdp-footer-col-h,
  .pdp-footer .pdp-footer-toggle {
    margin: 0 !important;
    padding: 17px 0 !important;
    cursor: pointer;
    font-size: 11px !important;
    color: rgba(244,240,234,.72) !important;
  }

  .pdp-footer-toggle-icon {
    display: block;
    transition: transform .22s ease;
  }

  .pdp-footer-panel {
    display: none;
    padding: 0 0 18px;
  }

  .pdp-footer-group.is-open > .pdp-footer-panel {
    display: block;
  }

  .pdp-footer-group.is-open > .pdp-footer-toggle .pdp-footer-toggle-icon {
    transform: rotate(45deg);
  }

  .pdp-footer-links li {
    margin-bottom: 10px !important;
  }

  .pdp-footer-links li a {
    font-size: 14px !important;
  }

  .pdp-footer-bottom {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .pdp-footer-socials {
    width: 100%;
    gap: 16px 20px !important;
  }
}


/* ========================================================================== 
   2026-09-07 — Lisibilité visiteurs et catalogue sur ordinateur.
   Couleurs ciblées : ne pas assombrir globalement --pdp-gray, également utilisé
   sur les photos et fonds sombres. Les grands titres restent inchangés.
   ========================================================================== */
body:not(.pdp-theme-dark) :is(
  .pdp-page-sub, .pdp-pstat-label, .pdp-step-lead,
  .pdp-coloris-feature-desc, .pdp-mat-desc,
  .pdp-fp-hint, .pdp-fp-count, .pdp-fp-row-count,
  .pdp-fp-fin-desc, .pdp-fp-fin-count, .pdp-fp-mat span,
  .pdp-rcard-loc, .pdp-ccard-mat, .pdp-ccard-avail,
  .pdp-modal-sub, .pdp-modal-desc, .pdp-spec-k,
  .pdp-gammes-head p, .pdp-gamme-sub, .pdp-help-sub,
  .pdp-bc-lead, .pdp-bc-start-card p, .pdp-bc-mat-sub,
  .pdp-bc-mat-usages, .pdp-bc-cross-card p,
  .pdp-reassure-card p, .pdp-wh-step p, .pdp-wh-eng p,
  .pdp-wh-story-left p, .pdp-pj-path-sub, .pdp-pj-form-intro,
  .pdp-pj-form-note, .pdp-news-date, .pdp-news-excerpt,
  .pdp-newsletter-sub, .pdp-mag-feature-in p, .pdp-mag-count,
  .pdp-mag-card-date, .pdp-mag-card p, .pdp-mag-follow-txt p
){
  color:#655e55 !important;
  font-weight:400;
}

/* Libellés et saisie : plus de présence, sans alourdir les boutons. */
body:not(.pdp-theme-dark) :is(
  .pdp-pj-field label, .pdp-pr-field label,
  .pdp-cf7--devis label, .pdp-cf7--pro label
){
  color:#595249 !important;
  font-weight:500;
  font-size:12px;
  letter-spacing:.06em;
}
:is(.pdp-pj-field, .pdp-pr-field, .pdp-cf7--devis, .pdp-cf7--pro)
:is(input, select, textarea){ font-weight:400; }
body:not(.pdp-theme-dark) :is(.pdp-pj-field, .pdp-pr-field, .pdp-cf7--devis, .pdp-cf7--pro)
:is(input, textarea)::placeholder{ color:#71695f; opacity:1; }

/* Informations du coloris, y compris lorsque son nom occupe deux lignes. */
.pdp-ccard-mat{ font-size:11px; letter-spacing:.07em; line-height:1.5; }
.pdp-ccard-avail{ font-size:10px; letter-spacing:.06em; line-height:1.5; }

/* Le mode Nuancier conserve ses propres colonnes ; mobile/tablette inchangés. */
@media (min-width:981px) and (max-width:1440px){
  .pdp-cgrid:not(.is-nuancier){
    grid-template-columns:repeat(4, minmax(0,1fr)) !important;
    gap:20px;
  }
}

/* Sur les fonds sombres de l'accueil et du footer, éclaircir le texte. */
.pdp-hero-claim, .pdp-opt-sub{
  color:rgba(255,255,255,.82) !important;
  font-weight:400;
}
.pdp-footer-copy{
  color:rgba(244,240,234,.76) !important;
  font-weight:400;
  line-height:1.7;
}
.pdp-footer-copy a{
  color:inherit !important;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.pdp-footer-copy a:hover{ color:#fff !important; }
.pdp-footer-copy a:focus-visible{
  outline:2px solid currentColor;
  outline-offset:4px;
  border-radius:2px;
}

/* Accueil raccordé aux catalogues : cartes et commandes accessibles. */
#pdp-realisations :is(.pdp-real-featured-bg, .pdp-real-thumb-bg, .pdp-grid-bg, .pdp-marche-bg){
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
#pdp-realisations .pdp-real-thumb{
  position:relative; padding:0; border:0; font:inherit;
  text-align:left; color:inherit; cursor:pointer; background:#2a2722;
}
#pdp-realisations :is(.pdp-real-thumb-bg, .pdp-real-thumb-overlay, .pdp-real-thumb-cat, .pdp-real-thumb-name){ display:block; }
#pdp-realisations .pdp-real-thumb-bg{ width:100%; height:100%; }
#pdp-realisations .pdp-grid-item[hidden]{ display:none !important; }
#pdp-realisations :is(.pdp-grid-item, .pdp-marche-item){ display:block; color:inherit; text-decoration:none; }
#pdp-realisations .pdp-home-usages-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  grid-template-rows:auto !important;
}
#pdp-realisations .pdp-home-usages-grid .pdp-marche-item{
  grid-column:auto !important; grid-row:auto !important; min-height:300px;
}
.pdp-home-selection-note{ margin:0; padding:12px 24px; color:#655e55; font:400 14px/1.6 'Jost',sans-serif; }
#pdp-realisations :is(a, button):focus-visible{ outline:3px solid #b08d57; outline-offset:-3px; }
.pdp-coloris-feature-visual > a{ display:block; width:100%; height:100%; }
.pdp-coloris-feature-visual > a > img{ width:100%; height:100%; object-fit:cover; }
.pdp-news-grid > a.pdp-news-card{ display:block; color:inherit; text-decoration:none; }
.pdp-home-news-image{ display:block; width:100%; height:100%; object-fit:cover; }
.pdp-news-card--text{ padding:28px; background:#f4f2ee; border:1px solid #e8e4dc; }
.pdp-home-news-category{ color:#655e55; font:500 12px/1.5 'Jost',sans-serif; text-transform:uppercase; }
.pdp-home-news-read{ display:block; margin-top:18px; font:500 13px/1.5 'Jost',sans-serif; text-decoration:underline; text-underline-offset:4px; }
.pdp-news-card:focus-visible, .pdp-coloris-project:focus-visible{ outline:3px solid #b08d57; outline-offset:4px; }
@media(max-width:620px){
  #pdp-realisations .pdp-home-usages-grid{ grid-template-columns:1fr !important; }
  #pdp-realisations .pdp-home-usages-grid .pdp-marche-item{ min-height:240px; }
}
#pdp-realisations .pdp-real-thumb-bg{ position:absolute; inset:0; }
#pdp-realisations :is(.pdp-real-meta, .pdp-grid-mat, .pdp-marche-sub){ color:rgba(255,255,255,.85) !important; }


/* ========================================================================== 
   CORRECTIFS UX MOBILE — MENU / PARCOURS / FILTRES
   Version : 2026-09-07 (soir)
   --------------------------------------------------------------------------
   - Menu : backdrop-filter du header créait un containing block pour le nav
     position:fixed sur certains navigateurs -> panneau limité à la hauteur du header.
   - Parcours : étape active recentrée automatiquement par custom.js au scroll vertical.
   - Filtres Inspirations / Couleurs : même structure visuelle + accès PYROLAVE.
   ========================================================================== */

/* 01. MENU MOBILE : vrai panneau viewport, pas un enfant "coincé" dans le header. */
@media (max-width:980px){
  .pdp-header{
    z-index:1000 !important;
    /* Important : backdrop-filter peut devenir le containing block d'un enfant fixed. */
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    background:rgba(255,255,255,.985) !important;
  }
  .pdp-burger{ position:relative; z-index:1002 !important; }

  .pdp-nav{
    position:fixed !important;
    top:calc(var(--pdp-admin-h, 0px) + var(--pdp-header-h, 70px)) !important;
    left:0 !important;
    right:auto !important;
    bottom:auto !important;
    width:100vw !important;
    height:calc(100dvh - var(--pdp-admin-h, 0px) - var(--pdp-header-h, 70px)) !important;
    max-height:none !important;
    min-height:0 !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:clamp(18px,4.5vh,34px) max(22px,env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-right)) !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:#fbfaf7 !important;
    box-shadow:0 24px 60px rgba(28,26,23,.12);
    z-index:1001 !important;
  }
  @supports not (height:100dvh){
    .pdp-nav{ height:calc(100vh - var(--pdp-admin-h, 0px) - var(--pdp-header-h, 70px)) !important; }
  }

  .pdp-nav > a{
    flex:0 0 auto !important;
    width:100% !important;
    min-height:54px !important;
    height:auto !important;
    padding:16px 2px !important;
    display:flex !important;
    align-items:center !important;
    line-height:1.25 !important;
    font-size:14px !important;
    letter-spacing:.12em !important;
    white-space:normal !important;
    border-bottom:1px solid rgba(42,39,34,.10) !important;
  }
  .pdp-nav > a:first-child{ border-top:1px solid rgba(42,39,34,.10) !important; }

  .pdp-nav .pdp-nav-mobile-ctas{
    flex:0 0 auto !important;
    width:100% !important;
    margin-top:auto !important;
    padding-top:24px !important;
    padding-bottom:2px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  .pdp-nav .pdp-nav-mobile-ctas a{
    width:100% !important;
    min-height:48px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-bottom:0 !important;
  }
  body.pdp-menu-open{
    overflow:hidden !important;
    overscroll-behavior:none;
  }
}

/* 02. PARCOURS MOBILE : affordance de swipe + auto-focus visuel de l'étape courante. */
@media (max-width:760px){
  .pdp-profil-parcours{
    position:relative;
  }
  .pdp-parcours .pdp-pp-steps,
  .pdp-parcours-sticky .pdp-pp-steps{
    scroll-behavior:smooth;
    scroll-padding-inline:var(--pdp-gutter);
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
    padding-right:max(var(--pdp-gutter),18vw) !important; /* laisse voir qu'une suite existe */
  }

  .pdp-parcours .pdp-pp-step,
  .pdp-parcours-sticky .pdp-pp-step{
    flex-basis:min(72vw,270px) !important;
    transition:border-color .22s ease, background .22s ease, box-shadow .22s ease, opacity .22s ease !important;
    opacity:.64;
  }
  .pdp-parcours .pdp-pp-step.active,
  .pdp-parcours-sticky .pdp-pp-step.active{
    opacity:1;
    border-color:rgba(176,141,87,.72) !important;
    background:#fffdf9 !important;
    box-shadow:0 8px 24px rgba(42,39,34,.08);
  }
  .pdp-parcours .pdp-pp-step.active .pdp-pp-page,
  .pdp-parcours-sticky .pdp-pp-step.active .pdp-pp-page{
    color:var(--pdp-gold,#b08d57) !important;
  }

  .pdp-parcours-sticky .pdp-pp-step{
    flex-basis:min(60vw,225px) !important;
    min-height:52px !important;
  }

  .pdp-parcours-mobile-hint{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:7px var(--pdp-gutter) 0;
    font-family:'Jost',sans-serif;
    font-size:10px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--pdp-gray,#8a857c);
    transition:opacity .2s ease;
  }
  .pdp-parcours-mobile-hint span:last-child{
    color:var(--pdp-gold,#b08d57);
    font-size:16px;
    line-height:1;
  }
  .pdp-profil-parcours.has-been-explored .pdp-parcours-mobile-hint,
  .pdp-profil-parcours.pdp-parcours-sticky .pdp-parcours-mobile-hint{
    display:none;
  }

  /* léger fondu à droite = second indice visuel de contenu horizontal */
  .pdp-profil-parcours:not(.pdp-parcours-sticky)::after{
    content:'';
    position:absolute;
    z-index:5;
    top:0;
    right:0;
    width:34px;
    height:86px;
    pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.96));
  }
}

/* 03. FILTRES : vocabulaire visuel commun Inspirations / Couleurs. */
.pdp-fpanel--inspirations,
.pdp-fpanel--couleurs{
  box-shadow:0 10px 34px rgba(42,39,34,.035);
}
.pdp-fpanel--inspirations .pdp-fp-group,
.pdp-fpanel--couleurs .pdp-fp-group{
  position:relative;
}
.pdp-fpanel--inspirations .pdp-fp-title,
.pdp-fpanel--couleurs .pdp-fp-title{
  letter-spacing:.18em;
}
.pdp-fpanel--inspirations .pdp-fp-pill.active{
  color:var(--pdp-gold,#b08d57) !important;
  background:rgba(176,141,87,.07) !important;
  border-color:var(--pdp-gold,#b08d57) !important;
}
.pdp-fpanel--inspirations .pdp-fp-pill:hover{
  background:rgba(176,141,87,.035);
}
.pdp-fpanel--inspirations .pdp-fp-mat,
.pdp-fpanel--couleurs .pdp-fp-mat{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.pdp-fpanel--inspirations .pdp-fp-mat.active,
.pdp-fpanel--couleurs .pdp-fp-mat.active{
  color:var(--pdp-gold,#b08d57);
  border-color:var(--pdp-gold,#b08d57);
  background:rgba(176,141,87,.06);
}
.pdp-fp-pyrolave-arr::before{
  content:'↗';
}

@media (max-width:980px){
  .pdp-fpanel--inspirations .pdp-fpanel-head,
  .pdp-fpanel--couleurs .pdp-fpanel-head{
    min-height:56px;
  }
  .pdp-fpanel--inspirations.is-open .pdp-fp-group,
  .pdp-fpanel--couleurs.is-open .pdp-fp-group{
    padding-top:20px;
    padding-bottom:20px;
  }
  .pdp-fpanel--inspirations .pdp-fp-mats,
  .pdp-fpanel--couleurs .pdp-fp-mats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:420px){
  .pdp-fpanel--inspirations .pdp-fp-mats,
  .pdp-fpanel--couleurs .pdp-fp-mats{
    grid-template-columns:1fr;
  }
}

/* Recette septembre : logo, visionneuse et pièces jointes. */
.pdp-header .pdp-logo img{width:clamp(190px,16vw,250px);height:auto;max-width:none;max-height:75px;object-fit:contain;}
@media(min-width:981px) and (max-width:1120px){.pdp-header .pdp-logo img{width:190px;max-height:54px;}.pdp-header{gap:10px;}.pdp-nav a{padding-inline:6px;}}
@media(max-width:980px){.pdp-header .pdp-logo img{width:clamp(180px,48vw,220px);max-width:calc(100vw - 100px);max-height:52px;}}
.pdp-gallery-frame{position:relative;isolation:isolate;}
.pdp-gallery-frame [data-modal-img]{cursor:zoom-in;}
.pdp-gallery-frame [data-modal-img]:focus-visible{outline:3px solid #b08d57;outline-offset:-4px;}
.pdp-gallery-controls{position:absolute;inset:0;pointer-events:none;z-index:1;}
.pdp-gallery-controls button{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid rgba(255,255,255,.8);border-radius:50%;background:rgba(255,255,255,.94);color:#2a2722;box-shadow:0 2px 12px rgba(0,0,0,.22);font:24px/1 sans-serif;cursor:pointer;pointer-events:auto;}
.pdp-gallery-controls .pdp-gallery-prev{left:12px;}
.pdp-gallery-controls .pdp-gallery-next{right:12px;}
.pdp-gallery-controls button:hover{background:#fff;}
.pdp-gallery-count{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);padding:4px 10px;border-radius:16px;background:rgba(25,24,22,.72);color:#fff;font-size:12px;line-height:1.5;}
.pdp-gallery-controls [hidden]{display:none!important;}
.pdp-gallery-controls button:focus-visible,.pdp-image-viewer button:focus-visible,.pdp-attachment-clear:focus-visible{outline:3px solid #b08d57;outline-offset:3px;}
@media(max-width:600px){.pdp-gallery-controls button{width:44px;height:44px;}.pdp-gallery-controls .pdp-gallery-prev{left:8px;}.pdp-gallery-controls .pdp-gallery-next{right:8px;}}
.pdp-image-viewer{position:fixed;inset:0;box-sizing:border-box;width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;margin:0;padding:64px 20px 20px;border:0;background:#191816;color:#fff;}
.pdp-image-viewer::backdrop{background:rgba(0,0,0,.9);}
.pdp-image-viewer-visual{width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:contain;}
.pdp-image-viewer-close{position:absolute;right:20px;top:12px;min-height:44px;padding:10px 18px;background:#fff;color:#222;border:0;font:inherit;cursor:pointer;}
.pdp-attachments{margin-top:20px;}
.pdp-attachments input[type=file]{width:100%;height:auto;padding:12px;border:1px solid #c4b6a1;box-sizing:border-box;}
.pdp-attachments input::file-selector-button{padding:10px;margin-right:12px;border:0;background:#eae2d5;color:#2a2722;cursor:pointer;}
.pdp-attachments p,.pdp-attachments ul{font-size:13px;line-height:1.6;color:#565048;overflow-wrap:anywhere;}
.pdp-attachments ul{padding-left:20px;}
.pdp-attachment-clear{padding:8px 12px;border:1px solid #c4b6a1;background:transparent;color:#2a2722;cursor:pointer;}
.pdp-attachment-clear[hidden]{display:none;}

/* Gammes quartz : interactions explicites et accessibles. */
.pdp-gamme-sw-button{
  appearance:none;
  flex:0 0 auto;
  padding:0;
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.pdp-gamme-sw-button:hover{
  transform:translateY(-2px) scale(1.06);
  border-color:var(--pdp-gold,#b08d57);
  box-shadow:0 5px 14px rgba(42,39,34,.18);
}
.pdp-gamme-sw-button:focus-visible,
.pdp-gamme-link:focus-visible{
  outline:3px solid var(--pdp-gold,#b08d57);
  outline-offset:3px;
}
.pdp-gamme-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:16px;
  color:var(--pdp-ink,#2a2722);
  font-family:'Jost',sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  line-height:1.4;
  text-decoration:none;
  text-transform:uppercase;
}
.pdp-gamme-link span{color:var(--pdp-gold,#b08d57);font-size:18px;transition:transform .2s ease;}
.pdp-gamme-link:hover{color:var(--pdp-gold,#b08d57);}
.pdp-gamme-link:hover span{transform:translateX(4px);}
@media(max-width:600px){
 .pdp-gamme-sw-button{width:40px;height:40px;}
 .pdp-gamme-link{min-height:44px;}
}

/* Petit ordinateur : conserver les deux accès d'action dans le header. */
@media(min-width:981px) and (max-width:1120px){
 .pdp-header{padding-inline:18px!important;gap:8px!important;}
 .pdp-header .pdp-logo img{width:150px!important;max-height:48px!important;}
 .pdp-nav a{padding-inline:4px!important;font-size:9px!important;letter-spacing:.055em!important;}
 .pdp-nav-right{gap:6px!important;}
 .pdp-nav-right .pdp-btn-nav-ghost{display:inline-flex!important;font-size:10px!important;white-space:nowrap;}
 .pdp-nav-right .pdp-btn-nav-fill{padding:8px 10px!important;font-size:10px!important;white-space:nowrap;}
}