/* ============================================================
   PAYNELIA.COM — CSS COMMUN — v1.0
   SASU PAYNEL · Wilfrid Paynel · Anglet (64)
   Charte : #FF3B00 · Bebas Neue + Syne + DM Mono
   Inspiration : Fulfiller · Easyflyer · Realisaprint
   ============================================================ */

/* ========== IMPORTS GOOGLE FONTS ========== */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@400;500&family=Syne:wght@400;500;600;700;800&display=swap');

/* ========== DESIGN TOKENS ========== */
:root{
  /* Couleurs principales */
  --pn-orange:        #FF3B00;
  --pn-orange-hover:  #D93000;
  --pn-orange-light:  #FFE5DC;
  --pn-black:         #111110;
  --pn-black-soft:    #1A1A1A;
  --pn-white:         #FFFFFF;
  --pn-cream:         #F7F7F5;
  --pn-cream-dark:    #EFEFEC;
  --pn-gray-900:      #222220;
  --pn-gray-700:      #555550;
  --pn-gray-500:      #888880;
  --pn-gray-300:      #C8C8C4;
  --pn-gray-100:      #E8E8E4;

  /* Couleurs signalétique */
  --pn-green:         #16A34A;
  --pn-green-soft:    #DCFCE7;
  --pn-blue:          #144089;
  --pn-blue-soft:     #E0EAFB;
  --pn-red-error:     #D0011B;
  --pn-yellow:        #F4C430;
  --pn-yellow-soft:   #FFF3C4;

  /* Labels ton sur ton (Easyflyer inspired) */
  --pn-label-new-bg:        #FFE5DC;
  --pn-label-new-text:      #D93000;
  --pn-label-promo-bg:      #FFF3C4;
  --pn-label-promo-text:    #9B6B00;
  --pn-label-top-bg:        #DCFCE7;
  --pn-label-top-text:      #137C3C;
  --pn-label-pro-bg:        #E0EAFB;
  --pn-label-pro-text:      #144089;

  /* Bordures / séparateurs */
  --pn-border:        rgba(0,0,0,.09);
  --pn-border-strong: rgba(0,0,0,.16);
  --pn-shadow-sm:     0 1px 2px rgba(17,17,16,.04);
  --pn-shadow:        0 4px 16px rgba(17,17,16,.06);
  --pn-shadow-lg:     0 16px 48px rgba(17,17,16,.12);

  /* Radius */
  --pn-radius-sm:  4px;
  --pn-radius:     8px;
  --pn-radius-lg:  12px;
  --pn-radius-xl:  24px;
  --pn-radius-signature: 50px; /* bottom-right signature Easyflyer */

  /* Espacements */
  --pn-pad-2:  4px;
  --pn-pad-4:  8px;
  --pn-pad-6:  12px;
  --pn-pad-8:  16px;
  --pn-pad-12: 24px;
  --pn-pad-16: 32px;
  --pn-pad-20: 40px;
  --pn-pad-24: 48px;
  --pn-pad-32: 64px;
  --pn-pad-40: 80px;

  /* Typographie — échelle Easyflyer 8 niveaux nommés */
  --pn-font-hero:  'Bebas Neue', Impact, sans-serif;
  --pn-font-head:  'Syne', -apple-system, BlinkMacSystemFont, sans-serif;
  --pn-font-body:  'Syne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pn-font-mono:  'DM Mono', 'SF Mono', Menlo, Consolas, monospace;

  --pn-size-claim:        96px;  /* hero grand nombre */
  --pn-size-title-big:    56px;  /* H1 landing */
  --pn-size-title-medium: 40px;  /* H1 page produit */
  --pn-size-title-small:  28px;  /* H2 */
  --pn-size-subtitle:     20px;  /* H3 */
  --pn-size-body-big:     18px;  /* intro paragraph */
  --pn-size-body:         15px;  /* courant */
  --pn-size-body-small:   13px;  /* labels / méta */

  --pn-weight-normal: 400;
  --pn-weight-medium: 500;
  --pn-weight-bold:   700;
  --pn-weight-extra:  800;

  /* Layout */
  --pn-max-width:     1440px;
  --pn-container-pad: 24px;
  --pn-nav-height:    72px;
  --pn-topbar-height: 36px;

  /* Transitions */
  --pn-ease:       cubic-bezier(.4, 0, .2, 1);
  --pn-dur-fast:   160ms;
  --pn-dur:        240ms;
  --pn-dur-slow:   400ms;

  /* Z-index */
  --pn-z-nav:      100;
  --pn-z-sticky:   90;
  --pn-z-modal:    1000;
  --pn-z-chatbot:  500;
}

/* ========== RESET ========== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  font-family:var(--pn-font-body);
  font-size:var(--pn-size-body);
  line-height:1.55;
  color:var(--pn-black);
  background:var(--pn-white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}
img,svg,video{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none; transition:color var(--pn-dur-fast) var(--pn-ease) }
a:hover{ color:var(--pn-orange) }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit }
ul,ol{ list-style:none }
input,select,textarea{ font:inherit; color:inherit }

/* ========== TYPOGRAPHIE (8 niveaux nommés) ========== */
.pn-claim{
  font-family:var(--pn-font-hero); font-weight:400;
  font-size:var(--pn-size-claim); line-height:.95;
  letter-spacing:-.02em; text-transform:uppercase;
}
.pn-title-big{
  font-family:var(--pn-font-hero); font-weight:400;
  font-size:var(--pn-size-title-big); line-height:1;
  letter-spacing:.005em; text-transform:uppercase;
}
.pn-title-medium{
  font-family:var(--pn-font-head); font-weight:var(--pn-weight-extra);
  font-size:var(--pn-size-title-medium); line-height:1.1;
  letter-spacing:-.01em;
}
.pn-title-small{
  font-family:var(--pn-font-head); font-weight:var(--pn-weight-bold);
  font-size:var(--pn-size-title-small); line-height:1.2;
}
.pn-subtitle{
  font-family:var(--pn-font-head); font-weight:var(--pn-weight-bold);
  font-size:var(--pn-size-subtitle); line-height:1.3;
}
.pn-body-big{
  font-family:var(--pn-font-body); font-weight:var(--pn-weight-normal);
  font-size:var(--pn-size-body-big); line-height:1.55;
}
.pn-body{ font-size:var(--pn-size-body); line-height:1.55 }
.pn-body-small{ font-size:var(--pn-size-body-small); line-height:1.5 }
.pn-mono{
  font-family:var(--pn-font-mono); font-weight:var(--pn-weight-medium);
  font-size:var(--pn-size-body-small); letter-spacing:.02em; text-transform:uppercase;
}

h1{ font-family:var(--pn-font-head); font-weight:var(--pn-weight-extra); font-size:var(--pn-size-title-medium); line-height:1.1; letter-spacing:-.01em; margin-bottom:var(--pn-pad-8) }
h2{ font-family:var(--pn-font-head); font-weight:var(--pn-weight-bold); font-size:var(--pn-size-title-small); line-height:1.2; margin-bottom:var(--pn-pad-6) }
h3{ font-family:var(--pn-font-head); font-weight:var(--pn-weight-bold); font-size:var(--pn-size-subtitle); line-height:1.3; margin-bottom:var(--pn-pad-4) }
h4{ font-family:var(--pn-font-head); font-weight:var(--pn-weight-bold); font-size:17px; line-height:1.3 }
p{ margin-bottom:var(--pn-pad-6) }
p:last-child{ margin-bottom:0 }

/* ========== LAYOUT ========== */
.pn-wrap{ max-width:var(--pn-max-width); margin:0 auto; padding:0 var(--pn-container-pad) }
.pn-section{ padding:var(--pn-pad-32) 0 }
.pn-section--tight{ padding:var(--pn-pad-20) 0 }
.pn-section--cream{ background:var(--pn-cream) }
.pn-section--dark{ background:var(--pn-black); color:var(--pn-white) }
.pn-section--dark h1,.pn-section--dark h2,.pn-section--dark h3{ color:var(--pn-white) }

/* ========== TOPBAR RÉASSURANCE (sans téléphone) ========== */
.pn-topbar{
  background:var(--pn-black); color:var(--pn-white);
  font-size:12px; letter-spacing:.02em;
  height:var(--pn-topbar-height); display:flex; align-items:center;
  border-bottom:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.pn-topbar-inner{
  max-width:var(--pn-max-width); margin:0 auto;
  padding:0 var(--pn-container-pad); width:100%;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.pn-topbar-list{ display:flex; gap:24px; align-items:center }
.pn-topbar-item{ display:inline-flex; align-items:center; gap:6px; opacity:.9 }
.pn-topbar-item svg{ width:14px; height:14px; color:var(--pn-orange) }
.pn-topbar-link{ color:rgba(255,255,255,.8); transition:color var(--pn-dur-fast) var(--pn-ease) }
.pn-topbar-link:hover{ color:var(--pn-orange) }
@media(max-width:991px){
  .pn-topbar{ font-size:11px; height:32px }
  .pn-topbar-list{ gap:14px }
  .pn-topbar-item:not(:first-child){ display:none }
}

/* ========== NAVIGATION (sticky, 2 niveaux) ========== */
.pn-nav{
  background:var(--pn-white);
  border-bottom:1px solid var(--pn-border);
  position:sticky; top:0; z-index:var(--pn-z-nav);
  transition:box-shadow var(--pn-dur) var(--pn-ease);
}
.pn-nav.is-scrolled{ box-shadow:var(--pn-shadow) }
.pn-nav-main{
  max-width:var(--pn-max-width); margin:0 auto;
  padding:0 var(--pn-container-pad); height:var(--pn-nav-height);
  display:flex; align-items:center; gap:24px;
}

/* Logo PAYNELIA — un seul mot */
.pn-logo{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--pn-font-hero); font-weight:400;
  font-size:32px; letter-spacing:.02em;
  line-height:1; text-transform:uppercase;
  color:var(--pn-black); transition:opacity var(--pn-dur-fast) var(--pn-ease);
}
.pn-logo:hover{ color:var(--pn-black); opacity:.85 }
.pn-logo-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--pn-orange); display:inline-block;
}
.pn-logo-text{ display:inline-flex; gap:0 } /* PAYNEL + IA attachés */
.pn-logo-paynel{ color:inherit }
.pn-logo-ia{ color:var(--pn-orange) }

/* Barre recherche pilule centrale (Easyflyer inspired) */
.pn-nav-search{
  flex:1; max-width:520px; position:relative;
}
.pn-nav-search input{
  width:100%; height:44px; padding:0 48px 0 20px;
  background:var(--pn-cream); border:1px solid transparent;
  border-radius:999px; font-size:14px;
  transition:border-color var(--pn-dur-fast) var(--pn-ease), background var(--pn-dur-fast) var(--pn-ease);
}
.pn-nav-search input:focus{
  outline:none; background:var(--pn-white);
  border-color:var(--pn-black);
}
.pn-nav-search-btn{
  position:absolute; right:4px; top:4px;
  width:36px; height:36px; border-radius:999px;
  background:var(--pn-orange); color:var(--pn-white);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--pn-dur-fast) var(--pn-ease);
}
.pn-nav-search-btn:hover{ background:var(--pn-orange-hover); color:var(--pn-white) }
.pn-nav-search-btn svg{ width:16px; height:16px }

/* Icônes nav droite (compte, panier, fichiers — sans téléphone) */
.pn-nav-icons{ display:flex; align-items:center; gap:8px }
.pn-nav-icon{
  display:inline-flex; flex-direction:column; align-items:center;
  padding:8px 12px; border-radius:var(--pn-radius);
  font-size:11px; font-weight:var(--pn-weight-medium);
  color:var(--pn-gray-700);
  transition:background var(--pn-dur-fast) var(--pn-ease), color var(--pn-dur-fast) var(--pn-ease);
  position:relative; text-align:center;
}
.pn-nav-icon:hover{ background:var(--pn-cream); color:var(--pn-black) }
.pn-nav-icon svg{ width:22px; height:22px; margin-bottom:2px }
.pn-nav-icon-badge{
  position:absolute; top:4px; right:4px;
  min-width:18px; height:18px; padding:0 5px;
  background:var(--pn-orange); color:var(--pn-white);
  border-radius:999px; font-size:11px; font-weight:var(--pn-weight-bold);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--pn-font-mono);
}

/* Account popover (Realisaprint inspired) */
.pn-account-popover{
  position:absolute; top:100%; right:0; margin-top:8px;
  width:320px; background:var(--pn-white);
  border:1px solid var(--pn-border); border-radius:var(--pn-radius-lg);
  box-shadow:var(--pn-shadow-lg); padding:24px;
  display:none; z-index:var(--pn-z-modal);
}
.pn-account-popover.is-open{ display:block }
.pn-account-tabs{ display:flex; margin-bottom:16px; border-bottom:1px solid var(--pn-border) }
.pn-account-tab{ flex:1; padding:12px; text-align:center; font-weight:var(--pn-weight-medium); color:var(--pn-gray-500); border-bottom:2px solid transparent; transition:all var(--pn-dur-fast) var(--pn-ease) }
.pn-account-tab.is-active{ color:var(--pn-black); border-bottom-color:var(--pn-orange) }

/* ========== MÉGA-MENU (swap images au hover — Realisaprint inspired) ========== */
.pn-megamenu{
  background:var(--pn-white); border-bottom:1px solid var(--pn-border);
}
.pn-megamenu-inner{
  max-width:var(--pn-max-width); margin:0 auto;
  padding:0 var(--pn-container-pad);
  display:flex; gap:4px; align-items:center;
}
.pn-megamenu-item{ position:relative }
.pn-megamenu-link{
  display:inline-flex; align-items:center; gap:6px;
  height:48px; padding:0 16px;
  font-family:var(--pn-font-head); font-weight:var(--pn-weight-bold);
  font-size:14px; letter-spacing:.01em; color:var(--pn-black);
  border-bottom:3px solid transparent;
  transition:border-color var(--pn-dur-fast) var(--pn-ease);
}
.pn-megamenu-link:hover,.pn-megamenu-item.is-open .pn-megamenu-link{
  color:var(--pn-black); border-bottom-color:var(--pn-orange);
}
.pn-megamenu-link .caret{ width:12px; height:12px; opacity:.5 }

.pn-megamenu-panel{
  position:absolute; top:100%; left:0;
  min-width:880px; background:var(--pn-white);
  border:1px solid var(--pn-border); border-top:0;
  border-radius:0 0 var(--pn-radius-lg) var(--pn-radius-lg);
  box-shadow:var(--pn-shadow-lg); padding:32px;
  display:none; z-index:var(--pn-z-nav);
  grid-template-columns:1fr 1fr 1fr 280px; gap:32px;
}
.pn-megamenu-item.is-open .pn-megamenu-panel{ display:grid }

.pn-megamenu-col-title{
  font-family:var(--pn-font-mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--pn-gray-500); margin-bottom:12px;
  padding-bottom:8px; border-bottom:1px solid var(--pn-border);
}
.pn-megamenu-link-item{
  display:block; padding:6px 0; font-size:14px;
  color:var(--pn-gray-700); transition:color var(--pn-dur-fast) var(--pn-ease);
}
.pn-megamenu-link-item:hover{ color:var(--pn-orange) }

/* Image preview qui swap au hover */
.pn-megamenu-preview{
  background:var(--pn-cream); border-radius:var(--pn-radius-lg);
  padding:20px; display:flex; flex-direction:column;
}
.pn-megamenu-preview-img{
  width:100%; height:180px; background:var(--pn-white) center/cover no-repeat;
  border-radius:var(--pn-radius); margin-bottom:12px;
  transition:opacity var(--pn-dur) var(--pn-ease);
}
.pn-megamenu-preview-title{ font-weight:var(--pn-weight-bold); margin-bottom:4px }
.pn-megamenu-preview-cta{
  margin-top:auto; display:inline-flex; align-items:center; gap:6px;
  color:var(--pn-orange); font-weight:var(--pn-weight-medium); font-size:13px;
}

/* ========== BOUTONS ========== */
.pn-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:14px 28px;
  font-family:var(--pn-font-head); font-weight:var(--pn-weight-bold);
  font-size:14px; letter-spacing:.02em;
  border-radius:999px; border:1px solid transparent;
  cursor:pointer; text-decoration:none;
  transition:all var(--pn-dur-fast) var(--pn-ease);
  white-space:nowrap;
}
.pn-btn--primary{ background:var(--pn-orange); color:var(--pn-white) }
.pn-btn--primary:hover{ background:var(--pn-orange-hover); color:var(--pn-white); transform:translateY(-1px) }
.pn-btn--black{ background:var(--pn-black); color:var(--pn-white) }
.pn-btn--black:hover{ background:var(--pn-gray-900); color:var(--pn-white) }
.pn-btn--outline{ background:transparent; color:var(--pn-black); border-color:var(--pn-black) }
.pn-btn--outline:hover{ background:var(--pn-black); color:var(--pn-white) }
.pn-btn--ghost{ background:transparent; color:var(--pn-black) }
.pn-btn--ghost:hover{ background:var(--pn-cream); color:var(--pn-black) }
.pn-btn--sm{ padding:10px 20px; font-size:13px }
.pn-btn--lg{ padding:18px 36px; font-size:16px }
.pn-btn--block{ width:100%; display:flex }
.pn-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important }

/* ========== LABELS TON SUR TON (Easyflyer 4 catégories) ========== */
.pn-label{
  display:inline-flex; align-items:center;
  padding:4px 10px; border-radius:999px;
  font-family:var(--pn-font-mono); font-size:10px; font-weight:var(--pn-weight-medium);
  letter-spacing:.06em; text-transform:uppercase;
}
.pn-label--new{      background:var(--pn-label-new-bg);   color:var(--pn-label-new-text) }
.pn-label--promo{    background:var(--pn-label-promo-bg); color:var(--pn-label-promo-text) }
.pn-label--top{      background:var(--pn-label-top-bg);   color:var(--pn-label-top-text) }
.pn-label--pro{      background:var(--pn-label-pro-bg);   color:var(--pn-label-pro-text) }

/* ========== CARDS PRODUITS (2 points à coche — Printoclock inspired) ========== */
.pn-grid-products{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
}
.pn-product-card{
  background:var(--pn-white); border:1px solid var(--pn-border);
  border-radius:var(--pn-radius-lg);
  overflow:hidden; position:relative;
  transition:transform var(--pn-dur) var(--pn-ease), box-shadow var(--pn-dur) var(--pn-ease), border-color var(--pn-dur-fast) var(--pn-ease);
  display:flex; flex-direction:column;
  /* Signature radius 50px bottom-right (Easyflyer) */
  border-bottom-right-radius:var(--pn-radius-signature);
}
.pn-product-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--pn-shadow-lg);
  border-color:var(--pn-black);
}
.pn-product-card-img{
  aspect-ratio:4/3; background:var(--pn-cream) center/cover no-repeat;
  position:relative;
}
.pn-product-card-labels{
  position:absolute; top:12px; left:12px;
  display:flex; flex-direction:column; gap:6px;
}
.pn-product-card-body{ padding:20px; display:flex; flex-direction:column; flex:1 }
.pn-product-card-title{
  font-family:var(--pn-font-head); font-weight:var(--pn-weight-bold);
  font-size:18px; line-height:1.25; margin-bottom:8px;
}
.pn-product-card-desc{
  font-size:13px; color:var(--pn-gray-700);
  margin-bottom:12px; line-height:1.4;
}
/* 2 points à coche (Printoclock) */
.pn-product-card-features{ margin-bottom:16px }
.pn-product-card-feature{
  display:flex; align-items:flex-start; gap:8px;
  font-size:13px; color:var(--pn-gray-700); margin-bottom:6px;
}
.pn-product-card-feature::before{
  content:''; flex-shrink:0;
  width:16px; height:16px; margin-top:2px;
  background:var(--pn-orange-light) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FF3B00'><path d='M6.5 11L3 7.5l1.4-1.4L6.5 8.2l5.1-5.1L13 4.5z'/></svg>") center/10px no-repeat;
  border-radius:50%;
}
.pn-product-card-footer{
  margin-top:auto; display:flex; justify-content:space-between; align-items:flex-end;
  padding-top:12px; border-top:1px solid var(--pn-border);
}
.pn-product-card-price{ display:flex; flex-direction:column; line-height:1.1 }
.pn-product-card-price-from{
  font-family:var(--pn-font-mono); font-size:10px;
  text-transform:uppercase; color:var(--pn-gray-500); letter-spacing:.08em;
}
.pn-product-card-price-value{
  font-family:var(--pn-font-hero); font-size:28px;
  color:var(--pn-black); letter-spacing:.01em;
}
.pn-product-card-price-tax{
  font-family:var(--pn-font-mono); font-size:10px;
  color:var(--pn-gray-500); margin-top:2px;
}

/* ========== AFFICHAGE PRIX HT + TTC (systématique) ========== */
.pn-price{
  display:inline-flex; flex-direction:column; line-height:1.1; gap:2px;
}
.pn-price-ttc{
  font-family:var(--pn-font-hero); font-size:28px;
  color:var(--pn-black); letter-spacing:.01em;
}
.pn-price-ht{
  font-family:var(--pn-font-mono); font-size:11px;
  color:var(--pn-gray-500); text-transform:uppercase; letter-spacing:.06em;
}
.pn-price--big .pn-price-ttc{ font-size:48px }
.pn-price--big .pn-price-ht{ font-size:13px }
.pn-price-delivery-note{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; color:var(--pn-green);
  font-weight:var(--pn-weight-medium); margin-top:4px;
}
.pn-price-delivery-note svg{ width:12px; height:12px }

/* ========== PAGE PRODUIT : LAYOUT 2 COLONNES ========== */
.pn-product-page{ padding:var(--pn-pad-12) 0 var(--pn-pad-32) }
.pn-product-breadcrumb{
  display:flex; align-items:center; gap:6px;
  font-family:var(--pn-font-mono); font-size:11px;
  color:var(--pn-gray-500); text-transform:uppercase;
  letter-spacing:.08em; margin-bottom:24px;
}
.pn-product-breadcrumb a:hover{ color:var(--pn-orange) }
.pn-product-breadcrumb .sep{ color:var(--pn-gray-300) }

.pn-product-layout{
  display:grid; grid-template-columns:1fr 360px;
  gap:40px; align-items:start;
}
.pn-product-main{ min-width:0 }
.pn-product-aside{ position:sticky; top:calc(var(--pn-nav-height) + 20px) }
@media(max-width:991px){
  .pn-product-layout{ grid-template-columns:1fr; gap:24px }
  .pn-product-aside{ position:static }
}

/* Hero produit */
.pn-product-hero{
  display:grid; grid-template-columns:1fr 1fr;
  gap:32px; margin-bottom:40px;
}
.pn-product-hero-img{
  aspect-ratio:1/1; background:var(--pn-cream) center/cover no-repeat;
  border-radius:var(--pn-radius-lg);
  border-bottom-right-radius:var(--pn-radius-signature);
}
.pn-product-hero-content{ display:flex; flex-direction:column; justify-content:center }
.pn-product-title{
  font-family:var(--pn-font-hero); font-size:var(--pn-size-title-medium);
  line-height:1; margin-bottom:12px; text-transform:uppercase; letter-spacing:.01em;
}
.pn-product-lead{
  font-size:var(--pn-size-body-big); color:var(--pn-gray-700);
  line-height:1.55; margin-bottom:24px;
}
.pn-product-features-list{ display:grid; gap:10px }
.pn-product-feature{
  display:flex; align-items:center; gap:10px;
  font-size:14px; color:var(--pn-black);
}
.pn-product-feature-icon{
  width:24px; height:24px; border-radius:50%;
  background:var(--pn-orange-light); color:var(--pn-orange);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.pn-product-feature-icon svg{ width:14px; height:14px }
@media(max-width:767px){
  .pn-product-hero{ grid-template-columns:1fr }
  .pn-product-title{ font-size:40px }
}

/* ========== CONFIGURATEUR (étapes) ========== */
.pn-config-steps{ display:flex; flex-direction:column; gap:24px }
.pn-config-step{
  background:var(--pn-white); border:1px solid var(--pn-border);
  border-radius:var(--pn-radius-lg); padding:24px;
}
.pn-config-step-head{
  display:flex; align-items:center; gap:12px; margin-bottom:16px;
}
.pn-config-step-num{
  width:32px; height:32px; border-radius:50%;
  background:var(--pn-black); color:var(--pn-white);
  font-family:var(--pn-font-hero); font-size:18px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.pn-config-step-title{
  font-family:var(--pn-font-head); font-weight:var(--pn-weight-bold);
  font-size:18px; line-height:1.2;
}
.pn-config-step-info{
  font-family:var(--pn-font-mono); font-size:11px;
  color:var(--pn-gray-500); margin-left:auto;
  text-transform:uppercase; letter-spacing:.05em;
}

/* Options en tuiles (format, grammage...) */
.pn-options-grid{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
}
.pn-option{
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:8px; padding:16px 12px; background:var(--pn-white);
  border:2px solid var(--pn-border); border-radius:var(--pn-radius);
  cursor:pointer; text-align:center;
  transition:all var(--pn-dur-fast) var(--pn-ease);
}
.pn-option:hover{ border-color:var(--pn-gray-500) }
.pn-option input{ position:absolute; opacity:0; pointer-events:none }
.pn-option.is-selected,.pn-option input:checked + .pn-option-inner,.pn-option:has(input:checked){
  border-color:var(--pn-orange); background:var(--pn-orange-light);
}
.pn-option-icon{ width:56px; height:56px; object-fit:contain }
.pn-option-label{
  font-size:13px; font-weight:var(--pn-weight-medium); color:var(--pn-black);
}
.pn-option-sub{
  font-family:var(--pn-font-mono); font-size:10px;
  color:var(--pn-gray-500); text-transform:uppercase; letter-spacing:.05em;
}

/* Dropdowns/selects stylés */
.pn-select{
  width:100%; height:48px; padding:0 16px;
  background:var(--pn-white); border:1px solid var(--pn-border);
  border-radius:var(--pn-radius); font-size:14px;
  cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23555'><path d='M5 8l5 5 5-5' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
  padding-right:44px;
}
.pn-select:focus{ outline:none; border-color:var(--pn-black) }

/* Résumé sticky (desktop) */
.pn-summary{
  background:var(--pn-black); color:var(--pn-white);
  border-radius:var(--pn-radius-lg);
  border-bottom-right-radius:var(--pn-radius-signature);
  padding:28px; display:flex; flex-direction:column; gap:16px;
}
.pn-summary-label{
  font-family:var(--pn-font-mono); font-size:11px;
  color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.08em;
}
.pn-summary-product{ font-family:var(--pn-font-hero); font-size:28px; line-height:1 }
.pn-summary-details{ font-size:13px; color:rgba(255,255,255,.7); line-height:1.5 }
.pn-summary-separator{ height:1px; background:rgba(255,255,255,.12); margin:4px 0 }
.pn-summary-price-block{ display:flex; flex-direction:column; gap:4px }
.pn-summary-price-ttc{ font-family:var(--pn-font-hero); font-size:48px; color:var(--pn-white); line-height:1 }
.pn-summary-price-ht{ font-family:var(--pn-font-mono); font-size:12px; color:rgba(255,255,255,.6); text-transform:uppercase }
.pn-summary-delivery{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; color:#4ADE80;
}
.pn-summary-delivery svg{ width:14px; height:14px }
.pn-summary-loading{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; color:rgba(255,255,255,.6);
}

/* Barre sticky mobile */
.pn-mobile-bar{
  position:fixed; bottom:0; left:0; right:0;
  background:var(--pn-white); border-top:1px solid var(--pn-border);
  padding:12px 16px; display:none; align-items:center; gap:12px;
  box-shadow:0 -8px 24px rgba(0,0,0,.08); z-index:var(--pn-z-sticky);
}
.pn-mobile-bar-price{ flex:1 }
.pn-mobile-bar-price-ttc{ font-family:var(--pn-font-hero); font-size:22px; line-height:1 }
.pn-mobile-bar-price-ht{ font-family:var(--pn-font-mono); font-size:10px; color:var(--pn-gray-500); text-transform:uppercase }
@media(max-width:991px){ .pn-mobile-bar{ display:flex } body.has-mobile-bar{ padding-bottom:80px } }

/* ========== BLOC RÉASSURANCE (pré-footer coloré — Easyflyer inspired) ========== */
.pn-reassure-block{
  background:var(--pn-orange); color:var(--pn-white);
  padding:var(--pn-pad-32) 0;
  border-radius:var(--pn-radius-xl);
  border-bottom-right-radius:80px;
  margin:var(--pn-pad-20) var(--pn-container-pad);
  max-width:calc(var(--pn-max-width) - 48px);
  margin-left:auto; margin-right:auto;
}
.pn-reassure-inner{
  display:grid; grid-template-columns:1fr 1fr;
  gap:40px; align-items:center; padding:0 48px;
}
.pn-reassure-title{
  font-family:var(--pn-font-hero); font-size:56px; line-height:1;
  text-transform:uppercase; letter-spacing:.01em;
}
.pn-reassure-text{ font-size:16px; margin-top:12px; opacity:.95 }
.pn-reassure-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--pn-white); color:var(--pn-orange);
  padding:16px 28px; border-radius:999px;
  font-family:var(--pn-font-head); font-weight:var(--pn-weight-bold);
  font-size:14px; text-transform:uppercase; letter-spacing:.04em;
  transition:transform var(--pn-dur-fast) var(--pn-ease);
}
.pn-reassure-cta:hover{ transform:translateY(-2px); color:var(--pn-orange) }
@media(max-width:767px){
  .pn-reassure-inner{ grid-template-columns:1fr; padding:0 24px }
  .pn-reassure-title{ font-size:36px }
}

/* ========== ACCORDÉONS (FAQ, SEO footer "Lire plus") ========== */
.pn-accordion{ border-bottom:1px solid var(--pn-border) }
.pn-accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:20px 0; text-align:left;
  font-family:var(--pn-font-head); font-weight:var(--pn-weight-bold);
  font-size:16px; color:var(--pn-black);
}
.pn-accordion-trigger-icon{
  width:32px; height:32px; border-radius:50%;
  background:var(--pn-cream); display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:transform var(--pn-dur) var(--pn-ease), background var(--pn-dur-fast) var(--pn-ease);
}
.pn-accordion.is-open .pn-accordion-trigger-icon{ background:var(--pn-orange); color:var(--pn-white); transform:rotate(45deg) }
.pn-accordion-trigger-icon svg{ width:14px; height:14px }
.pn-accordion-content{
  display:none; padding:0 0 20px; font-size:14px; color:var(--pn-gray-700); line-height:1.7;
}
.pn-accordion.is-open .pn-accordion-content{ display:block }

/* Lire plus (SEO footer — Printoclock) */
.pn-read-more{ position:relative }
.pn-read-more-content{
  max-height:180px; overflow:hidden;
  mask-image:linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, black 60%, transparent 100%);
}
.pn-read-more.is-expanded .pn-read-more-content{
  max-height:none; mask-image:none; -webkit-mask-image:none;
}
.pn-read-more-toggle{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:12px; color:var(--pn-orange);
  font-weight:var(--pn-weight-medium); font-size:13px;
}

/* ========== FORMULAIRES ========== */
.pn-field{ margin-bottom:16px }
.pn-field-label{
  display:block; font-size:12px; font-family:var(--pn-font-mono);
  text-transform:uppercase; letter-spacing:.06em; color:var(--pn-gray-700);
  margin-bottom:6px; font-weight:var(--pn-weight-medium);
}
.pn-field-label .req{ color:var(--pn-orange) }
.pn-input,.pn-textarea{
  width:100%; padding:12px 16px;
  background:var(--pn-white); border:1px solid var(--pn-border);
  border-radius:var(--pn-radius); font-size:14px;
  transition:border-color var(--pn-dur-fast) var(--pn-ease);
}
.pn-input:focus,.pn-textarea:focus{ outline:none; border-color:var(--pn-black) }
.pn-input:invalid:not(:placeholder-shown){ border-color:var(--pn-red-error) }
.pn-textarea{ min-height:120px; resize:vertical; font-family:var(--pn-font-body) }
.pn-fieldset{
  padding:20px; background:var(--pn-cream);
  border-radius:var(--pn-radius-lg); margin-bottom:20px;
}
.pn-fieldset-title{
  font-family:var(--pn-font-head); font-weight:var(--pn-weight-bold);
  font-size:18px; margin-bottom:16px;
}
.pn-grid-2{ display:grid; gap:16px; grid-template-columns:1fr 1fr }
@media(max-width:600px){ .pn-grid-2{ grid-template-columns:1fr } }

/* Checkbox custom */
.pn-checkbox{
  display:inline-flex; align-items:flex-start; gap:10px;
  cursor:pointer; font-size:14px; line-height:1.4;
}
.pn-checkbox input{ position:absolute; opacity:0 }
.pn-checkbox-box{
  width:20px; height:20px; border:2px solid var(--pn-border-strong);
  border-radius:var(--pn-radius-sm); background:var(--pn-white);
  flex-shrink:0; margin-top:2px;
  transition:all var(--pn-dur-fast) var(--pn-ease);
  display:flex; align-items:center; justify-content:center;
}
.pn-checkbox input:checked + .pn-checkbox-box{
  background:var(--pn-orange); border-color:var(--pn-orange);
}
.pn-checkbox-box svg{ width:12px; height:12px; color:var(--pn-white); opacity:0 }
.pn-checkbox input:checked + .pn-checkbox-box svg{ opacity:1 }

/* ========== BADGE AVIS GOOGLE ========== */
.pn-google-rating{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; background:var(--pn-white);
  border:1px solid var(--pn-border); border-radius:999px;
  font-size:13px;
}
.pn-google-rating-logo{ width:18px; height:18px }
.pn-google-rating-stars{ color:#FFC107; letter-spacing:1px; font-size:14px }
.pn-google-rating-value{ font-weight:var(--pn-weight-bold); color:var(--pn-black) }

/* ========== CAROUSEL (blog + engagements RSE) ========== */
.pn-carousel{ position:relative }
.pn-carousel-track{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding-bottom:4px;
}
.pn-carousel-track::-webkit-scrollbar{ display:none }
.pn-carousel-slide{ flex:0 0 auto; scroll-snap-align:start; width:320px }
.pn-carousel-nav{
  display:flex; gap:8px; margin-top:20px; justify-content:flex-end;
}
.pn-carousel-btn{
  width:40px; height:40px; border-radius:50%;
  background:var(--pn-white); border:1px solid var(--pn-border);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--pn-dur-fast) var(--pn-ease);
}
.pn-carousel-btn:hover{ background:var(--pn-black); color:var(--pn-white); border-color:var(--pn-black) }
.pn-carousel-btn svg{ width:16px; height:16px }

/* ========== FOOTER ========== */
.pn-footer{
  background:var(--pn-black); color:rgba(255,255,255,.75);
  padding:var(--pn-pad-32) 0 var(--pn-pad-12);
  margin-top:var(--pn-pad-32);
}
.pn-footer-cols{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:40px; margin-bottom:40px;
}
.pn-footer-brand .pn-logo{ color:var(--pn-white); font-size:40px; margin-bottom:16px }
.pn-footer-brand p{ font-size:13px; line-height:1.6; color:rgba(255,255,255,.6) }
.pn-footer-col-title{
  font-family:var(--pn-font-mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--pn-white); margin-bottom:16px; font-weight:var(--pn-weight-medium);
}
.pn-footer-link{
  display:block; padding:4px 0; font-size:13px;
  color:rgba(255,255,255,.6); transition:color var(--pn-dur-fast) var(--pn-ease);
}
.pn-footer-link:hover{ color:var(--pn-orange) }
.pn-footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
  font-size:12px; color:rgba(255,255,255,.5);
}
.pn-footer-legal{ display:flex; gap:16px; flex-wrap:wrap }
.pn-footer-legal a{ color:inherit }
.pn-footer-legal a:hover{ color:var(--pn-orange) }

/* Footer accordéon mobile (Printoclock inspired) */
@media(max-width:767px){
  .pn-footer-cols{ grid-template-columns:1fr; gap:0 }
  .pn-footer-col{ border-bottom:1px solid rgba(255,255,255,.12); padding:16px 0 }
  .pn-footer-col-title{
    margin-bottom:0; display:flex; justify-content:space-between; align-items:center;
    cursor:pointer; padding:8px 0;
  }
  .pn-footer-col-title::after{
    content:'+'; font-size:20px; color:var(--pn-white);
    transition:transform var(--pn-dur) var(--pn-ease);
  }
  .pn-footer-col.is-open .pn-footer-col-title::after{ transform:rotate(45deg) }
  .pn-footer-col-list{ display:none; padding-top:12px }
  .pn-footer-col.is-open .pn-footer-col-list{ display:block }
  .pn-footer-brand{ border-bottom:1px solid rgba(255,255,255,.12); padding-bottom:24px }
}

/* Paiement methods icônes footer */
.pn-footer-payments{
  display:flex; gap:8px; align-items:center; margin-top:16px; flex-wrap:wrap;
}
.pn-footer-payments img{ height:20px; opacity:.8; filter:brightness(0) invert(1) }

/* ========== CHATBOT TXIKI (widget bottom-right) ========== */
.pn-txiki-fab{
  position:fixed; bottom:24px; right:24px;
  width:60px; height:60px; border-radius:50%;
  background:var(--pn-orange); color:var(--pn-white);
  box-shadow:var(--pn-shadow-lg);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:var(--pn-z-chatbot);
  transition:transform var(--pn-dur-fast) var(--pn-ease);
}
.pn-txiki-fab:hover{ transform:scale(1.05); color:var(--pn-white) }
.pn-txiki-fab svg{ width:26px; height:26px }
@media(max-width:991px){ .pn-txiki-fab{ bottom:90px } }

.pn-txiki-panel{
  position:fixed; bottom:100px; right:24px;
  width:380px; max-height:600px; background:var(--pn-white);
  border-radius:var(--pn-radius-lg); box-shadow:var(--pn-shadow-lg);
  display:none; flex-direction:column; overflow:hidden;
  z-index:var(--pn-z-chatbot);
}
.pn-txiki-panel.is-open{ display:flex }
.pn-txiki-head{
  background:var(--pn-black); color:var(--pn-white);
  padding:16px 20px; display:flex; align-items:center; gap:12px;
}
.pn-txiki-head-avatar{
  width:36px; height:36px; border-radius:50%;
  background:var(--pn-orange); display:flex; align-items:center; justify-content:center;
  font-family:var(--pn-font-hero); font-size:16px;
}
.pn-txiki-head-title{ font-family:var(--pn-font-head); font-weight:var(--pn-weight-bold); font-size:14px }
.pn-txiki-head-sub{ font-size:11px; opacity:.7 }
.pn-txiki-body{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px }
.pn-txiki-msg{ max-width:80%; padding:10px 14px; border-radius:14px; font-size:13px; line-height:1.5 }
.pn-txiki-msg--bot{ background:var(--pn-cream); align-self:flex-start; border-bottom-left-radius:4px }
.pn-txiki-msg--user{ background:var(--pn-orange); color:var(--pn-white); align-self:flex-end; border-bottom-right-radius:4px }
.pn-txiki-input{ border-top:1px solid var(--pn-border); padding:12px; display:flex; gap:8px }
.pn-txiki-input input{
  flex:1; padding:10px 14px; border:1px solid var(--pn-border);
  border-radius:999px; font-size:13px;
}
.pn-txiki-input input:focus{ outline:none; border-color:var(--pn-orange) }
.pn-txiki-input button{
  width:36px; height:36px; border-radius:50%;
  background:var(--pn-orange); color:var(--pn-white);
  display:flex; align-items:center; justify-content:center;
}
.pn-txiki-input button svg{ width:14px; height:14px }

/* ========== UTILITAIRES ========== */
.pn-hidden{ display:none !important }
.pn-sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap }
.pn-text-center{ text-align:center }
.pn-text-muted{ color:var(--pn-gray-500) }
.pn-text-orange{ color:var(--pn-orange) }
.pn-flex{ display:flex }
.pn-flex-between{ display:flex; justify-content:space-between; align-items:center }
.pn-gap-1{ gap:4px } .pn-gap-2{ gap:8px } .pn-gap-3{ gap:12px } .pn-gap-4{ gap:16px }
.pn-mt-1{ margin-top:8px } .pn-mt-2{ margin-top:16px } .pn-mt-3{ margin-top:24px }
.pn-mb-1{ margin-bottom:8px } .pn-mb-2{ margin-bottom:16px } .pn-mb-3{ margin-bottom:24px }

/* ========== RESPONSIVE FINAL ========== */
@media(max-width:991px){
  :root{ --pn-size-title-big:40px; --pn-size-title-medium:32px; --pn-size-claim:64px }
  .pn-nav-main{ gap:12px }
  .pn-nav-search{ display:none }
  .pn-megamenu{ display:none } /* remplacé par menu burger mobile — à faire dans nav.php */
}
@media(max-width:600px){
  :root{ --pn-container-pad:16px; --pn-size-title-big:32px; --pn-size-title-medium:26px; --pn-size-claim:48px }
  .pn-section{ padding:40px 0 }
  .pn-btn{ padding:12px 22px; font-size:13px }
}

/* ========== ANIMATIONS ========== */
@keyframes pn-spin{ to{ transform:rotate(360deg) } }
.pn-spinner{
  width:16px; height:16px; border:2px solid currentColor; border-top-color:transparent;
  border-radius:50%; animation:pn-spin .8s linear infinite;
}
@keyframes pn-fade-in{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:translateY(0) } }
.pn-fade-in{ animation:pn-fade-in var(--pn-dur) var(--pn-ease) }

/* ========== FIN paynelia.css ========== */


/* PAYNELIA FIX MOBILE 22042026 */
@media (max-width: 520px) {
  .pn-toast {
    top: auto !important;
    bottom: 16px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(120%) !important;
    max-width: calc(100% - 24px) !important;
    width: 340px !important;
    border-radius: 12px !important;
    border-left: 4px solid #16A34A !important;
    border-top: 0 !important;
    padding: 14px 16px !important;
    pointer-events: none !important;
    transition: transform .3s ease-out !important;
  }
  .pn-toast.show {
    right: auto !important;
    transform: translateX(-50%) translateY(0) !important;
  }
  .pn-toast-link { pointer-events: auto !important; }
}