/*
* proparo-secondary.css
* CSS pixel-perfect pour les pages secondaires Proparo
* Agence Influa - Generative Engine Optimization
*
* Sections :
* 1. FAQ PAGE
* 2. QUI SOMMES-NOUS
* 3. ESPACE PRO
* 4. BLOG CATEGORIE
* 5. ARTICLE BLOG
* 6. PAGES LEGALES
* 7. PAGE 404
* 8. PHARMACIES
* 9. RESULTATS RECHERCHE
*/
/* ============================================================
SECTION 1 - FAQ PAGE
Source : /tmp/css_faq.txt
============================================================ */
/* Breadcrumb */
.bc-wrap{padding-top:16px;padding-bottom:4px;max-width:var(--container-max,1200px);margin:0 auto;padding-left:var(--container-pad,20px);padding-right:var(--container-pad,20px);}
.bc{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-hint);}
.bc a{color:var(--ink-hint);transition:color .15s;}
.bc a:hover{color:var(--brand);}
.bc-cur{color:var(--ink-mid);font-weight:500;}
/* Hero FAQ */
.faq-hero{padding:48px 0 64px;}
.faq-hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.hero-eyebrow{font-size:11px;font-weight:700;color:var(--brand);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:10px;}
.hero-eyebrow::before{content:'';width:20px;height:2px;background:var(--brand);border-radius:1px;}
.hero-h1{font-family:var(--font-d);font-size:clamp(36px,4vw,56px);font-weight:800;color:var(--ink);line-height:1.08;letter-spacing:-.03em;margin-bottom:16px;}
.hero-h1 em{font-style:italic;color:var(--brand);}
.hero-body{font-size:16px;color:var(--ink-mute);line-height:1.75;margin-bottom:28px;max-width:420px;}
/* Recherche FAQ */
.faq-search-wrap{position:relative;max-width:440px;}
.faq-search{
width:100%;padding:16px 20px 16px 48px;
font-size:15px;color:var(--ink);
background:var(--canvas);
border:1.5px solid var(--border-mid);
border-radius:var(--r-pill);outline:none;
transition:border-color .15s,box-shadow .15s;
font-family:var(--font-b);
}
.faq-search:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(212,0,18,.08);}
.faq-search::placeholder{color:var(--ink-hint);}
.faq-search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ink-hint);pointer-events:none;}
.faq-search-clear{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--ink-hint);cursor:pointer;display:none;transition:color .15s;padding:4px;}
.faq-search-clear:hover{color:var(--brand);}
.faq-search-count{font-size:12px;color:var(--ink-hint);margin-top:8px;padding-left:4px;}
/* Stats hero droite */
.hero-right{display:flex;flex-direction:column;gap:14px;}
.hero-stat-row{background:var(--canvas-warm);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 22px;display:flex;align-items:center;gap:16px;transition:box-shadow .2s;}
.hero-stat-row:hover{box-shadow:var(--sh-sm);}
.hero-stat-num{font-family:var(--font-d);font-size:28px;font-weight:800;color:var(--brand);letter-spacing:-.03em;line-height:1;min-width:60px;}
.hero-stat-text{font-size:13px;color:var(--ink-mute);line-height:1.5;}
.hero-stat-text strong{color:var(--ink);font-weight:600;}
/* Navigation categories FAQ */
.cat-nav{background:var(--canvas-warm);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:0;position:sticky;top:68px;z-index:100;}
.cat-nav.stuck{box-shadow:var(--sh-sm);}
.cat-nav-inner{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;padding:0 40px;}
.cat-nav-inner::-webkit-scrollbar{display:none;}
.cat-btn{
display:flex;align-items:center;gap:8px;
padding:16px 20px;border-bottom:2px solid transparent;
font-size:13px;font-weight:600;color:var(--ink-mute);
cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s;
margin-bottom:-1px;background:transparent;
}
.cat-btn:hover{color:var(--ink);}
.cat-btn.active{color:var(--brand);border-bottom-color:var(--brand);}
.cat-btn-count{font-size:10px;font-weight:700;background:var(--brand-light);color:var(--brand);padding:2px 6px;border-radius:var(--r-pill);}
.cat-btn.active .cat-btn-count{background:var(--brand);color:#fff;}
/* Layout principal FAQ */
.faq-main{padding:64px 0 88px;}
.faq-layout{display:grid;grid-template-columns:1fr 360px;gap:56px;align-items:start;}
/* Groupes FAQ */
.faq-groups{display:flex;flex-direction:column;gap:48px;}
.faq-group{scroll-margin-top:160px;}
.faq-group.rv{opacity:0;transform:translateY(20px);transition:opacity .55s var(--ease),transform .55s var(--ease);}
.faq-group.rv.on{opacity:1;transform:none;}
.faq-group-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;}
.faq-group-icon{width:44px;height:44px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.faq-group-icon.products{background:var(--brand-light);}
.faq-group-icon.pro{background:var(--pro-light);}
.faq-group-icon.shipping{background:var(--success-bg);}
.faq-group-icon.loyalty{background:#FDF5E8;}
.faq-group-icon.general{background:var(--canvas-deep);}
.faq-group-title{font-family:var(--font-d);font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.015em;}
.faq-group-count{font-size:12px;color:var(--ink-hint);}
/* Items FAQ */
.faq-items{display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-xs);}
.faq-item{border-bottom:1px solid var(--border);background:var(--canvas);}
.faq-item:last-child{border-bottom:none;}
.faq-item.hidden-search{display:none;}
.faq-q{
width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
padding:22px 24px;
font-family:var(--font-d);font-size:17px;font-weight:600;color:var(--ink);
cursor:pointer;text-align:left;line-height:1.3;
background:var(--canvas);transition:background .15s;
}
.faq-q:hover{background:var(--canvas-warm);}
.faq-item.open>.faq-q{background:var(--brand-light);color:var(--brand);}
.faq-item.pro-item.open>.faq-q{background:var(--pro-light);color:var(--pro);}
.faq-item[data-cat="espace-pro"].open>.faq-q{background:var(--pro-light);color:var(--pro);}
.faq-chevron{
flex-shrink:0;margin-top:4px;color:var(--ink-hint);
transition:transform .3s var(--ease),color .2s;
}
.faq-item.open .faq-chevron{transform:rotate(180deg);color:var(--brand);}
.faq-item.pro-item.open .faq-chevron{color:var(--pro);}
.faq-item[data-cat="espace-pro"].open .faq-chevron{color:var(--pro);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease);}
.faq-item.open .faq-a{max-height:800px;}
.faq-a-inner{
padding:4px 24px 24px;
font-size:15px;color:var(--ink-mid);line-height:1.8;
}
.faq-a-inner p{margin-bottom:14px;}
.faq-a-inner p:last-child{margin-bottom:0;}
.faq-a-inner strong{color:var(--ink);font-weight:600;}
.faq-a-inner a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;}
.faq-a-inner ul{padding-left:20px;margin:10px 0;display:flex;flex-direction:column;gap:5px;}
.faq-a-inner li{font-size:14px;color:var(--ink-mute);line-height:1.6;}
/* Highlight dans recherche */
.faq-highlight{background:rgba(212,0,18,.12);border-radius:3px;padding:1px 2px;}
/* Pro badge */
.faq-pro-badge{
display:inline-flex;align-items:center;gap:5px;
background:var(--pro-light);color:var(--pro);
font-size:9px;font-weight:700;padding:3px 8px;
border-radius:var(--r-pill);letter-spacing:.06em;text-transform:uppercase;
margin-bottom:8px;font-family:var(--font-b);
}
/* Feedback utile */
.faq-useful{
display:flex;align-items:center;gap:10px;
padding:12px 24px 14px;
background:var(--canvas-warm);
border-top:1px solid var(--border);
font-size:12px;color:var(--ink-hint);
}
.faq-useful-btn{
display:inline-flex;align-items:center;gap:5px;
font-size:11px;font-weight:500;color:var(--ink-mute);
padding:4px 10px;border-radius:var(--r-pill);
border:1px solid var(--border);background:var(--canvas);
transition:all .15s;cursor:pointer;font-family:var(--font-b);
}
.faq-useful-btn:hover{border-color:var(--brand);color:var(--brand);}
.faq-useful-btn.voted{border-color:var(--success);color:var(--success);pointer-events:none;}
/* Aucun resultat */
.no-results{display:none;text-align:center;padding:48px 0;}
.no-results.visible{display:block;}
.no-results-icon{font-size:40px;margin-bottom:16px;opacity:.4;}
.no-results-title{font-family:var(--font-d);font-size:20px;color:var(--ink);margin-bottom:8px;}
.no-results-sub{font-size:14px;color:var(--ink-mute);}
/* Sidebar FAQ */
.faq-sidebar{position:sticky;top:160px;display:flex;flex-direction:column;gap:20px;}
.sidebar-card{background:var(--canvas-warm);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;}
.sidebar-card-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.sidebar-card-icon{width:26px;height:26px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;}
.sidebar-card-icon.red{background:var(--brand-light);}
.sidebar-card-icon.blue{background:var(--pro-light);}
/* Liens rapides sidebar */
.quick-links{display:flex;flex-direction:column;gap:6px;}
.quick-link{
display:flex;align-items:center;gap:9px;
padding:10px 12px;border-radius:var(--r-md);
font-size:13px;color:var(--ink-mute);
transition:background .15s,color .15s;cursor:pointer;
}
.quick-link:hover{background:var(--canvas);color:var(--brand);}
.quick-link-dot{width:5px;height:5px;border-radius:50%;background:var(--border-mid);flex-shrink:0;transition:background .15s;}
.quick-link:hover .quick-link-dot{background:var(--brand);}
.quick-link-count{margin-left:auto;font-size:10px;color:var(--ink-hint);}
/* Contact sidebar */
.contact-options{display:flex;flex-direction:column;gap:10px;}
.contact-opt{
display:flex;align-items:center;gap:12px;
padding:12px 14px;border-radius:var(--r-md);
background:var(--canvas);border:1px solid var(--border);
transition:border-color .15s,box-shadow .15s;cursor:pointer;
}
.contact-opt:hover{border-color:var(--brand);box-shadow:var(--sh-xs);}
.contact-opt-icon{width:32px;height:32px;border-radius:var(--r-sm);background:var(--brand-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.contact-opt-label{font-size:12px;font-weight:600;color:var(--ink);}
.contact-opt-sub{font-size:11px;color:var(--ink-hint);margin-top:1px;}
/* Termes lies */
.terms-wrap{display:flex;flex-wrap:wrap;gap:6px;}
.term-tag{
background:var(--canvas);border:1px solid var(--border);
border-radius:var(--r-pill);padding:5px 11px;
font-size:11px;color:var(--ink-mute);
transition:border-color .15s,color .15s;cursor:pointer;
}
.term-tag:hover{border-color:var(--brand);color:var(--brand);}
/* CTA banniere Pro (sidebar FAQ) */
.pro-cta-card{
background:var(--pro);border-radius:var(--r-lg);
padding:22px;position:relative;overflow:hidden;
}
.pro-cta-card::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:32px 32px;}
.pro-cta-eyebrow{font-size:10px;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;position:relative;z-index:1;}
.pro-cta-title{font-family:var(--font-d);font-size:17px;font-weight:700;color:#fff;line-height:1.25;margin-bottom:8px;position:relative;z-index:1;}
.pro-cta-title em{font-style:italic;color:var(--brand);}
.pro-cta-body{font-size:12px;color:rgba(255,255,255,.45);line-height:1.55;margin-bottom:16px;position:relative;z-index:1;}
.pro-cta-btn{
display:inline-flex;align-items:center;gap:8px;
background:var(--brand);color:#fff;
font-size:12px;font-weight:700;
padding:10px 18px;border-radius:var(--r-pill);
box-shadow:var(--brand-sh);
transition:background .2s,transform .15s;
position:relative;z-index:1;cursor:pointer;
border:none;font-family:var(--font-b);
}
.pro-cta-btn:hover,.pro-cta-btn:focus{background:var(--brand-dk);color:#fff !important;transform:translateY(-1px);box-shadow:0 4px 14px rgba(212,0,18,.3);}
/* CTA contact bas de page FAQ */
.contact-section{background:var(--canvas-warm);padding:64px 0;border-top:1px solid var(--border);}
.contact-inner{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;}
.contact-card{background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px 24px;text-align:center;transition:box-shadow .25s,transform .25s;}
.contact-card:hover{box-shadow:var(--sh-md);transform:translateY(-3px);}
.contact-card-icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.contact-card-icon.red{background:var(--brand-light);}
.contact-card-icon.blue{background:var(--pro-light);}
.contact-card-icon.green{background:var(--success-bg);}
.contact-card-title{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:6px;}
.contact-card-body{font-size:13px;color:var(--ink-mute);line-height:1.6;margin-bottom:16px;}
.contact-card-cta{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--brand);transition:gap .15s;}
.contact-card-cta:hover{gap:10px;}
/* Contact eyebrow + h2 (version About) */
.contact-eyebrow{font-size:11px;font-weight:700;color:var(--brand);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:10px;}
.contact-eyebrow::before{content:'';width:20px;height:2px;background:var(--brand);border-radius:1px;}
.contact-h2{font-family:var(--font-d);font-size:clamp(28px,3vw,42px);font-weight:800;color:#fff;line-height:1.1;letter-spacing:-.03em;margin-bottom:16px;}
.contact-h2 em{font-style:italic;color:var(--brand);}
/* Contact section — version About (fond noir) */
.contact-section{background:var(--ink);padding:80px 0;position:relative;overflow:hidden;}
.contact-section::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:48px 48px;}
.contact-glow{position:absolute;left:-80px;bottom:-80px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(212,0,18,.12) 0%,transparent 65%);pointer-events:none;}
.contact-section .contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;position:relative;z-index:1;}
.contact-body{font-size:16px;color:rgba(255,255,255,.5);line-height:1.75;margin-bottom:32px;}
.contact-btns{display:flex;gap:14px;flex-wrap:wrap;}
.btn-contact-primary{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;font-size:14px;font-weight:700;padding:14px 26px;border-radius:var(--r-pill);box-shadow:var(--brand-sh);transition:all .25s;text-decoration:none;}
.btn-contact-primary:hover{background:var(--brand-dk);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(212,0,18,.25);}
.btn-contact-secondary{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.6);font-size:14px;font-weight:500;padding:14px 22px;border-radius:var(--r-pill);border:1.5px solid rgba(255,255,255,.15);transition:all .2s;text-decoration:none;}
.btn-contact-secondary:hover{color:#fff;border-color:rgba(255,255,255,.4);}
.contact-right{display:flex;flex-direction:column;gap:16px;}
.contact-section .contact-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:20px 22px;display:flex;gap:16px;align-items:flex-start;text-align:left;}
.contact-section .contact-card:hover{background:rgba(255,255,255,.09);transform:none;box-shadow:none;}
.contact-section .contact-card-icon{width:40px;height:40px;min-width:40px;border-radius:var(--r-sm);background:rgba(212,0,18,.15);border:1px solid rgba(212,0,18,.2);display:flex;align-items:center;justify-content:center;margin:0;}
.contact-section .contact-card-title{font-size:15px;font-weight:700;color:#fff;margin-bottom:4px;}
.contact-section .contact-card-body{font-size:13px;color:rgba(255,255,255,.5);line-height:1.5;}
.contact-section .contact-card-cta{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--brand);margin-top:8px;transition:gap .2s;}
.contact-section .contact-card-cta:hover{gap:10px;color:#ff1a2e;}
.contact-card-label{font-size:11px;font-weight:600;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px;}
.contact-card-value{font-size:15px;font-weight:600;color:#fff;}
.contact-card-sub{font-size:12px;color:rgba(255,255,255,.35);margin-top:2px;}
@media(max-width:768px){.contact-section .contact-inner{grid-template-columns:1fr;gap:40px;}}
/* ============================================================
SECTION 2 - QUI SOMMES-NOUS
Source : /tmp/css_about.txt
============================================================ */
/* Hero About */
.about-hero{padding:56px 0 80px;position:relative;overflow:hidden;}
.about-hero::after{
content:'';position:absolute;right:0;top:0;bottom:0;
width:42%;background:var(--canvas-warm);
clip-path:polygon(6% 0,100% 0,100% 100%,0 100%);
z-index:0;
}
.about-hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;position:relative;z-index:1;}
.about-eyebrow{font-size:11px;font-weight:700;color:var(--brand);letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.about-eyebrow::before{content:'';width:20px;height:2px;background:var(--brand);border-radius:1px;}
.about-h1{font-family:var(--font-d);font-size:clamp(38px,4vw,62px);font-weight:800;color:var(--ink);line-height:1.08;letter-spacing:-.03em;margin-bottom:20px;}
.about-h1 em{font-style:italic;color:var(--brand);}
.about-sub{font-size:17px;color:var(--ink-mute);line-height:1.75;max-width:460px;margin-bottom:40px;}
.about-sub strong{color:var(--ink);font-weight:600;}
/* Hero cards droite About */
.hero-kpis{display:flex;gap:36px;flex-wrap:wrap;}
.kpi-num{font-family:var(--font-d);font-size:36px;font-weight:800;color:var(--brand);letter-spacing:-.04em;line-height:1;}
.kpi-lbl{font-size:12px;color:var(--ink-hint);margin-top:5px;line-height:1.4;}
.hero-card{
background:var(--canvas);border:1px solid var(--border);
border-radius:var(--r-lg);padding:20px 22px;
display:flex;align-items:flex-start;gap:16px;
box-shadow:var(--sh-xs);
transition:box-shadow .25s,transform .2s;
}
.hero-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px);}
.hero-card-icon{
width:40px;height:40px;min-width:40px;border-radius:var(--r-sm);
background:var(--brand-light);
display:flex;align-items:center;justify-content:center;
}
.hero-card-title{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:3px;}
.hero-card-text{font-size:12px;color:var(--ink-mute);line-height:1.5;}
/* Section generique About */
.section{padding:88px 0;}
.section-alt{background:var(--canvas-warm);}
.eyebrow{font-size:11px;font-weight:700;color:var(--brand);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:10px;}
.eyebrow::before{content:'';width:20px;height:2px;background:var(--brand);border-radius:1px;}
.section-h2{font-family:var(--font-d);font-size:clamp(28px,3vw,44px);font-weight:700;color:var(--ink);letter-spacing:-.025em;line-height:1.15;margin-bottom:14px;}
.section-h2 em{font-style:italic;color:var(--brand);}
.section-desc{font-size:16px;color:var(--ink-mute);line-height:1.75;max-width:580px;}
/* Histoire */
.story-section{padding:88px 0;}
.story-inner{display:grid;grid-template-columns:1fr 1fr;gap:88px;align-items:center;}
.story-left{}
.story-right{}
.story-visual{
border-radius:var(--r-xl);background:var(--canvas-deep);
aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;
font-family:var(--font-d);font-style:italic;font-size:15px;
color:var(--ink-hint);text-align:center;line-height:1.7;
box-shadow:var(--sh-lg);position:relative;overflow:hidden;
}
.story-visual-quote{
position:absolute;bottom:24px;left:24px;right:24px;
background:rgba(248,247,244,.96);backdrop-filter:blur(8px);
border:1px solid rgba(232,229,222,.6);
border-radius:14px;padding:18px 22px;
}
.story-visual-quote .story-quote-text{font-family:var(--font-d);font-size:14px;font-style:italic;color:var(--ink-mid);line-height:1.6;}
.story-visual-quote .story-quote-author{font-size:11px;font-weight:700;color:var(--ink-hint);margin-top:7px;text-transform:uppercase;letter-spacing:.06em;}
.story-body{font-size:16px;color:var(--ink-mid);line-height:1.8;margin-bottom:20px;}
.story-body strong{color:var(--ink);font-weight:600;}
.story-highlight{
background:var(--canvas-warm);
border:1px solid var(--border);
border-radius:14px;
padding:20px 24px;margin-bottom:24px;
font-size:15px;line-height:1.75;color:var(--ink-mid);
}
.story-highlight strong{color:var(--brand);font-weight:700;}
/* Valeurs */
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.value-card{
background:var(--canvas-warm);border-radius:var(--r-lg);
padding:32px 28px;
border:1px solid transparent;
transition:border-color .2s,box-shadow .2s,transform .2s;
}
.value-card:hover{border-color:var(--brand);box-shadow:var(--sh-md);transform:translateY(-4px);background:var(--canvas);}
.value-icon{width:48px;height:48px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;margin-bottom:16px;background:var(--brand-light);}
.value-title{font-family:var(--font-d);font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.01em;margin-bottom:10px;}
.value-text{font-size:14px;color:var(--ink-mute);line-height:1.75;}
.value-text strong{color:var(--ink);}
/* Fondateur */
.founder-section{background:var(--ink);padding:88px 0;position:relative;overflow:hidden;}
.founder-section::before{
content:'';position:absolute;inset:0;
background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
background-size:52px 52px;
}
.founder-body{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;position:relative;z-index:1;}
.founder-quote{
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
border-radius:var(--r-lg);padding:22px 24px;
border-left:3px solid var(--brand);
}
.founder-quote-text{font-family:var(--font-d);font-size:16px;font-style:italic;color:rgba(255,255,255,.8);line-height:1.65;}
.founder-quote-author{font-size:12px;color:rgba(255,255,255,.4);margin-top:10px;text-transform:uppercase;letter-spacing:.06em;}
.founder-sig{font-family:var(--font-d);font-size:20px;font-style:italic;color:rgba(255,255,255,.5);margin-top:16px;}
/* Marques */
.brands-section{padding:88px 0;}
.brands-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.brand-card{
background:var(--canvas);border:1px solid var(--border);
border-radius:var(--r-xl);padding:40px;
transition:box-shadow .25s,transform .25s;
}
.brand-card:hover{box-shadow:var(--sh-lg);transform:translateY(-4px);}
.brand-card-img{display:block;max-width:160px;margin-bottom:20px;}
.brand-card-name{font-family:var(--font-d);font-size:28px;font-weight:800;letter-spacing:-.03em;margin-bottom:6px;}
.brand-card-name.blue{color:#2A7AB5;}
.brand-card-name.pro{color:var(--brand);}
.brand-card-desc{font-size:15px;color:var(--ink-mute);line-height:1.75;margin-bottom:24px;}
.brand-card-desc strong{color:var(--ink);font-weight:600;}
.brand-card-price{font-size:18px;font-weight:800;color:var(--brand);letter-spacing:-.02em;}
/* ============================================================
SECTION 3 - ESPACE PRO
Source : /tmp/css_pro.txt
============================================================ */
/* Hero Pro */
.pro-hero{
padding-top:68px;
background:var(--pro);
position:relative;
overflow:hidden;
min-height:90vh;
display:flex;
align-items:center;
}
.pro-hero::before{
content:'';
position:absolute;inset:0;
background-image:
linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
background-size:56px 56px;
}
.pro-hero::after{
content:'';
position:absolute;right:0;top:0;bottom:0;width:4px;
background:linear-gradient(to bottom,transparent,var(--brand) 30%,var(--brand) 70%,transparent);
}
.pro-hero-inner{
position:relative;z-index:1;
display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
padding:80px 0;
}
.pro-eyebrow{font-size:11px;font-weight:700;color:var(--brand);letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.pro-eyebrow::before{content:'';width:20px;height:2px;background:var(--brand);border-radius:1px;}
.pro-h1{
font-family:var(--font-d);
font-size:clamp(38px,4.5vw,62px);
font-weight:800;line-height:1.08;
letter-spacing:-.03em;
color:#fff;
margin-bottom:20px;
}
.pro-h1 em{font-style:italic;color:var(--brand);}
.pro-sub{
font-size:17px;color:rgba(255,255,255,.55);
line-height:1.75;max-width:440px;
margin-bottom:40px;
}
.pro-ctas{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:52px;}
.btn-pro-primary,a.btn-pro-primary,a.btn-pro-primary:visited{
display:inline-flex;align-items:center;gap:10px;
background:var(--brand);color:#fff !important;
font-size:15px;font-weight:700;
padding:16px 30px;border-radius:var(--r-pill);
box-shadow:var(--brand-sh);
transition:background .2s,transform .15s,box-shadow .2s;
text-decoration:none;cursor:pointer;border:none;
}
.btn-pro-primary:hover,a.btn-pro-primary:hover{background:var(--brand-dk);color:#fff !important;transform:translateY(-2px);box-shadow:0 12px 32px rgba(212,0,18,.4);}
.btn-pro-secondary{
display:inline-flex;align-items:center;gap:8px;
color:rgba(255,255,255,.6);font-size:14px;font-weight:500;
padding:16px 20px;border-radius:var(--r-pill);
border:1.5px solid rgba(255,255,255,.15);
transition:color .2s,border-color .2s,background .2s;
}
.btn-pro-secondary:hover{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.05);}
/* Stats Pro */
.hero-pro-stats{display:flex;gap:36px;flex-wrap:wrap;}
.hero-pro-stat-num{font-family:var(--font-d);font-size:32px;font-weight:800;color:#fff;line-height:1;letter-spacing:-.03em;}
.hero-pro-stat-lbl{font-size:12px;color:rgba(255,255,255,.4);margin-top:4px;}
/* Avantages Pro */
.advantages-list{display:flex;flex-direction:column;gap:0;}
.advantage-item{
display:flex;gap:20px;align-items:flex-start;
padding:24px 0;border-bottom:1px solid var(--border);
cursor:pointer;
}
.advantage-item:last-child{border-bottom:none;}
.advantage-item:hover .advantage-num{color:var(--pro);background:var(--pro-light);}
.advantage-num{
font-family:var(--font-d);font-size:22px;font-weight:800;
color:var(--border-mid);line-height:1;
width:44px;min-width:44px;height:44px;
border-radius:var(--r-md);background:var(--canvas-warm);
display:flex;align-items:center;justify-content:center;
letter-spacing:-.03em;
transition:color .2s,background .2s;
margin-top:2px;
}
.advantage-title{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:5px;line-height:1.3;}
.advantage-text{font-size:14px;color:var(--ink-mute);line-height:1.65;}
/* Cards stats visual Pro */
.av-stat-card{
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.1);
border-radius:var(--r-lg);padding:20px 22px;
position:relative;z-index:1;
}
.av-stat-card:first-child{background:rgba(212,0,18,.15);border-color:rgba(212,0,18,.2);}
.av-stat-badge{display:inline-block;background:var(--brand);color:#fff;font-size:10px;font-weight:700;padding:3px 8px;border-radius:var(--r-pill);margin-top:8px;letter-spacing:.04em;}
.av-stat-num{font-family:var(--font-d);font-size:36px;font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1;}
.av-stat-lbl{font-size:13px;color:rgba(255,255,255,.5);margin-top:6px;}
/* Produits Pro visual */
.av-prod-row{display:flex;gap:10px;position:relative;z-index:1;}
.av-prod-item{
flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
border-radius:var(--r-md);padding:12px;
}
.av-prod-name{font-size:11px;font-weight:600;color:rgba(255,255,255,.7);margin-bottom:4px;line-height:1.3;}
.av-prod-price{font-size:13px;font-weight:700;color:var(--brand);}
.av-prod-tag{font-size:10px;color:rgba(255,255,255,.35);margin-top:2px;}
/* Formulaire Pro */
.form-card{background:var(--canvas);border-radius:var(--r-xl);padding:40px;box-shadow:var(--sh-lg);}
.form-card-title{font-family:var(--font-d);font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.02em;margin-bottom:6px;}
.form-card-sub{font-size:13px;color:var(--ink-mute);margin-bottom:28px;}
/* Confirmation formulaire Pro */
.form-card.form-confirm{display:none;text-align:center;padding:40px;}
.form-card.form-confirm.visible{display:block;}
.form-confirm-icon{
width:64px;height:64px;border-radius:50%;
background:var(--success-bg);border:2px solid rgba(45,138,78,.25);
display:flex;align-items:center;justify-content:center;
margin:0 auto 20px;
}
.form-confirm-step{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--ink-mute);}
.form-confirm-step-num{
width:20px;height:20px;min-width:20px;border-radius:50%;
background:var(--pro-light);color:var(--pro);
font-size:10px;font-weight:700;
display:flex;align-items:center;justify-content:center;
flex-shrink:0;margin-top:1px;
}
/* RPPS field */
.rpps-field{position:relative;}
.rpps-badge{
position:absolute;right:14px;top:50%;transform:translateY(-50%);
background:var(--pro-light);color:var(--pro);
font-size:10px;font-weight:700;padding:3px 8px;border-radius:var(--r-pill);
letter-spacing:.04em;text-transform:uppercase;
}
.rpps-info{
background:var(--pro-light);border:1px solid rgba(26,58,92,.15);
border-radius:var(--r-md);padding:12px 14px;
font-size:12px;color:var(--pro);line-height:1.6;
margin-top:8px;display:flex;gap:8px;align-items:flex-start;
}
/* Section formulaire Pro */
.form-section{background:var(--pro);padding:80px 0;position:relative;overflow:hidden;}
.form-section::before{
content:'';position:absolute;inset:0;
background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
background-size:56px 56px;
}
.form-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;position:relative;z-index:1;}
.form-left-eyebrow{font-size:11px;font-weight:700;color:var(--brand);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:10px;}
.form-left-eyebrow::before{content:'';width:20px;height:2px;background:var(--brand);border-radius:1px;}
.form-left-title{font-family:var(--font-d);font-size:clamp(28px,3vw,42px);font-weight:800;color:#fff;letter-spacing:-.025em;line-height:1.15;margin-bottom:16px;}
.form-left-title em{font-style:italic;color:var(--brand);}
.form-left-body{font-size:15px;color:rgba(255,255,255,.5);line-height:1.75;margin-bottom:32px;}
.form-steps-mini{display:flex;flex-direction:column;gap:14px;}
.form-step-mini{display:flex;align-items:flex-start;gap:14px;}
.form-step-mini-dot{
width:28px;height:28px;min-width:28px;border-radius:50%;
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
display:flex;align-items:center;justify-content:center;
font-size:11px;font-weight:700;color:rgba(255,255,255,.5);
margin-top:1px;
}
.form-step-mini-title{font-size:13px;font-weight:600;color:rgba(255,255,255,.75);margin-bottom:2px;}
.form-step-mini-text{font-size:12px;color:rgba(255,255,255,.35);line-height:1.5;}
.form-tabs{display:flex;background:var(--canvas-warm);border-radius:var(--r-pill);padding:4px;gap:0;margin-bottom:28px;}
.form-tab{flex:1;padding:10px 16px;border-radius:var(--r-pill);font-size:13px;font-weight:600;color:var(--ink-mute);transition:all .2s;text-align:center;cursor:pointer;}
.form-tab.active{background:var(--canvas);color:var(--ink);box-shadow:var(--sh-xs);}
.btn-register{
width:100%;height:54px;
background:var(--pro);color:#fff;
font-size:15px;font-weight:700;
border-radius:var(--r-pill);box-shadow:var(--pro-sh);
display:flex;align-items:center;justify-content:center;gap:10px;
margin-top:20px;
transition:background .2s,transform .15s,box-shadow .2s;
cursor:pointer;border:none;font-family:var(--font-b);
}
.btn-register:hover{background:#12263E;transform:translateY(-2px);box-shadow:0 10px 28px rgba(26,58,92,.3);}
.btn-register:active{transform:scale(.97);}
/* Alerte erreur formulaire Pro */
.form-alert-error{
background:rgba(212,0,18,.08);border:1px solid rgba(212,0,18,.2);
border-radius:var(--r-md);padding:14px 18px;
font-size:13px;color:var(--brand);line-height:1.55;
display:flex;gap:10px;align-items:flex-start;
margin-bottom:24px;
}
/* Confirmation formulaire Pro - section level */
.form-confirm-title{font-family:var(--font-d);font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.02em;margin-bottom:10px;}
.form-confirm-body{font-size:14px;color:var(--ink-mute);line-height:1.7;margin-bottom:24px;}
.form-confirm-steps{display:flex;flex-direction:column;gap:12px;text-align:left;max-width:400px;margin:0 auto;}
.form-confirm-contact{font-size:13px;color:var(--ink-mute);margin-top:20px;margin-bottom:0;}
.form-confirm-link{color:var(--pro);font-weight:600;}
.form-card-login-link{color:var(--pro);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
/* Hero Pro (mockup hero-pro) */
.hero-pro{
padding-top:0;
background:var(--pro);
position:relative;
overflow:hidden;
min-height:90vh;
display:flex;
align-items:center;
}
.hero-pro::before{
content:'';
position:absolute;inset:0;
background-image:
linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
background-size:56px 56px;
}
.hero-pro::after{
content:'';
position:absolute;right:0;top:0;bottom:0;width:4px;
background:linear-gradient(to bottom,transparent,var(--brand) 30%,var(--brand) 70%,transparent);
}
.hero-pro-glow{
position:absolute;right:-100px;top:50%;transform:translateY(-50%);
width:600px;height:600px;border-radius:50%;
background:radial-gradient(circle,rgba(212,0,18,.12) 0%,transparent 65%);
pointer-events:none;
}
.hero-pro-inner{
position:relative;z-index:1;
display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
padding:80px 0;
}
.hero-pro-badge{
display:inline-flex;align-items:center;gap:8px;
border:1px solid rgba(255,255,255,.15);
border-radius:var(--r-pill);padding:6px 14px 6px 10px;
margin-bottom:28px;
}
.hero-pro-badge-dot{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 8px rgba(212,0,18,.6);}
.hero-pro-badge-text{font-size:11px;font-weight:600;color:rgba(255,255,255,.65);letter-spacing:.08em;text-transform:uppercase;}
.hero-pro-h1{
font-family:var(--font-d);
font-size:clamp(38px,4.5vw,62px);
font-weight:800;line-height:1.08;
letter-spacing:-.03em;
color:#fff;
margin-bottom:20px;
}
.hero-pro-h1 em{font-style:italic;color:var(--brand);}
.hero-pro-body{
font-size:17px;color:rgba(255,255,255,.55);
line-height:1.75;max-width:440px;
margin-bottom:40px;
}
.hero-pro-ctas{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:52px;}
/* Hero Pro right column */
.hero-pro-right{display:flex;flex-direction:column;gap:14px;}
.hero-pro-card{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
border-radius:var(--r-lg);
padding:20px 22px;
display:flex;align-items:flex-start;gap:16px;
transition:background .2s,border-color .2s;
}
.hero-pro-card:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);}
.hero-pro-card-icon{
width:44px;height:44px;min-width:44px;
border-radius:var(--r-md);
background:#F5F1EA;
border:1px solid rgba(255,255,255,.15);
box-shadow:0 2px 8px rgba(0,0,0,.18);
display:flex;align-items:center;justify-content:center;
}
.hero-pro-card-title{font-size:14px;font-weight:700;color:#fff;margin-bottom:4px;}
.hero-pro-card-text{font-size:12px;color:rgba(255,255,255,.45);line-height:1.55;}
/* Rouge eclairci sur le bleu marine : #D40012 sur #1A3A5C a des luminances trop
proches (le rouge "vibre"). Teinte plus claire pour le texte/traits sur fond fonce.
Le bouton plein "Demander l'acces Pro" reste #D40012 (aplat, pas de souci). */
.hero-pro-h1 em{color:#F2434F;}
.hero-pro-badge-dot{background:#F2434F;box-shadow:0 0 8px rgba(242,67,79,.6);}
/* Icones sur fond creme -> rouge plein #D40012 (lisible sur clair) */
.hero-pro-card-icon svg{stroke:#D40012;}
/* Profils praticiens */
.profiles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.profile-card{
background:var(--canvas);border:1px solid var(--border);
border-radius:var(--r-lg);padding:28px 22px 24px;
text-align:center;
transition:border-color .2s,box-shadow .2s,transform .25s;
cursor:default;
}
.profile-card:hover{border-color:rgba(26,58,92,.3);box-shadow:var(--sh-md);transform:translateY(-4px);}
.profile-icon{
width:64px;height:64px;border-radius:50%;
background:var(--pro-light);
display:flex;align-items:center;justify-content:center;
margin:0 auto 16px;
border:2px solid rgba(26,58,92,.1);
}
.profile-title{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:6px;}
.profile-text{font-size:13px;color:var(--ink-mute);line-height:1.55;}
.profile-badge{
display:inline-flex;align-items:center;gap:5px;
background:var(--pro-light);color:var(--pro);
font-size:10px;font-weight:700;
padding:4px 10px;border-radius:var(--r-pill);
margin-top:12px;letter-spacing:.04em;text-transform:uppercase;
}
/* Avantages layout */
.advantages-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.advantage-content{}
.advantages-visual{
border-radius:var(--r-xl);overflow:hidden;
background:linear-gradient(135deg,var(--pro) 0%,#0E2240 100%);
padding:40px;
display:flex;flex-direction:column;gap:16px;
position:relative;
}
.advantages-visual::before{
content:'';position:absolute;inset:0;
background:radial-gradient(ellipse at 80% 20%,rgba(212,0,18,.15) 0%,transparent 60%);
}
/* Advantages visual success card */
.av-stat-card--success{background:rgba(45,138,78,.15);border-color:rgba(45,138,78,.2);}
.av-stat-card--success-inner{display:flex;align-items:center;gap:10px;}
.av-stat-card--success-title{font-size:13px;font-weight:700;color:rgba(255,255,255,.85);}
.av-stat-card--success-sub{font-size:12px;color:rgba(255,255,255,.4);margin-top:2px;}
/* Processus d acces */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;}
.process-grid::before{
content:'';position:absolute;top:32px;left:calc(12.5%);right:calc(12.5%);height:2px;
background:repeating-linear-gradient(90deg,var(--border) 0,var(--border) 8px,transparent 8px,transparent 16px);
}
.process-step{text-align:center;padding:0 16px;}
.process-step-circle{
width:64px;height:64px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
margin:0 auto 20px;position:relative;z-index:1;
transition:transform .2s,box-shadow .2s;
}
.process-step-circle.done{background:var(--success-bg);border:2px solid var(--success);}
.process-step-circle.active{background:var(--pro-light);border:2px solid var(--pro);box-shadow:0 0 0 6px rgba(26,58,92,.08);}
.process-step-circle.pending{background:var(--canvas-warm);border:2px solid var(--border-mid);}
.process-step:hover .process-step-circle{transform:translateY(-4px);}
.process-step-num{font-family:var(--font-d);font-size:18px;font-weight:800;color:var(--pro);}
.process-step.done .process-step-num{color:var(--success);}
.process-step.pending .process-step-num{color:var(--ink-hint);}
.process-step-title{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:6px;line-height:1.3;}
.process-step-text{font-size:12px;color:var(--ink-mute);line-height:1.55;}
.process-step-time{
display:inline-flex;align-items:center;gap:4px;
font-size:11px;color:var(--ink-hint);
margin-top:8px;
background:var(--canvas-warm);
padding:3px 8px;border-radius:var(--r-pill);
border:1px solid var(--border);
}
/* Catalogue Pro */
.pro-products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.pro-pcard{
background:var(--canvas);border-radius:var(--r-lg);
border:1px solid var(--border);overflow:hidden;
transition:box-shadow .3s,transform .3s;cursor:pointer;
position:relative;
}
.pro-pcard:hover{box-shadow:var(--sh-lg);transform:translateY(-5px);}
.pro-pcard:hover .pro-pcard-img{transform:scale(1.04);}
.pro-pcard:hover .pro-pcard-add{transform:translateY(0);opacity:1;}
.pro-pcard-exclusive{
position:absolute;top:12px;right:12px;z-index:2;
background:var(--pro);color:#fff;
font-size:9px;font-weight:700;padding:4px 8px;
border-radius:var(--r-pill);letter-spacing:.06em;text-transform:uppercase;
}
.pro-pcard-img-wrap{background:#FFFFFF;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;padding:16px;}
.pro-pcard-img{
width:60%;height:60%;object-fit:contain;
transition:transform .4s var(--ease);
font-family:var(--font-d);font-style:italic;font-size:12px;color:var(--ink-hint);text-align:center;line-height:1.5;
display:flex;align-items:center;justify-content:center;
}
.pro-pcard-add{
position:absolute;bottom:0;left:0;right:0;
background:var(--pro);color:#fff;font-size:12px;font-weight:700;
padding:11px;display:flex;align-items:center;justify-content:center;gap:8px;
transform:translateY(100%);opacity:0;
transition:transform .3s var(--ease),opacity .3s;
}
.pro-pcard-body{padding:18px;}
.pro-pcard-brand{font-size:10px;font-weight:700;color:var(--pro);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;}
.pro-pcard-name{font-size:15px;font-weight:600;color:var(--ink);line-height:1.4;margin-bottom:6px;}
.pro-pcard-desc{font-size:12px;color:var(--ink-mute);line-height:1.55;margin-bottom:12px;}
.pro-pcard-price-row{display:flex;align-items:baseline;gap:10px;}
.pro-pcard-ht{font-size:18px;font-weight:800;color:var(--pro);letter-spacing:-.02em;}
.pro-pcard-ht--blur{color:var(--ink-hint);filter:blur(5px);}
.pro-pcard-ttc{font-size:11px;color:var(--ink-hint);}
.pro-pcard--locked{position:relative;}
.pro-locked-overlay{
position:absolute;inset:0;background:rgba(248,247,244,.92);backdrop-filter:blur(4px);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
border-radius:var(--r-lg);
}
.pro-locked-icon{
width:48px;height:48px;border-radius:50%;
background:var(--pro-light);border:1.5px solid rgba(26,58,92,.2);
display:flex;align-items:center;justify-content:center;
}
.pro-locked-text{font-size:13px;font-weight:600;color:var(--pro);text-align:center;line-height:1.4;}
.pro-locked-cta{
background:var(--pro);color:#fff;font-size:12px;font-weight:700;
padding:9px 18px;border-radius:var(--r-pill);
transition:background .15s;cursor:pointer;border:none;
font-family:var(--font-b);display:inline-block;
}
.pro-locked-cta:hover{background:#12263E;}
/* Photo produit dynamique + lien */
.pro-pcard-link{display:block;text-decoration:none;color:inherit;}
.pro-pcard-img-photo{
width:100%;height:100%;object-fit:contain;padding:18px;
transition:transform .3s ease;
}
.pro-pcard:hover .pro-pcard-img-photo{transform:scale(1.04);}
.pro-pcard-name a{color:inherit;text-decoration:none;}
.pro-pcard-name a:hover{color:var(--pro);}
.pro-pcard-cta{
display:inline-flex;align-items:center;gap:6px;margin-top:12px;
font-size:12px;font-weight:700;color:var(--pro);
text-decoration:none;padding:8px 16px;border-radius:var(--r-pill);
border:1.5px solid var(--pro);background:transparent;
transition:all .15s;font-family:var(--font-b);
}
.pro-pcard-cta:hover{background:var(--pro);color:#fff;}
.pro-pcard-cta svg{stroke:currentColor;transition:transform .15s;}
.pro-pcard-cta:hover svg{transform:translateX(2px);}
/* Bannière "produit réservé aux Pros" sur la fiche produit */
.pro-lock-banner{
display:flex;gap:16px;align-items:flex-start;
background:linear-gradient(135deg,#F8F7F4 0%,#FFFFFF 100%);
border:1.5px solid var(--border);
border-radius:var(--r-lg);padding:20px 22px;margin:20px 0;
}
.pro-lock-banner-icon{
flex-shrink:0;width:40px;height:40px;border-radius:50%;
background:var(--pro-light);color:var(--pro);
display:flex;align-items:center;justify-content:center;
}
.pro-lock-banner-body{flex:1;min-width:0;}
.pro-lock-banner-title{
font-family:var(--font-d);font-size:16px;font-weight:700;color:var(--ink);
margin-bottom:4px;letter-spacing:-.01em;
}
.pro-lock-banner-text{
font-size:13px;color:var(--ink-mute);line-height:1.55;margin-bottom:14px;
}
.pro-lock-banner-cta{
display:inline-flex;align-items:center;gap:6px;
background:var(--pro);color:#fff;
font-size:13px;font-weight:700;letter-spacing:.01em;
padding:10px 20px;border-radius:var(--r-pill);
text-decoration:none;transition:all .2s;
font-family:var(--font-b);
}
.pro-lock-banner-cta:hover{background:#12263E;color:#fff;transform:translateY(-1px);}
.pro-lock-banner-cta svg{stroke:currentColor;transition:transform .15s;}
.pro-lock-banner-cta:hover svg{transform:translateX(2px);}
/* ================================
MON COMPTE - Variante PRO
================================ */
.sidebar-nav--pro{border-top:2px solid var(--pro);}
.sidebar-pro-badge{
display:inline-flex;align-items:center;gap:4px;
background:var(--pro);color:#fff;
font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
padding:4px 10px;border-radius:var(--r-pill);
margin-bottom:10px;
}
.sidebar-pro-badge svg{stroke:currentColor;}
.sidebar-nav--pro .sidebar-avatar{
background:linear-gradient(135deg,var(--pro) 0%,#12263E 100%);
color:#fff;
}
.sidebar-company{
font-size:12px;color:var(--pro);font-weight:600;
margin-top:2px;margin-bottom:2px;
}
/* Banniere de bienvenue Pro */
.pro-welcome-banner{
position:relative;overflow:hidden;
background:linear-gradient(135deg,#0F1E30 0%,var(--pro) 60%,#2A5280 100%);
border-radius:var(--r-xl);
padding:32px 36px;margin-bottom:24px;color:#fff;
}
.pro-welcome-glow{
position:absolute;top:-30%;right:-10%;width:340px;height:340px;
background:radial-gradient(circle,rgba(255,255,255,.12) 0%,transparent 70%);
pointer-events:none;
}
.pro-welcome-inner{
position:relative;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.pro-welcome-eyebrow{
display:inline-flex;align-items:center;gap:8px;
font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:rgba(255,255,255,.75);margin-bottom:10px;
}
.pro-welcome-dot{
width:6px;height:6px;border-radius:50%;background:var(--brand);
box-shadow:0 0 8px rgba(212,0,18,.6);
}
.pro-welcome-title{
font-family:var(--font-d);font-size:28px;font-weight:700;
color:#fff;margin:0 0 8px 0;letter-spacing:-.02em;line-height:1.1;
}
.pro-welcome-title em{font-style:italic;color:#fff;opacity:.9;}
.pro-welcome-text{
font-size:14px;color:rgba(255,255,255,.75);line-height:1.6;max-width:520px;margin:0;
}
.pro-welcome-ctas{display:flex;gap:10px;flex-wrap:wrap;}
.pro-welcome-cta{
display:inline-flex;align-items:center;gap:8px;
padding:11px 20px;border-radius:var(--r-pill);
font-size:13px;font-weight:700;letter-spacing:.01em;
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
color:#fff;text-decoration:none;transition:all .2s;font-family:var(--font-b);
}
.pro-welcome-cta:hover{
background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3);
color:#fff;transform:translateY(-1px);
}
.pro-welcome-cta--primary{background:#fff;color:var(--pro);border-color:#fff;}
.pro-welcome-cta--primary:hover{background:#fff;color:#0F1E30;}
.pro-welcome-cta svg{stroke:currentColor;}
/* Variante "demande en cours" : bandeau rouge Proparo, gardees pour les demandes en validation */
.pro-welcome-banner--pending{
background:linear-gradient(135deg,#141412 0%,var(--brand) 60%,#8A0210 100%);
}
.pro-welcome-banner--pending .pro-welcome-dot{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.55);}
/* Invitation Pro discrete pour les non-Pro : carte standard (aligne sur .panel / .loyalty-card),
bordure uniforme sur tout le tour, teinte bleu Pro (var --pro). */
.pro-invite{
display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
padding:26px 28px;margin-bottom:24px;
background:var(--canvas);border:1px solid var(--pro);border-radius:var(--r-xl);
box-shadow:var(--sh-xs);
}
.pro-invite-body{flex:1;min-width:260px;}
.pro-invite-eyebrow{
font-family:var(--font-d);font-size:16px;font-weight:700;color:var(--ink);
letter-spacing:-.015em;margin-bottom:4px;
}
.pro-invite-text{
font-size:13px;color:var(--ink-mute);line-height:1.55;margin:0;
}
.pro-invite-link{
display:inline-flex;align-items:center;gap:6px;
font-size:13px;font-weight:600;color:var(--pro);text-decoration:none;
white-space:nowrap;transition:gap .2s;
}
.pro-invite-link:hover{gap:10px;color:var(--pro);text-decoration:none;}
.pro-invite-link svg{stroke:currentColor;}
/* Raccourcis Pro en ligne */
.pro-quick-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px;
}
.pro-quick-card{
background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
padding:18px 20px;transition:all .2s;
}
.pro-quick-card:hover{border-color:var(--pro-light);transform:translateY(-2px);}
.pro-quick-icon{
width:36px;height:36px;border-radius:50%;
background:var(--pro-light);color:var(--pro);
display:flex;align-items:center;justify-content:center;margin-bottom:10px;
}
.pro-quick-title{
font-family:var(--font-d);font-size:15px;font-weight:700;color:var(--ink);
margin-bottom:4px;letter-spacing:-.01em;
}
.pro-quick-text{font-size:12px;color:var(--ink-mute);line-height:1.5;}
.pro-quick-text a{color:var(--pro);font-weight:600;text-decoration:none;}
.pro-quick-text a:hover{text-decoration:underline;}
@media(max-width:900px){
.pro-quick-grid{grid-template-columns:1fr;}
.pro-welcome-title{font-size:22px;}
.pro-welcome-banner{padding:24px 22px;}
}
/* Bandeau access direct catalogue Pro (visible uniquement aux Pros connectes).
Sticky sous le header Proparo : promo-bar (~34px) + header-nav (~72px) = ~106px */
.pro-access-banner{
background:linear-gradient(135deg,#0F1E30 0%,var(--pro) 60%,#2A5280 100%);
color:#fff;padding:28px 0;
position:sticky;top:116px;z-index:90;
box-shadow:0 2px 12px rgba(15,30,48,.15);
}
@media (max-width:900px){
.pro-access-banner{top:104px;}
}
.pro-access-banner-inner{
display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.pro-access-banner-icon{
flex-shrink:0;width:42px;height:42px;border-radius:50%;
background:rgba(255,255,255,.14);color:#fff;
display:flex;align-items:center;justify-content:center;
border:1px solid rgba(255,255,255,.2);
}
.pro-access-banner-body{flex:1;min-width:0;}
.pro-access-banner-eyebrow{
font-size:11px;font-weight:700;letter-spacing:.12em;
color:rgba(255,255,255,.6);text-transform:uppercase;margin-bottom:2px;
}
.pro-access-banner-title{
font-family:var(--font-d);font-size:16px;font-weight:700;
color:#fff;letter-spacing:-.01em;line-height:1.3;
}
.pro-access-banner-cta{
display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
background:#fff;color:var(--pro);
font-size:13px;font-weight:700;letter-spacing:.01em;
padding:11px 20px;border-radius:var(--r-pill);
text-decoration:none;transition:all .2s;font-family:var(--font-b);
}
.pro-access-banner-cta:hover{
background:#F0F4FA;color:#0F1E30;transform:translateY(-1px);
}
.pro-access-banner-cta svg{stroke:currentColor;transition:transform .15s;}
.pro-access-banner-cta:hover svg{transform:translateX(3px);}
@media(max-width:640px){
.pro-access-banner-inner{justify-content:center;text-align:center;}
.pro-access-banner-body{text-align:left;}
.pro-access-banner-cta{width:100%;justify-content:center;}
}
/* ================================
ERREURS DE FORMULAIRE (identite, address, registration, etc.)
Le markup PS utilise .alert.alert-danger et .help-block - sans styles
par defaut dans le theme Proparo.
================================ */
#identity .alert-danger,
#address .alert-danger,
#authentication .alert-danger,
#registration .alert-danger,
#password .alert-danger,
#checkout .alert-danger{
display:flex;align-items:flex-start;gap:10px;
padding:12px 16px;margin:0 0 14px;
background:#FEF2F2;border:1px solid #FECACA;
border-radius:10px;
font-size:13px;color:#B91C1C;line-height:1.5;
list-style:none;
}
#identity .help-block,
#address .help-block,
#authentication .help-block,
#registration .help-block,
#password .help-block,
#checkout .help-block{margin-bottom:14px;}
#identity .help-block ul,
#address .help-block ul,
#authentication .help-block ul,
#registration .help-block ul,
#password .help-block ul,
#checkout .help-block ul{padding:0;margin:0;list-style:none;}
/* Message d'erreur sous un champ individuel */
#identity .field--error,
#address .field--error,
#authentication .field--error,
#registration .field--error,
#password .field--error,
#checkout .field--error{margin-bottom:18px;}
#identity .field--error .field-input,
#address .field--error .field-input,
#authentication .field--error .field-input,
#registration .field--error .field-input,
#password .field--error .field-input,
#checkout .field--error .field-input{
border-color:#D40012;background:#FFF8F8;
}
#identity .field--error .alert-danger,
#address .field--error .alert-danger,
#authentication .field--error .alert-danger,
#registration .field--error .alert-danger,
#password .field--error .alert-danger,
#checkout .field--error .alert-danger{
margin-top:6px;padding:8px 12px;font-size:12px;
}
/* Notifications globales (success, error, warning, info) dans #notifications */
#notifications{margin:16px 0 24px;}
#notifications .notifications-container{max-width:var(--container-max,1280px);margin:0 auto;padding:0 20px;}
#notifications .alert{
display:flex;align-items:flex-start;gap:10px;
padding:14px 18px;margin:0 0 12px;
border-radius:12px;font-size:14px;line-height:1.55;
border:1px solid transparent;
}
#notifications .alert ul{list-style:none;padding:0;margin:0;}
#notifications .alert li{padding:2px 0;}
#notifications .alert-success{
background:#EEF9F2;color:#1B6E2E;border-color:#B8E0C4;
}
#notifications .alert-success::before{
content:"";flex-shrink:0;width:20px;height:20px;border-radius:50%;
background:#1B9E3E url("data:image/svg+xml;utf8,") center/12px no-repeat;
margin-top:1px;
}
#notifications .alert-danger{
background:#FEF2F2;color:#B91C1C;border-color:#FECACA;
}
#notifications .alert-danger::before{
content:"";flex-shrink:0;width:20px;height:20px;border-radius:50%;
background:#D40012 url("data:image/svg+xml;utf8,") center/12px no-repeat;
margin-top:1px;
}
#notifications .alert-warning{
background:#FFFBEB;color:#92400E;border-color:#FDE68A;
}
#notifications .alert-info{
background:#EFF6FF;color:#1E40AF;border-color:#BFDBFE;
}
/* Identite : on masque les checkboxes (CGV, newsletter, opt-in, notice RGPD)
deja acceptees a l'inscription et accessibles depuis d'autres pages. */
#identity .field--check{display:none;}
/* Masque aussi le titre "Donnees personnelles" parfois injecte par psgdpr */
#identity .psgdpr_consent_message{display:none;}
/* ================================
PRO : boutons d'ajout au panier en bleu Pro (au lieu du rouge B2C)
Signal visuel fort que le client est dans l'espace professionnel.
Active uniquement si .
================================ */
body.is-pro-customer button.btn-atc,
body.is-pro-customer .btn-atc{
background:linear-gradient(135deg,#0F1E30 0%,var(--pro) 60%,#2A5280 100%);
box-shadow:0 6px 18px rgba(26,58,92,.28);
}
body.is-pro-customer .btn-atc:hover{
background:linear-gradient(135deg,#081525 0%,#12263E 60%,#1E3F66 100%);
box-shadow:0 12px 32px rgba(26,58,92,.38);
}
body.is-pro-customer .btn-atc:disabled{
background:var(--ink-hint);
box-shadow:none;
}
/* Overlay "Ajouter au panier" sur les miniatures produit (catalogue) */
body.is-pro-customer .pcard-add,
body.is-pro-customer .pro-pcard-add{
background:linear-gradient(135deg,#0F1E30 0%,var(--pro) 70%,#2A5280 100%);
}
body.is-pro-customer .pcard-add:hover,
body.is-pro-customer .pro-pcard-add:hover{
background:linear-gradient(135deg,#081525 0%,#12263E 70%,#1E3F66 100%);
}
/* Bouton "Voir le produit" des cards Pro sur /espace-professionnel */
body.is-pro-customer .pro-pcard-cta{
color:var(--pro);border-color:var(--pro);
}
body.is-pro-customer .pro-pcard-cta:hover{
background:var(--pro);color:#fff;
}
/* Temoignages Pros - Slider */
.testi-slider-wrap{position:relative;}
.testi-slider{
display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
-ms-overflow-style:none;scrollbar-width:none;padding:4px 0;
}
.testi-slider::-webkit-scrollbar{display:none;}
.testi-card{
background:var(--canvas);border:1px solid var(--border);
border-radius:var(--r-lg);padding:24px;
transition:box-shadow .25s,transform .25s;
min-width:340px;scroll-snap-align:start;flex-shrink:0;
}
.testi-card:hover{box-shadow:var(--sh-md);transform:translateY(-3px);}
.testi-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;}
.testi-avatar{
width:44px;height:44px;border-radius:50%;
background:var(--pro-light);border:2px solid rgba(26,58,92,.1);
display:flex;align-items:center;justify-content:center;
font-family:var(--font-d);font-size:15px;font-weight:700;color:var(--pro);
flex-shrink:0;
}
.testi-avatar--success{background:#EEF9F2;color:var(--success);}
.testi-avatar--alert{background:#FFF6EE;color:var(--alert);}
.testi-name{font-size:14px;font-weight:700;color:var(--ink);}
.testi-role{font-size:11px;color:var(--ink-mute);margin-top:1px;}
.testi-stars{color:var(--stars);font-size:12px;letter-spacing:1px;margin-bottom:10px;}
.testi-text{font-size:13px;color:var(--ink-mid);line-height:1.7;font-style:italic;}
.testi-product{
margin-top:12px;padding-top:12px;border-top:1px solid var(--border);
display:flex;align-items:center;gap:7px;
font-size:11px;color:var(--pro);font-weight:500;
}
.testi-arrow{
position:absolute;top:50%;transform:translateY(-50%);
width:44px;height:44px;border-radius:50%;
background:#fff;border:1px solid var(--border);
box-shadow:0 2px 8px rgba(0,0,0,.1);
display:flex;align-items:center;justify-content:center;
cursor:pointer;z-index:3;transition:opacity .2s,transform .2s;
}
.testi-arrow:hover{transform:translateY(-50%) scale(1.05);}
.testi-arrow--prev{left:-22px;}
.testi-arrow--next{right:-22px;}
.testi-arrow.hidden{opacity:0;pointer-events:none;}
/* Reassurance Pro */
.pro-reassurance{background:var(--ink);padding:22px 0;}
.pro-reass-inner{display:grid;grid-template-columns:repeat(4,1fr);}
.pro-reass-item{display:flex;align-items:center;gap:14px;padding:6px 32px;border-right:1px solid rgba(255,255,255,.07);}
.pro-reass-item:last-child{border-right:none;}
.pro-reass-icon{width:38px;height:38px;min-width:38px;background:rgba(255,255,255,.06);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;}
.pro-reass-title{font-size:13px;font-weight:600;color:#fff;}
.pro-reass-sub{font-size:11px;color:rgba(255,255,255,.38);margin-top:1px;}
/* Pro page utilities */
.pro-section-centered{text-align:center;max-width:600px;margin:0 auto 52px;}
.pro-centered-eyebrow{justify-content:center;}
.pro-centered-desc{max-width:100%;}
.pro-catalogue-header{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-bottom:48px;}
.btn-pro-primary--sm{font-size:14px;padding:13px 24px;}
.pro-type-section{margin-bottom:14px;}
.pro-type-label{font-size:11px;font-weight:600;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;}
.pro-mb8{margin-bottom:8px;}
.pro-mb16{margin-bottom:16px;}
.pro-mb36{margin-bottom:36px;}
.pro-mb48{margin-bottom:48px;}
.pro-mb56{margin-bottom:56px;}
.pro-mt14{margin-top:14px;}
.pro-mt16{margin-top:16px;}
.sr-only{position:absolute;opacity:0;pointer-events:none;}
.rpps-input-padded{padding-right:120px;}
.rpps-info-icon{flex-shrink:0;margin-top:1px;}
/* RPPS validation states */
.rpps-status{
position:absolute;right:60px;top:50%;transform:translateY(-50%);
display:inline-flex;align-items:center;justify-content:center;
width:24px;height:24px;
}
.rpps-spinner{
display:block;width:16px;height:16px;
border:2px solid #E8E8E2;border-top-color:var(--pro);
border-radius:50%;
animation:rpps-spin .6s linear infinite;
}
@keyframes rpps-spin{to{transform:rotate(360deg);}}
.rpps-valid{
color:#1B9E3E;font-size:18px;font-weight:700;line-height:1;
}
.rpps-invalid{
color:#D40012;font-size:18px;font-weight:700;line-height:1;
}
.rpps-hint{
font-size:12px;color:#8A8A84;margin-top:6px;margin-bottom:4px;
padding-left:2px;line-height:1.5;
}
.rpps-autofill-msg{
display:none;margin-top:8px;margin-bottom:4px;
padding:10px 14px;border-radius:var(--r-md);
font-size:13px;font-weight:500;line-height:1.5;
}
.rpps-autofill-msg-visible{
display:block;
background:#E8F5EC;color:#1B6E2E;
border:1px solid #B8E0C4;
}
.rpps-autofill-msg-error{
display:block;
background:#FEF2F2;color:#B91C1C;
border:1px solid #FECACA;
}
.field-input.rpps-verified{
background:#FAFFF5;
}
.field-input.rpps-error{
background:#FFFAFA;
}
.rpps-edit-link{
position:absolute;right:12px;top:50%;transform:translateY(-50%);
font-size:11px;color:var(--pro);font-weight:600;
text-decoration:underline;cursor:pointer;
}
/* B2B 2-step form */
.b2b-step{animation:fadeSlideIn .4s ease both;}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.b2b-step-badge{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--ink-mute);margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--border);}
.b2b-step-num{width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
.rpps-field--big .field-input{font-size:20px;letter-spacing:.08em;padding:18px 90px 18px 18px;height:auto;}
.rpps-field--big .field-label{font-size:14px;}
.rpps-alt-link{margin-top:16px;font-size:13px;color:var(--ink-mute);}
.rpps-alt-link a{color:var(--pro);font-weight:600;text-decoration:underline;}
.rpps-alt-link a:hover{color:var(--brand);}
/* B2B ID type selector (RPPS / FINESS / SIRET) */
.b2b-id-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px;}
.b2b-id-option{
padding:16px;border:1.5px solid var(--border);border-radius:var(--r-lg);
cursor:pointer;text-align:center;transition:all .2s;
background:var(--canvas);
}
.b2b-id-option:hover{border-color:var(--ink-mute);}
.b2b-id-option.active{border-color:var(--brand);background:var(--brand-light);box-shadow:0 0 0 3px rgba(212,0,18,.08);}
.b2b-id-option-icon{margin-bottom:8px;color:var(--ink-hint);}
.b2b-id-option.active .b2b-id-option-icon{color:var(--brand);}
.b2b-id-option-title{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:4px;}
.b2b-id-option-desc{font-size:11px;color:var(--ink-mute);}
@media (max-width:640px){.b2b-id-selector{grid-template-columns:1fr;}}
.rpps-identity-card{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:1.5px solid #86efac;border-radius:var(--r-lg);padding:18px 20px;margin-bottom:24px;animation:fadeSlideIn .35s ease;}
.rpps-identity-check{width:36px;height:36px;border-radius:50%;background:#22c55e;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.rpps-identity-info{flex:1;min-width:0;}
.rpps-identity-name{font-family:var(--font-d);font-size:17px;font-weight:700;color:var(--ink);}
.rpps-identity-meta{font-size:13px;color:var(--ink-mute);margin-top:2px;}
.rpps-identity-edit{font-size:12px;color:var(--pro);font-weight:600;text-decoration:underline;flex-shrink:0;}
/* Pro page responsive */
@media(max-width:1024px){
.hero-pro-inner{grid-template-columns:1fr;gap:40px;}
.profiles-grid{grid-template-columns:repeat(2,1fr);}
.advantages-layout{grid-template-columns:1fr;}
.process-grid{grid-template-columns:repeat(2,1fr);gap:32px;}
.process-grid::before{display:none;}
.pro-products-grid{grid-template-columns:repeat(2,1fr);}
.testi-card{min-width:280px;}
.form-layout{grid-template-columns:1fr;gap:40px;}
.pro-reass-inner{grid-template-columns:repeat(2,1fr);gap:16px;}
.pro-reass-item{border-right:none;}
}
@media(max-width:640px){
.hero-pro-h1{font-size:clamp(30px,8vw,42px);}
.hero-pro-ctas{flex-direction:column;align-items:stretch;}
.hero-pro-stats{flex-direction:column;gap:16px;}
.profiles-grid{grid-template-columns:1fr;}
.process-grid{grid-template-columns:1fr;}
.pro-products-grid{grid-template-columns:1fr;}
.form-grid-2{grid-template-columns:1fr;}
.type-grid{grid-template-columns:1fr;}
.pro-reass-inner{grid-template-columns:1fr;}
.pro-catalogue-header{flex-direction:column;align-items:flex-start;}
}
/* ============================================================
SECTION 4 - BLOG CATEGORIE
Source : /tmp/css_blog.txt
============================================================ */
/* Hero Blog */
.blog-hero{padding-top:0;background:var(--canvas);}
.blog-hero-inner{display:grid;grid-template-columns:1fr 1fr;min-height:380px;}
/* Colonne gauche hero blog */
.blog-hero-left{padding:56px 56px 52px 0;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--border);}
.blog-hero-right{position:relative;overflow:hidden;cursor:pointer;}
.blog-hero-right:hover .hero-feat-img{transform:scale(1.04);}
/* Article vedette hero */
.hero-feat-img-wrap{position:absolute;inset:0;overflow:hidden;}
.hero-feat-img{width:100%;height:100%;background:var(--canvas-deep);display:flex;align-items:center;justify-content:center;transition:transform .5s var(--ease);}
.hero-feat-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,20,18,.82) 0%,rgba(20,20,18,.1) 55%,transparent 100%);}
.hero-feat-content{position:absolute;bottom:0;left:0;right:0;padding:32px;}
.hero-feat-cat{display:inline-flex;align-items:center;gap:6px;background:var(--brand);color:#fff;font-size:10px;font-weight:700;padding:4px 10px;border-radius:var(--r-pill);letter-spacing:.05em;text-transform:uppercase;margin-bottom:10px;}
.hero-feat-title{font-family:var(--font-d);font-size:clamp(18px,2vw,26px);font-weight:700;color:#fff;line-height:1.2;margin-bottom:10px;letter-spacing:-.015em;}
.hero-feat-meta{display:flex;align-items:center;gap:14px;font-size:12px;color:rgba(255,255,255,.55);}
.hero-feat-read{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.7);font-size:12px;font-weight:600;margin-top:14px;transition:gap .15s;}
.blog-hero-right:hover .hero-feat-read{gap:10px;}
/* Filtres blog */
.blog-filters{background:var(--canvas);border-bottom:1px solid var(--border);position:sticky;top:68px;z-index:100;box-shadow:var(--sh-xs);}
.blog-filter-btn{display:flex;align-items:center;gap:7px;padding:16px 18px;border-bottom:2px solid transparent;font-size:13px;font-weight:600;color:var(--ink-mute);cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s;margin-bottom:-1px;background:transparent;}
.blog-filter-btn:hover{color:var(--ink);}
.blog-filter-btn.active{color:var(--brand);border-bottom-color:var(--brand);}
/* Grille articles */
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
/* Card article blog */
.acard{background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;cursor:pointer;transition:box-shadow .28s,transform .28s,opacity .3s,scale .3s;display:flex;flex-direction:column;}
.acard.cat-hidden{opacity:0;scale:.95;position:absolute;pointer-events:none;width:0;height:0;overflow:hidden;margin:0;padding:0;border:none;}
.acard:hover{box-shadow:var(--sh-lg);transform:translateY(-4px);}
.acard:hover .acard-img{transform:scale(1.04);}
.acard.featured{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;}
.acard-img-wrap{overflow:hidden;background:var(--canvas-deep);aspect-ratio:16/9;position:relative;}
.acard.featured .acard-img-wrap{aspect-ratio:unset;}
.acard-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-style:italic;font-size:11px;color:var(--ink-hint);text-align:center;line-height:1.6;transition:transform .4s var(--ease);}
.acard-body{padding:22px 24px;display:flex;flex-direction:column;flex:1;}
.acard.featured .acard-body{padding:32px;}
.acard-cat{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;}
.acard-title{font-family:var(--font-d);font-size:18px;font-weight:700;color:var(--ink);line-height:1.25;letter-spacing:-.015em;margin-bottom:10px;}
.acard.featured .acard-title{font-size:clamp(20px,2.4vw,28px);}
.acard-excerpt{font-size:13px;color:var(--ink-mute);line-height:1.7;margin-bottom:16px;flex:1;}
.acard-meta{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--border);flex-wrap:wrap;gap:8px;}
.acard-read-more{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--brand);transition:gap .15s;}
.acard:hover .acard-read-more{gap:8px;}
/* Acard meta left / author / avatar / tag */
.acard-meta-left{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-hint);}
.acard-author{display:flex;align-items:center;gap:6px;}
.acard-avatar{width:22px;height:22px;border-radius:50%;background:var(--brand-light);display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:9px;font-weight:700;color:var(--brand);}
.acard-tag{display:inline-flex;background:var(--canvas-deep);border:1px solid var(--border);border-radius:var(--r-pill);padding:3px 9px;font-size:10px;font-weight:500;color:var(--ink-mute);}
.acard.cat-hidden{display:none;}
/* Load more */
.load-more-wrap{text-align:center;margin-top:32px;}
.btn-load-more{display:inline-flex;align-items:center;gap:9px;background:var(--canvas);border:1.5px solid var(--border-mid);color:var(--ink-mid);font-size:14px;font-weight:600;padding:13px 28px;border-radius:var(--r-pill);transition:all .2s;cursor:pointer;}
.btn-load-more:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-light);}
/* Blog main layout */
.blog-main{padding:56px 0 88px;background:var(--canvas-warm);}
.blog-layout{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start;}
/* Articles header */
.articles-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:12px;}
.articles-title{font-family:var(--font-d);font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.015em;}
.articles-count{font-size:13px;color:var(--ink-hint);}
.articles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
/* Hero blog stats */
.hero-stats{display:flex;gap:32px;}
.stat-num{font-family:var(--font-d);font-size:30px;font-weight:800;color:var(--brand);letter-spacing:-.03em;line-height:1;}
.stat-lbl{font-size:11px;color:var(--ink-hint);margin-top:4px;}
.hero-feat-img-placeholder{font-family:var(--font-d);font-style:italic;font-size:14px;color:var(--ink-hint);text-align:center;line-height:1.7;}
/* Sidebar blog */
.sidebar{display:flex;flex-direction:column;gap:20px;position:sticky;top:120px;}
/* Widget newsletter */
.newsletter-card{background:var(--ink);border-radius:var(--r-xl);padding:28px;position:relative;overflow:hidden;}
.newsletter-card::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:36px 36px;}
.newsletter-glow{position:absolute;right:-40px;bottom:-40px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(212,0,18,.18) 0%,transparent 65%);}
.nl-eyebrow{font-size:10px;font-weight:700;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;position:relative;z-index:1;}
.nl-title{font-family:var(--font-d);font-size:19px;font-weight:700;color:#fff;line-height:1.25;margin-bottom:8px;position:relative;z-index:1;}
.nl-title em{font-style:italic;color:var(--brand);}
.nl-body{font-size:12px;color:rgba(255,255,255,.65);line-height:1.6;margin-bottom:18px;position:relative;z-index:1;}
.nl-form{position:relative;z-index:1;}
.nl-input{width:100%;padding:12px 14px;font-size:13px;color:var(--ink);background:rgba(255,255,255,.9);border:none;border-radius:var(--r-md);outline:none;font-family:var(--font-b);margin-bottom:10px;}
.nl-input::placeholder{color:var(--ink-mute);}
.nl-btn{width:100%;height:44px;background:var(--brand);color:#fff;font-size:13px;font-weight:700;border-radius:var(--r-md);border:none;box-shadow:var(--brand-sh);transition:background .15s;cursor:pointer;font-family:var(--font-b);}
.nl-btn:hover{background:var(--brand-dk);}
.nl-consent{font-size:11px;color:rgba(255,255,255,.45);margin-top:8px;line-height:1.5;}
/* Widget categories sidebar */
.sidebar-card{background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;}
.sidebar-card-title{font-size:13px;font-weight:700;color:var(--ink);padding:18px 20px;border-bottom:1px solid var(--border);}
.sidebar-cats{display:flex;flex-direction:column;gap:0;}
.sidebar-cat{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;font-size:13px;color:var(--ink-mute);}
.sidebar-cat:last-child{border-bottom:none;}
.sidebar-cat:hover{background:var(--canvas-warm);color:var(--ink);}
.sidebar-cat.active{color:var(--brand);font-weight:600;background:var(--brand-light);}
.sidebar-cat-count{font-size:11px;font-weight:700;background:var(--canvas-deep);color:var(--ink-hint);padding:2px 7px;border-radius:var(--r-pill);}
.sidebar-cat.active .sidebar-cat-count{background:var(--brand);color:#fff;}
/* Articles populaires sidebar */
.sidebar-pop-items{display:flex;flex-direction:column;gap:0;}
.sidebar-pop-item{display:flex;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;align-items:flex-start;}
.sidebar-pop-item:last-child{border-bottom:none;}
.sidebar-pop-item:hover{background:var(--canvas-warm);}
.sidebar-pop-num{font-family:var(--font-d);font-size:20px;font-weight:800;color:var(--border);letter-spacing:-.04em;line-height:1;min-width:24px;}
.sidebar-pop-title{font-size:12px;font-weight:600;color:var(--ink);line-height:1.45;margin-bottom:4px;}
.sidebar-pop-meta{font-size:11px;color:var(--ink-hint);}
/* Tags cloud */
.tags-wrap{padding:16px 20px;display:flex;flex-wrap:wrap;gap:7px;}
.tag-pill{display:inline-flex;background:var(--canvas-warm);border:1px solid var(--border);border-radius:var(--r-pill);padding:5px 12px;font-size:11px;font-weight:500;color:var(--ink-mute);cursor:pointer;transition:all .15s;}
.tag-pill:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-light);}
/* Pagination blog */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:32px;}
.pg-btn{width:38px;height:38px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--ink-mute);border:1.5px solid var(--border);background:var(--canvas);cursor:pointer;transition:all .15s;}
.pg-btn:hover{border-color:var(--brand);color:var(--brand);}
.pg-btn.active{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 2px 8px rgba(212,0,18,.2);}
.pg-btn.pg-nav{width:auto;padding:0 14px;gap:6px;}
/* Nav blog active */
.nav-a.blog-active{color:var(--brand);font-weight:600;}
/* Blog list page (template list.tpl) */
.blog-list-page{padding-top:48px;padding-bottom:80px;}
.blog-list-header{margin-bottom:48px;}
.blog-list-intro{font-size:16px;color:var(--ink-mute);max-width:520px;}
/* Blog post single (template post.tpl) */
.blog-post-single{padding-top:48px;padding-bottom:80px;max-width:800px;}
.blog-back-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink-mute);margin-bottom:32px;text-decoration:none;transition:color .15s;}
.blog-back-link:hover{color:var(--brand);}
.blog-post-header{margin-bottom:32px;}
.blog-tag--static{position:static;margin-bottom:16px;display:inline-block;}
.blog-post-h1{font-family:var(--font-d);font-size:clamp(24px,4vw,38px);font-weight:800;color:var(--ink);line-height:1.2;margin:0 0 16px;}
.blog-post-meta{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-mute);}
.blog-post-hero-img{border-radius:18px;overflow:hidden;aspect-ratio:16/9;margin-bottom:40px;}
.blog-post-hero-img img{width:100%;height:100%;object-fit:cover;display:block;}
.blog-post-excerpt-highlight{font-size:17px;color:var(--ink-mid);line-height:1.7;background:var(--canvas-warm);border:1px solid var(--border);border-radius:14px;padding:20px 24px;margin-bottom:32px;font-style:italic;}
.blog-post-cta{margin-top:56px;padding:32px;background:#F8F7F4;border-radius:18px;text-align:center;}
.blog-post-cta-text{font-size:15px;color:var(--ink-mute);margin-bottom:20px;}
/* ============================================================
SECTION 5 - ARTICLE BLOG
Source : /tmp/css_article.txt
============================================================ */
/* Hero article */
.article-hero{padding-top:88px;padding-bottom:0;background:var(--canvas-warm);border-bottom:1px solid var(--border);}
.article-h1{font-family:var(--font-d);font-size:clamp(30px,4vw,52px);font-weight:800;color:var(--ink);line-height:1.1;letter-spacing:-.03em;margin-bottom:20px;}
.article-h1 em{font-style:italic;color:var(--brand);}
.article-intro{font-size:19px;color:var(--ink-mute);line-height:1.7;margin-bottom:28px;max-width:640px;}
.article-meta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:20px 0;border-top:1px solid var(--border);}
.meta-author{display:flex;align-items:center;gap:10px;}
.meta-avatar{width:40px;height:40px;border-radius:50%;background:var(--brand-light);border:2px solid rgba(212,0,18,.15);display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:14px;font-weight:700;color:var(--brand);}
.meta-name{font-size:13px;font-weight:700;color:var(--ink);}
.meta-role{font-size:11px;color:var(--ink-hint);margin-top:1px;}
.meta-sep{width:1px;height:28px;background:var(--border);}
.meta-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-hint);}
.meta-item strong{color:var(--ink-mid);font-weight:600;}
.share-btns{margin-left:auto;display:flex;gap:6px;}
.share-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--ink-hint);transition:all .15s;}
.share-btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-light);}
.article-img{border-radius:var(--r-lg);overflow:hidden;margin:32px 0;}
.article-img img{width:100%;height:auto;display:block;border-radius:var(--r-lg);}
/* Image hero article */
.hero-image{max-width:860px;margin:0 auto;padding:0 40px;}
.hero-img-block{
background:var(--canvas-deep);border-radius:0 0 var(--r-xl) var(--r-xl);
aspect-ratio:16/7;display:flex;align-items:center;justify-content:center;
font-family:var(--font-d);font-style:italic;font-size:15px;color:var(--ink-hint);
text-align:center;line-height:1.7;overflow:hidden;
}
/* Layout article */
.article-wrap{max-width:1200px;margin:0 auto;padding:0 40px;}
.article-layout{display:grid;grid-template-columns:680px 1fr;gap:72px;padding:60px 0 100px;align-items:start;}
.article-col-main{max-width:680px;}
.article-col-aside{position:sticky;top:100px;}
/* Contenu article */
.article-content{max-width:680px;}
.article-content h2{
font-family:var(--font-d);font-size:clamp(22px,2.5vw,30px);font-weight:700;
color:var(--ink);letter-spacing:-.02em;line-height:1.2;
margin:52px 0 16px;padding-top:8px;
scroll-margin-top:120px;
}
.article-content h2:first-child{margin-top:0;}
.article-content h3{
font-family:var(--font-d);font-size:20px;font-weight:700;
color:var(--ink);letter-spacing:-.015em;line-height:1.3;
margin:32px 0 12px;
scroll-margin-top:120px;
}
.article-content p{font-size:17px;color:var(--ink-mid);line-height:1.82;margin-bottom:20px;}
.article-content p:last-child{margin-bottom:0;}
.article-content strong{color:var(--ink);font-weight:600;}
.article-content em{font-style:italic;}
.article-content a{color:var(--brand);text-decoration:underline;text-underline-offset:3px;}
.article-content a:hover{color:var(--brand-dk);}
.article-content ul,.article-content ol{padding-left:24px;margin:16px 0 20px;display:flex;flex-direction:column;gap:8px;}
.article-content li{font-size:16px;color:var(--ink-mid);line-height:1.7;}
.article-content li::marker{color:var(--brand);}
.article-content blockquote{
border-left:4px solid var(--brand);
border-radius:0 var(--r-md) var(--r-md) 0;
background:var(--brand-light);
padding:20px 24px;margin:32px 0;
}
/* Pull quote */
.pull-quote{
border-left:4px solid var(--brand);
border-radius:0 var(--r-md) var(--r-md) 0;
background:var(--brand-light);
padding:20px 24px;margin:32px 0;
}
.pull-quote-text{font-family:var(--font-d);font-size:19px;font-style:italic;color:var(--ink-mid);line-height:1.6;}
.pull-quote-author{font-size:12px;font-weight:700;color:var(--ink-hint);margin-top:10px;text-transform:uppercase;letter-spacing:.06em;}
/* Highlight box article */
.highlight-icon{width:36px;height:36px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
.highlight-icon.info{background:var(--pro-light);}
.highlight-icon.tip{background:var(--success-bg);}
.highlight-icon.warn{background:#FFF6EE;}
.highlight-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px;}
.highlight-body{font-size:14px;color:var(--ink-mute);line-height:1.7;}
.highlight-body strong{color:var(--ink);}
.highlight-body a{color:var(--brand);}
/* CTA produit inline */
.inline-product{
background:var(--canvas);border:1.5px solid var(--border);
border-radius:var(--r-lg);padding:18px 20px;margin:28px 0;
display:flex;gap:16px;align-items:center;
box-shadow:var(--sh-xs);transition:border-color .2s,box-shadow .2s;
}
.inline-product:hover{border-color:var(--brand);box-shadow:var(--sh-sm);}
.inline-prod-img{width:64px;height:64px;border-radius:var(--r-md);background:var(--canvas-warm);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-style:italic;font-size:8px;color:var(--ink-hint);text-align:center;line-height:1.4;flex-shrink:0;}
.inline-prod-info{flex:1;}
.inline-prod-label{font-size:10px;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px;}
.inline-prod-name{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:2px;}
.inline-prod-desc{font-size:12px;color:var(--ink-mute);}
.inline-prod-right{text-align:right;flex-shrink:0;}
.inline-prod-price{font-size:18px;font-weight:800;color:var(--brand);letter-spacing:-.02em;margin-bottom:6px;}
.inline-prod-cta{display:inline-flex;align-items:center;gap:6px;background:var(--brand);color:#fff;font-size:12px;font-weight:700;padding:8px 16px;border-radius:var(--r-pill);transition:background .15s;cursor:pointer;border:none;font-family:var(--font-b);}
.inline-prod-cta:hover{background:var(--brand-dk);}
/* Protocole etapes */
.protocol-steps{display:flex;flex-direction:column;gap:0;margin:28px 0;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;}
.protocol-step{display:flex;gap:20px;padding:22px 24px;background:var(--canvas);border-bottom:1px solid var(--border);align-items:flex-start;}
.protocol-step:last-child{border-bottom:none;}
.protocol-step:nth-child(even){background:var(--canvas-warm);}
.step-num{font-family:var(--font-d);font-size:32px;font-weight:800;color:var(--border);line-height:1;min-width:44px;letter-spacing:-.04em;}
.step-timing{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--brand);background:var(--brand-light);border-radius:var(--r-pill);padding:3px 8px;margin-bottom:6px;letter-spacing:.04em;text-transform:uppercase;}
.step-title{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:5px;}
.step-body{font-size:14px;color:var(--ink-mute);line-height:1.7;}
.step-body strong{color:var(--ink);}
.step-body a{color:var(--brand);}
/* Image article block + caption */
.article-img-block{background:var(--canvas-deep);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-style:italic;font-size:14px;color:var(--ink-hint);text-align:center;line-height:1.7;}
.article-img-caption{font-size:12px;color:var(--ink-hint);text-align:center;margin-top:8px;font-style:italic;}
/* FAQ dans article */
.article-faq{margin:40px 0;}
.article-faq-title{font-family:var(--font-d);font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.015em;margin-bottom:20px;}
.faq-mini-item{border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:10px;overflow:hidden;}
.faq-mini-q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 20px;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left;line-height:1.3;background:var(--canvas);transition:background .15s;}
.faq-mini-q:hover{background:var(--canvas-warm);}
.faq-mini-item.open .faq-mini-q{background:var(--brand-light);color:var(--brand);}
.faq-mini-chevron{flex-shrink:0;color:var(--ink-hint);transition:transform .3s var(--ease),color .2s;margin-top:2px;}
.faq-mini-item.open .faq-mini-chevron{transform:rotate(180deg);color:var(--brand);}
.faq-mini-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);}
.faq-mini-item.open .faq-mini-a{max-height:400px;}
.faq-mini-a-inner{padding:4px 20px 18px;font-size:14px;color:var(--ink-mid);line-height:1.75;}
.faq-mini-a-inner a{color:var(--brand);}
/* Sidebar article */
.article-sidebar{position:sticky;top:100px;display:flex;flex-direction:column;gap:20px;}
.article-cta{background:var(--ink);border-radius:var(--r-xl);padding:36px 40px;margin:48px 0;display:flex;gap:32px;align-items:center;position:relative;overflow:hidden;}
.article-cta::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:36px 36px;}
.article-cta-glow{position:absolute;right:-60px;top:50%;transform:translateY(-50%);width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(212,0,18,.18) 0%,transparent 65%);pointer-events:none;}
.article-cta-content{flex:1;position:relative;z-index:1;}
.article-cta-eyebrow{font-size:10px;font-weight:700;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;}
.article-cta-title{font-family:var(--font-d);font-size:22px;font-weight:800;color:#fff;line-height:1.2;letter-spacing:-.02em;margin-bottom:8px;}
.article-cta-title em{font-style:italic;color:var(--brand);}
.article-cta-body{font-size:14px;color:rgba(255,255,255,.45);line-height:1.6;}
.article-cta-btns{display:flex;flex-direction:column;gap:10px;flex-shrink:0;position:relative;z-index:1;}
a.cta-btn-primary,a.cta-btn-primary:visited,a.cta-btn-primary:link{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff !important;font-size:13px;font-weight:700;padding:13px 22px;border-radius:var(--r-pill);box-shadow:var(--brand-sh);transition:all .25s;white-space:nowrap;cursor:pointer;border:none;font-family:var(--font-b);text-decoration:none;}
a.cta-btn-primary:hover{background:var(--brand-dk);color:#fff !important;transform:translateY(-1px);box-shadow:0 4px 12px rgba(212,0,18,.25);}
.cta-btn-secondary{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.55);font-size:12px;font-weight:500;padding:10px 18px;border:1px solid rgba(255,255,255,.15);border-radius:var(--r-pill);transition:all .2s;white-space:nowrap;}
.cta-btn-secondary:hover{color:#fff;border-color:rgba(255,255,255,.35);}
/* Tags article */
.article-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
.tag{display:inline-flex;align-items:center;gap:5px;background:var(--brand-light);color:var(--brand);border:1px solid rgba(212,0,18,.15);border-radius:var(--r-pill);padding:5px 12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;transition:background .15s;}
.tag:hover{background:#ffe0e2;}
.tag.cat{background:var(--canvas-deep);color:var(--ink-mute);border-color:var(--border);}
/* Sommaire */
.toc{background:var(--canvas-warm);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 22px;margin-bottom:20px;}
.toc-title{font-size:12px;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.toc-title-icon{width:20px;height:20px;border-radius:4px;background:var(--brand-light);display:flex;align-items:center;justify-content:center;}
.toc-links{display:flex;flex-direction:column;gap:0;}
.toc-items{display:flex;flex-direction:column;gap:0;}
.toc-item{display:flex;align-items:flex-start;gap:9px;padding:7px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:color .15s;}
.toc-item:last-child{border-bottom:none;}
.toc-item:hover .toc-text{color:var(--brand);}
.toc-item.active .toc-text{color:var(--brand);font-weight:600;}
.toc-dot{width:6px;height:6px;border-radius:50%;background:var(--border-mid);flex-shrink:0;margin-top:7px;transition:background .15s;}
.toc-item.active .toc-dot{background:var(--brand);}
.toc-text{font-size:12px;color:var(--ink-mute);line-height:1.5;}
.toc-sub{padding-left:15px;}
.toc-sub .toc-dot{width:4px;height:4px;background:var(--border);}
.toc-sub .toc-text{font-size:11px;color:var(--ink-hint);}
/* Produit sidebar */
.product-sidebar{background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-sm);}
.sidebar-prod-title{font-size:11px;font-weight:700;color:var(--ink-hint);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;}
.sidebar-prod-item{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--border);}
.sidebar-prod-item:last-of-type{border-bottom:none;}
.sidebar-prod-img{width:52px;height:52px;border-radius:var(--r-sm);background:var(--canvas-warm);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-style:italic;font-size:7px;color:var(--ink-hint);text-align:center;line-height:1.4;flex-shrink:0;}
.sidebar-prod-name{font-size:12px;font-weight:600;color:var(--ink);line-height:1.3;margin-bottom:4px;}
.sidebar-prod-price{font-size:13px;font-weight:800;color:var(--brand);margin-bottom:6px;}
.sidebar-prod-btn{display:inline-flex;align-items:center;gap:5px;background:var(--brand);color:#fff;font-size:10px;font-weight:700;padding:6px 12px;border-radius:var(--r-pill);transition:background .15s;cursor:pointer;border:none;font-family:var(--font-b);}
.sidebar-prod-btn:hover{background:var(--brand-dk);}
/* Sidebar partage */
.share-sidebar{background:var(--canvas-warm);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;margin-top:20px;}
.share-sidebar-title{font-size:11px;font-weight:700;color:var(--ink-hint);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;}
.share-sidebar-btns{display:flex;gap:8px;}
.share-s-btn{flex:1;padding:9px 8px;border-radius:var(--r-md);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;font-weight:600;color:var(--ink-mute);background:var(--canvas);transition:all .15s;cursor:pointer;}
.share-s-btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-light);}
/* Auteur */
.author-block{background:var(--canvas-warm);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;display:flex;gap:18px;margin:40px 0;}
.author-avatar{width:56px;height:56px;border-radius:50%;background:var(--brand-light);border:2px solid rgba(212,0,18,.15);display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:20px;font-weight:700;color:var(--brand);flex-shrink:0;}
.author-name{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:2px;}
.author-role{font-size:12px;color:var(--ink-hint);margin-bottom:8px;}
.author-bio{font-size:13px;color:var(--ink-mute);line-height:1.6;}
/* Articles lies */
.related-articles{padding:64px 0;background:var(--canvas-warm);border-top:1px solid var(--border);}
.related-title-block{text-align:center;max-width:480px;margin:0 auto 40px;}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.related-card{background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:box-shadow .25s,transform .25s;}
.related-card:hover{box-shadow:var(--sh-md);transform:translateY(-4px);}
.related-card:hover .related-card-img{transform:scale(1.04);}
.related-img-wrap{background:var(--canvas-deep);aspect-ratio:3/2;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.related-card-img{font-family:var(--font-d);font-style:italic;font-size:12px;color:var(--ink-hint);text-align:center;line-height:1.6;transition:transform .4s var(--ease);}
.related-card-body{padding:18px;}
.related-card-cat{font-size:10px;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;}
.related-card-title{font-size:15px;font-weight:700;color:var(--ink);line-height:1.35;margin-bottom:8px;}
.related-card-read{font-size:11px;color:var(--ink-hint);}
/* ============================================================
SECTION 6 - PAGES LEGALES
Source : /tmp/css_legal.txt
============================================================ */
/* Hero legale */
.legal-hero{background:var(--canvas-warm);border-bottom:1px solid var(--border);padding:52px 0 44px;}
.legal-eyebrow{font-size:11px;font-weight:700;color:var(--brand);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:10px;}
.legal-eyebrow::before{content:'';width:20px;height:2px;background:var(--brand);border-radius:1px;}
.legal-h1{font-family:var(--font-d);font-size:clamp(28px,4vw,44px);font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.1;margin-bottom:14px;}
.legal-meta{font-size:13px;color:var(--ink-hint);}
.legal-meta strong{color:var(--ink-mute);}
/* Layout legal */
.legal-layout{display:grid;grid-template-columns:1fr 260px;gap:64px;align-items:start;}
.legal-main{padding:52px 0 88px;}
.legal-toc{position:sticky;top:80px;padding-top:52px;}
/* Sommaire legal */
.toc-links{display:flex;flex-direction:column;gap:4px;}
.toc-links a{font-size:13px;color:var(--ink-mute);padding:6px 10px;border-radius:var(--r-md);transition:color .15s,background .15s;display:block;}
.toc-links a:hover{color:var(--brand);background:var(--brand-light);}
.toc-links a.active{color:var(--brand);font-weight:600;}
/* Contenu legal */
.legal-content{padding:52px 0 88px;}
.legal-content h2{font-family:var(--font-d);font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.015em;margin:44px 0 14px;padding-top:8px;border-top:1px solid var(--border);}
.legal-content h2:first-child{margin-top:0;border-top:none;}
.legal-content h3{font-size:16px;font-weight:700;color:var(--ink);margin:24px 0 10px;}
.legal-content p{margin-bottom:16px;color:var(--ink-mid);}
.legal-content ul{padding-left:24px;margin:12px 0 16px;display:flex;flex-direction:column;gap:7px;}
.legal-content li{color:var(--ink-mid);}
.legal-content strong{color:var(--ink);font-weight:600;}
/* Boite info legal */
.info-box{background:var(--canvas-warm);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 24px;margin:20px 0;}
.info-box-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:10px;}
.info-box p{margin-bottom:6px;}
.info-box p:last-child{margin-bottom:0;}
/* Boite highlight legal */
.highlight-box{
background:var(--canvas-warm);border:1px solid var(--border);
border-radius:var(--r-lg);padding:22px 24px;margin:28px 0;
display:flex;gap:16px;align-items:flex-start;
}
.highlight-box-icon{width:36px;height:36px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;background:var(--pro-light);}
.highlight-box-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px;}
.highlight-box-body{font-size:14px;color:var(--ink-mute);line-height:1.7;}
/* Encart beige depuis l'editeur WYSIWYG (bouton "Citation" / blockquote TinyMCE)
Permet a l'admin de creer des encarts identiques aux .info-box depuis le BO sans HTML brut. */
.legal-content blockquote{
background:var(--canvas-warm);
border:1px solid var(--border);
border-radius:var(--r-lg);
padding:20px 24px;
margin:20px 0;
font-style:normal;
color:var(--ink-mid);
quotes:none;
}
.legal-content blockquote::before,
.legal-content blockquote::after{content:none;}
.legal-content blockquote p{margin-bottom:6px;}
.legal-content blockquote p:last-child{margin-bottom:0;}
.legal-content blockquote strong{color:var(--ink);font-weight:700;}
/* Liens dans le contenu legal (couleur brand + soulignement subtil) */
.legal-content a{color:var(--brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}
.legal-content a:hover{text-decoration-thickness:2px;}
/* Tableaux RGPD / CGV (Donnees collectees x Finalite x Base legale x Conservation, etc.) */
.legal-content table{width:100%;border-collapse:collapse;margin:24px 0;font-size:13px;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;}
.legal-content table th{background:var(--canvas-warm);color:var(--ink);text-align:left;padding:12px 14px;font-weight:700;border-bottom:1px solid var(--border);}
.legal-content table td{padding:12px 14px;border-bottom:1px solid var(--border);color:var(--ink-mid);vertical-align:top;}
.legal-content table tr:last-child td{border-bottom:none;}
.legal-content table tr:nth-child(even) td{background:rgba(0,0,0,.015);}
/* OL (listes numerotees) symetriques avec UL */
.legal-content ol{padding-left:24px;margin:12px 0 16px;display:flex;flex-direction:column;gap:7px;color:var(--ink-mid);}
/* ============================================================
SECTION 7 - PAGE 404
Source : /tmp/css_404.txt
============================================================ */
/* Hero 404 */
.hero-404{
position:relative;overflow:hidden;
padding:72px 0 64px;
background:var(--canvas);
}
/* Texte 404 de fond */
.bg-404{
position:absolute;
font-family:var(--font-d);
font-size:clamp(180px,22vw,340px);
font-weight:800;
color:transparent;
-webkit-text-stroke:1.5px var(--border);
letter-spacing:-.08em;
line-height:1;
top:50%;left:50%;
transform:translate(-50%,-50%);
pointer-events:none;
user-select:none;
white-space:nowrap;
z-index:0;
opacity:.55;
}
/* Contenu hero 404 */
.hero-content{
position:relative;z-index:2;
max-width:580px;
}
.error-badge{
display:inline-flex;align-items:center;gap:8px;
background:var(--brand-light);border:1px solid rgba(212,0,18,.2);
border-radius:var(--r-pill);padding:7px 16px 7px 12px;
margin-bottom:24px;
}
.error-badge-dot{width:7px;height:7px;border-radius:50%;background:var(--brand);}
.error-badge-text{font-size:12px;font-weight:700;color:var(--brand);letter-spacing:.06em;text-transform:uppercase;}
.error-h1{
font-family:var(--font-d);
font-size:clamp(36px,5vw,60px);
font-weight:800;color:var(--ink);
line-height:1.08;letter-spacing:-.03em;
margin-bottom:16px;
}
.error-h1 em{font-style:italic;color:var(--brand);}
.error-body{
font-size:17px;color:var(--ink-mute);
line-height:1.75;margin-bottom:32px;max-width:440px;
}
/* CTA 404 */
.error-ctas{display:flex;gap:12px;flex-wrap:wrap;}
.btn-home{
display:inline-flex;align-items:center;gap:9px;
background:var(--brand);color:#fff;
font-size:14px;font-weight:700;
padding:14px 26px;border-radius:var(--r-pill);
box-shadow:var(--brand-sh);
transition:background .2s,transform .15s;
}
.btn-home:hover{background:var(--brand-dk);transform:translateY(-2px);}
.btn-secondary{
display:inline-flex;align-items:center;gap:8px;
color:var(--ink-mid);font-size:14px;font-weight:600;
padding:13px 22px;border-radius:var(--r-pill);
border:1.5px solid var(--border-mid);
transition:all .15s;
}
.btn-secondary:hover{border-color:var(--ink);color:var(--ink);}
/* Section categories 404 */
.cats-section{padding:56px 0;border-top:1px solid var(--border);}
.cats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.cat-card{
background:var(--canvas-warm);border:1px solid var(--border);
border-radius:var(--r-lg);padding:22px 20px;
display:flex;flex-direction:column;gap:10px;
cursor:pointer;transition:all .25s;position:relative;overflow:hidden;
}
.cat-card::after{
content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
background:var(--brand);transform:scaleX(0);transform-origin:left;
transition:transform .25s var(--ease);
}
.cat-card:hover{background:var(--canvas);box-shadow:var(--sh-md);transform:translateY(-3px);}
.cat-card:hover::after{transform:scaleX(1);}
.cat-icon{width:44px;height:44px;border-radius:var(--r-md);background:var(--brand-light);display:flex;align-items:center;justify-content:center;}
.cat-name{font-size:14px;font-weight:700;color:var(--ink);}
.cat-count{font-size:12px;color:var(--ink-mute);}
.cat-arrow{margin-top:auto;display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--brand);opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s;}
.cat-card:hover .cat-arrow{opacity:1;transform:translateX(0);}
/* ============================================================
SECTION 8 - PHARMACIES
Mockup v2 - Agence Influa 2026
============================================================ */
/* Hero pharmacies (dark) */
.pharmacy-hero{background:var(--ink);position:relative;overflow:hidden;padding:100px 0 60px;}
.pharmacy-hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:52px 52px;}
.pharmacy-hero-glow{position:absolute;right:-80px;bottom:-80px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(212,0,18,.14) 0%,transparent 65%);pointer-events:none;}
.pharmacy-hero-layout{display:grid;grid-template-columns:1fr auto;gap:64px;align-items:end;position:relative;z-index:1;}
.pharmacy-hero-h1{font-family:var(--font-d);font-size:clamp(34px,4vw,56px);font-weight:800;color:#fff;line-height:1.08;letter-spacing:-.03em;margin-bottom:16px;}
.pharmacy-hero-h1 em{font-style:italic;color:var(--brand);}
.pharmacy-hero-body{font-size:17px;color:rgba(255,255,255,.5);line-height:1.7;max-width:520px;margin-bottom:36px;}
.pharmacy-hero-stats{display:flex;gap:40px;flex-wrap:wrap;margin-bottom:36px;}
.pharmacy-hero-filter{position:relative;display:inline-flex;align-items:center;max-width:360px;}
.pharmacy-hero-filter-icon{position:absolute;left:16px;pointer-events:none;z-index:1;}
.pharmacy-hero-select{font-size:14px;font-weight:500;color:#fff;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.18);border-radius:999px;padding:13px 44px 13px 44px;outline:none;cursor:pointer;font-family:var(--font-b);appearance:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);width:100%;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;transition:border-color .2s;}
.pharmacy-hero-select:focus{border-color:rgba(255,255,255,.4);box-shadow:0 0 0 3px rgba(255,255,255,.08);}
.pharmacy-hero-select option{color:var(--ink);background:#fff;}
.pharmacy-hero-hint{font-size:12px;color:rgba(255,255,255,.35);display:flex;align-items:center;gap:6px;margin-top:12px;}
.pharmacy-stat-num{font-family:var(--font-d);font-size:38px;font-weight:800;color:#fff;letter-spacing:-.04em;line-height:1;}
.pharmacy-stat-lbl{font-size:12px;color:rgba(255,255,255,.4);margin-top:5px;}
.pharmacy-hero-right{display:flex;flex-direction:column;gap:12px;min-width:268px;}
.pharmacy-hero-pill{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:14px 18px;transition:background .2s;}
.pharmacy-hero-pill:hover{background:rgba(255,255,255,.09);}
.pharmacy-hero-pill-icon{width:34px;height:34px;border-radius:var(--r-sm);background:rgba(212,0,18,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pharmacy-hero-pill-title{font-size:13px;font-weight:600;color:#fff;margin-bottom:2px;}
.pharmacy-hero-pill-text{font-size:11px;color:rgba(255,255,255,.4);line-height:1.4;}
/* Hero search field */
.pharmacy-hero-search{position:relative;max-width:580px;}
.pharmacy-hero-search-icon{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.35);pointer-events:none;transition:color .2s;}
.pharmacy-hero-search-input{width:100%;padding:16px 52px 16px 52px;font-size:15px;font-family:'DM Sans',system-ui,sans-serif;font-weight:500;color:var(--ink);background:#fff;border:2px solid rgba(255,255,255,.2);border-radius:var(--r-pill);outline:none;transition:border-color .2s,box-shadow .2s;}
.pharmacy-hero-search-input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(212,0,18,.15);}
.pharmacy-hero-search-input::placeholder{color:var(--ink-hint);font-weight:400;}
.pharmacy-hero-search-clear{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--canvas-warm);border:none;cursor:pointer;display:none;align-items:center;justify-content:center;color:var(--ink-mute);transition:background .15s,color .15s;}
.pharmacy-hero-search-clear:hover{background:var(--brand-light);color:var(--brand);}
.pharmacy-hero-search-input:not(:placeholder-shown)~.pharmacy-hero-search-clear{display:flex;}
/* Map section */
.pharmacy-map-section{padding:40px 0 0;}
.pharmacy-map-counter{font-family:var(--font-d);font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.015em;margin-bottom:16px;}
/* Catalogue pharmacies */
.pharmacy-catalogue{padding:40px 0 80px;}
.pharmacy-filter-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap;}
.pharmacy-grid-counter{font-family:var(--font-d);font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.015em;}
.pharmacy-region-filter{display:flex;align-items:center;gap:10px;}
.pharmacy-region-select{font-size:13px;font-weight:500;color:var(--ink);background:#F8F7F4;border:1.5px solid #E8E8E2;border-radius:999px;padding:9px 36px 9px 16px;outline:none;cursor:pointer;font-family:var(--font-b);appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A8A84' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;transition:border-color .2s;}
.pharmacy-region-select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(212,0,18,.08);}
.pharmacy-cards-hint{font-size:12px;color:var(--ink-mute);display:flex;align-items:center;gap:6px;}
/* Grille pharmacies */
.pharma-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
/* Card pharmacie */
.pharm-card{background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s,opacity .3s,max-height .3s;}
.pharm-card:hover{box-shadow:var(--sh-lg);transform:translateY(-4px);}
.pharm-card.pharm-hidden{display:none;}
.pharm-card.pharm-highlight{border-color:var(--brand);box-shadow:0 0 0 3px rgba(212,0,18,.15),var(--sh-lg);}
.pharm-card-top{padding:22px 22px 16px;border-bottom:1px solid var(--border);}
.pharm-badges{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap;}
.pharm-badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;padding:4px 10px;border-radius:var(--r-pill);letter-spacing:.04em;text-transform:uppercase;}
.badge-certified{background:var(--success-bg);color:var(--success);border:1px solid rgba(45,138,78,.2);}
.badge-partner{background:var(--brand-light);color:var(--brand);border:1px solid rgba(212,0,18,.15);}
.badge-region{background:var(--canvas-deep);color:var(--ink-mute);border:1px solid var(--border);}
.pharm-name{font-family:var(--font-d);font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.015em;margin-bottom:6px;line-height:1.2;}
.pharm-addr{font-size:13px;color:var(--ink-mute);display:flex;gap:6px;align-items:flex-start;line-height:1.5;}
.pharm-addr-icon{flex-shrink:0;margin-top:2px;color:var(--ink-hint);}
.pharm-card-mid{padding:14px 22px;display:flex;flex-direction:column;gap:10px;flex:1;}
.pharm-products-row{display:flex;gap:5px;flex-wrap:wrap;}
.prod-tag{background:var(--canvas-warm);border:1px solid var(--border);border-radius:var(--r-pill);padding:4px 10px;font-size:10px;font-weight:500;color:var(--ink-mute);}
.pharm-card-bottom{padding:14px 22px;border-top:1px solid var(--border);background:var(--canvas-warm);display:flex;align-items:center;gap:8px;}
.pharm-tel{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink-mute);flex:1;}
.pharm-tel a{color:var(--ink-mid);transition:color .15s;}
.pharm-tel a:hover{color:var(--brand);}
.btn-itin{display:inline-flex;align-items:center;gap:6px;background:var(--brand);color:#fff;font-size:12px;font-weight:700;padding:9px 16px;border-radius:var(--r-pill);box-shadow:0 3px 10px rgba(212,0,18,.2);transition:background .15s,transform .15s;}
.btn-itin:hover{background:var(--brand-dk);transform:translateY(-1px);}
/* No results pharmacies */
.pharmacy-no-results{display:none;text-align:center;padding:56px 20px;grid-column:1/-1;}
.pharmacy-no-results.visible{display:block;}
.pharmacy-no-results-num{font-family:var(--font-d);font-size:64px;font-weight:800;color:var(--border);letter-spacing:-.06em;line-height:1;margin-bottom:12px;}
.pharmacy-no-results-title{font-family:var(--font-d);font-size:22px;color:var(--ink);margin-bottom:8px;}
.pharmacy-no-results-sub{font-size:14px;color:var(--ink-mute);margin-bottom:20px;}
.btn-reset{display:inline-flex;align-items:center;gap:7px;background:var(--brand);color:#fff;font-size:13px;font-weight:700;padding:12px 24px;border-radius:var(--r-pill);box-shadow:var(--brand-sh);cursor:pointer;border:none;font-family:var(--font-b);transition:background .15s;}
.btn-reset:hover{background:var(--brand-dk);}
.pharmacy-empty{text-align:center;color:var(--ink-mute);padding:48px 0;font-size:15px;}
/* CTA strip pharmacies */
.cta-strip{background:var(--canvas-warm);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:28px 0;}
.cta-strip-inner{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.cta-strip-icon{width:52px;height:52px;border-radius:50%;background:var(--brand-light);border:2px solid rgba(212,0,18,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cta-strip-text{flex:1;}
.cta-strip-title{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:4px;}
.cta-strip-body{font-size:13px;color:var(--ink-mute);}
a.btn-order,a.btn-order:link,a.btn-order:visited{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff !important;font-size:14px;font-weight:700;padding:13px 26px;border-radius:var(--r-pill);box-shadow:var(--brand-sh);transition:all .25s;white-space:nowrap;text-decoration:none;}
a.btn-order:hover{background:var(--brand-dk);color:#fff !important;transform:translateY(-1px);box-shadow:0 4px 12px rgba(212,0,18,.25);}
/* Candidature section */
.cand-section{padding:80px 0;}
.cand-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
.cand-eyebrow{font-size:11px;font-weight:700;color:var(--brand);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:10px;}
.cand-eyebrow::before{content:'';width:20px;height:2px;background:var(--brand);border-radius:1px;}
.cand-h2{font-family:var(--font-d);font-size:clamp(26px,3vw,38px);font-weight:700;color:var(--ink);letter-spacing:-.025em;line-height:1.15;margin-bottom:14px;}
.cand-h2 em{font-style:italic;color:var(--brand);}
.cand-body{font-size:15px;color:var(--ink-mute);line-height:1.75;margin-bottom:32px;}
.avantages{display:flex;flex-direction:column;gap:16px;}
.av-item{display:flex;gap:14px;align-items:flex-start;}
.av-icon{width:36px;height:36px;min-width:36px;border-radius:var(--r-md);background:var(--brand-light);display:flex;align-items:center;justify-content:center;}
.av-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:3px;}
.av-text{font-size:12px;color:var(--ink-mute);line-height:1.55;}
/* Candidature form card */
.cand-form-card{background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-xl);padding:36px;box-shadow:var(--sh-sm);}
.cand-form-title{font-family:var(--font-d);font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.015em;margin-bottom:5px;}
.cand-form-sub{font-size:13px;color:var(--ink-mute);margin-bottom:24px;}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.field{position:relative;}
.ff{grid-column:span 2;}
.fi,.ft,.fs{width:100%;padding:20px 16px 8px;font-size:14px;color:var(--ink);background:var(--canvas);border:1.5px solid var(--border-mid);border-radius:var(--r-md);outline:none;transition:border-color .15s,box-shadow .15s;font-family:var(--font-b);}
.ft{min-height:90px;resize:vertical;padding-top:24px;}
.fs{appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A8A84' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;cursor:pointer;}
.fi:focus,.ft:focus,.fs:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(212,0,18,.08);}
.fl{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--ink-mute);pointer-events:none;transition:top .15s,font-size .15s,color .15s;}
.ft~.fl{top:10px;transform:none;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--brand);}
.fi:focus~.fl,.fi:not(:placeholder-shown)~.fl,.fs~.fl,.ft:focus~.fl,.ft:not(:placeholder-shown)~.fl{top:10px;transform:none;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--brand);}
.cr{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin-top:4px;}
.cb{width:18px;height:18px;min-width:18px;border-radius:4px;border:1.5px solid var(--border-mid);background:var(--canvas);display:flex;align-items:center;justify-content:center;margin-top:1px;transition:all .15s;}
.cr.checked .cb{background:var(--brand);border-color:var(--brand);}
.ct{font-size:12px;color:var(--ink-mute);line-height:1.55;}
.ct a{color:var(--brand);text-decoration:underline;}
.btn-sub{width:100%;height:52px;background:var(--brand);color:#fff;font-size:14px;font-weight:700;border-radius:var(--r-pill);box-shadow:var(--brand-sh);display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px;transition:background .2s,transform .15s;cursor:pointer;border:none;font-family:var(--font-b);}
.btn-sub:hover{background:var(--brand-dk);transform:translateY(-1px);}
/* Form success state */
.pharmacy-form-ok{display:none;text-align:center;padding:24px 0;}
.pharmacy-form-ok.visible{display:block;}
.pharmacy-form-ok-icon{width:56px;height:56px;border-radius:50%;background:var(--success-bg);border:2px solid rgba(45,138,78,.2);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.pharmacy-form-ok-title{font-family:var(--font-d);font-size:20px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.pharmacy-form-ok-body{font-size:13px;color:var(--ink-mute);line-height:1.65;}
/* Leaflet map (pharmacies page) */
.phar-map-wrap{margin:0 0 0;position:relative;z-index:1;}
.phar-map{height:450px;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--canvas-warm);box-shadow:var(--sh-sm);position:relative;z-index:1;}
.phar-marker{background:var(--brand);border:2px solid #fff;border-radius:50% 50% 50% 0;width:24px;height:24px;transform:rotate(-45deg);box-shadow:0 2px 8px rgba(0,0,0,.3);transition:background .2s,width .2s,height .2s;}
.phar-marker.is-active{background:var(--ink);width:28px;height:28px;}
/* Spinner candidature */
.pharm-spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:pharmSpin .6s linear infinite;}
@keyframes pharmSpin{to{transform:rotate(360deg);}}
/* ============================================================
SECTION 9 - RESULTATS RECHERCHE
Source : maquette proparo-resultats-recherche.html
============================================================ */
/* Search page wrapper */
.search-page{padding:0;}
/* En-tete resultats */
.search-header-wrap{
background:var(--canvas);
border-bottom:1px solid var(--border);
padding:28px 0 22px;
margin-bottom:0;
}
.search-header{margin-bottom:0;}
.search-header-query{font-family:var(--font-d);font-size:clamp(22px,2.8vw,34px);font-weight:700;color:var(--ink);letter-spacing:-.02em;margin-bottom:8px;}
.search-header-query em{font-style:italic;color:var(--brand);}
.search-header-meta{font-size:13px;color:var(--ink-hint);display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.search-count{font-weight:700;color:var(--brand);}
.search-time{color:var(--ink-hint);}
/* Layout 2 colonnes */
.search-layout-wrap{padding:36px 0 80px;}
.search-layout{display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:start;}
/* Barre recherche header (page recherche) */
.header-search{flex:1;max-width:580px;position:relative;}
.header-search-input{
width:100%;padding:11px 48px 11px 44px;
font-size:15px;color:var(--ink);
background:var(--canvas-warm);
border:1.5px solid var(--border-mid);
border-radius:var(--r-pill);outline:none;
transition:border-color .15s,box-shadow .15s,background .15s;
}
.header-search-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(212,0,18,.08);background:var(--canvas);}
.header-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-hint);pointer-events:none;}
.header-search-clear{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--ink-hint);cursor:pointer;display:flex;padding:4px;transition:color .15s;}
.header-search-clear:hover{color:var(--brand);}
/* Barre de filtres sticky */
.filter-bar{background:var(--canvas);border-bottom:1px solid var(--border);position:sticky;top:68px;z-index:100;box-shadow:var(--sh-xs);}
.filter-bar-inner{display:flex;align-items:center;gap:14px;padding:10px 0;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap;}
.filter-bar-inner::-webkit-scrollbar{display:none;}
.filter-label{font-size:12px;font-weight:700;color:var(--ink-hint);white-space:nowrap;padding-right:4px;flex-shrink:0;}
.filter-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r-pill);font-size:12px;font-weight:600;color:var(--ink-mute);border:1.5px solid var(--border-mid);background:var(--canvas);cursor:pointer;transition:all .18s;white-space:nowrap;flex-shrink:0;}
.filter-chip:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-light);}
.filter-chip.active{border-color:var(--brand);background:var(--brand-light);color:var(--brand);}
.filter-chip-del{display:none;width:14px;height:14px;border-radius:50%;background:var(--brand);color:#fff;align-items:center;justify-content:center;font-size:9px;font-weight:700;margin-left:2px;}
.filter-chip.active .filter-chip-del{display:flex;}
/* Filters group prend l'espace libre, pousse le reste a droite */
.filter-bar-inner > .filters-group{flex:1 1 auto;min-width:0;}
.filter-sep{width:1px;height:20px;background:var(--border);flex-shrink:0;}
/* Sort group a droite, results-count masque (redondant avec le H1 "X resultats") */
.filter-bar-inner > .sort-group{margin-left:auto !important;display:flex;align-items:center;gap:10px;flex-shrink:0;}
.filter-bar-inner > .results-count,
.filter-bar .results-count{display:none !important;}
.sort-select{padding:8px 36px 8px 14px;font-size:12px;font-weight:600;color:var(--ink-mid);background:var(--canvas);border:1.5px solid var(--border);border-radius:var(--r-pill);outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A8A84' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;flex-shrink:0;width:180px !important;max-width:180px !important;text-overflow:ellipsis;overflow:hidden;}
.sort-select:focus{border-color:var(--brand);}
/* Marge de securite a droite de la barre de filtres pour eviter que le select touche le bord */
.filter-bar-inner{padding-right:8px;}
/* Barre de filtres - mobile : "Filtrer" sur sa ligne, chips un par ligne (compacts) */
@media (max-width: 768px) {
.filter-bar-inner { flex-direction: column; align-items: flex-start; flex-wrap: wrap; overflow-x: visible; gap: 8px; }
.filter-label { padding-right: 0; }
.filters-group { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; flex: none; width: 100%; }
.filter-chip { padding: 4px 14px; }
.filter-sep { display: none; }
.sort-group { display: flex; align-items: center; gap: 8px; width: 100%; margin-left: 0; }
.sort-label { flex-shrink: 0; }
.sort-select { flex: 1 1 auto; min-width: 0; }
.results-count { margin-left: auto; flex-shrink: 0; }
}
/* Sidebar filtres */
.sidebar{background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-xs);position:sticky;top:130px;}
.sidebar-section{border-bottom:1px solid var(--border);}
.sidebar-section:last-child{border-bottom:none;}
.sidebar-section-title{
width:100%;display:flex;align-items:center;justify-content:space-between;
padding:16px 20px;font-size:13px;font-weight:700;color:var(--ink);
cursor:pointer;background:transparent;transition:background .15s;text-align:left;
}
.sidebar-section-title:hover{background:var(--canvas-warm);}
.sidebar-section-icon{transition:transform .25s var(--ease);color:var(--ink-hint);}
.sidebar-section.collapsed .sidebar-section-icon{transform:rotate(-90deg);}
.sidebar-options{padding:4px 20px 16px;}
.sidebar-section.collapsed .sidebar-options{display:none;}
.sidebar-opt{display:flex;align-items:center;gap:9px;padding:7px 0;cursor:pointer;}
.sidebar-opt-box{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border-mid);background:var(--canvas);display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;}
.sidebar-opt.checked .sidebar-opt-box{background:var(--brand);border-color:var(--brand);}
.sidebar-opt-label{font-size:13px;color:var(--ink-mute);flex:1;}
.sidebar-opt.checked .sidebar-opt-label{color:var(--ink);font-weight:600;}
.sidebar-opt-count{font-size:11px;color:var(--ink-hint);}
.price-range{display:flex;flex-direction:column;gap:12px;}
.price-inputs{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.price-input{width:100%;padding:8px 10px;font-size:13px;color:var(--ink);border:1.5px solid var(--border-mid);border-radius:var(--r-md);outline:none;background:var(--canvas-warm);text-align:center;}
.price-input:focus{border-color:var(--brand);}
.sidebar-reset{width:100%;padding:10px;font-size:12px;font-weight:600;color:var(--brand);background:var(--brand-light);border-radius:var(--r-md);text-align:center;cursor:pointer;transition:background .15s;margin-top:2px;}
.sidebar-reset:hover{background:#ffe0e2;}
/* Resultats grille */
.results-col{}
.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:32px;}
.results-section-title{font-size:12px;font-weight:700;color:var(--ink-hint);text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px;margin-top:32px;display:flex;align-items:center;gap:10px;}
.results-section-title::after{content:'';flex:1;height:1px;background:var(--border);}
/* Resultats contenu (blog / FAQ) */
.content-result{background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 22px;display:flex;gap:16px;align-items:flex-start;margin-bottom:14px;transition:box-shadow .2s,transform .2s;cursor:pointer;}
.content-result:hover{box-shadow:var(--sh-md);transform:translateY(-2px);}
.content-result-icon{width:40px;height:40px;border-radius:var(--r-md);background:var(--canvas-warm);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ink-mute);}
.content-result-type{font-size:9px;font-weight:700;color:var(--ink-hint);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;}
.content-result-title{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:5px;line-height:1.3;}
.content-result-excerpt{font-size:12px;color:var(--ink-mute);line-height:1.6;}
.content-result-url{font-size:11px;color:var(--brand);margin-top:8px;}
/* Pagination recherche */
.page-pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;}
.page-btn{width:38px;height:38px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--ink-mute);border:1.5px solid var(--border);background:var(--canvas);cursor:pointer;transition:all .15s;}
.page-btn:hover{border-color:var(--brand);color:var(--brand);}
.page-btn.active{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 2px 8px rgba(212,0,18,.2);}
.page-btn.disabled{opacity:.4;pointer-events:none;}
.page-btn.prev,.page-btn.next{width:auto;padding:0 14px;gap:6px;}
/* Etat zero resultat */
.zero-state{display:none;padding:0;}
.zero-state.visible{display:block;}
.zero-hero{
background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-xl);
padding:52px 40px;text-align:center;margin-bottom:28px;
box-shadow:var(--sh-xs);
}
.zero-num{font-family:var(--font-d);font-size:72px;font-weight:800;color:var(--border);letter-spacing:-.06em;line-height:1;margin-bottom:20px;}
.zero-title{font-family:var(--font-d);font-size:clamp(22px,3vw,32px);font-weight:700;color:var(--ink);letter-spacing:-.02em;margin-bottom:10px;}
.zero-sub{font-size:16px;color:var(--ink-mute);line-height:1.7;max-width:440px;margin:0 auto 28px;}
.zero-query-badge{display:inline-flex;align-items:center;gap:8px;background:var(--canvas-warm);border:1px solid var(--border);border-radius:var(--r-pill);padding:8px 18px;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:28px;}
.zero-query-badge span{color:var(--brand);}
.zero-ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;font-size:14px;font-weight:700;padding:13px 26px;border-radius:var(--r-pill);box-shadow:var(--brand-sh);transition:background .2s,transform .15s;}
.btn-primary:hover{background:var(--brand-dk);transform:translateY(-1px);}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--ink-mid);font-size:13px;font-weight:600;padding:12px 22px;border-radius:var(--r-pill);border:1.5px solid var(--border-mid);transition:all .15s;}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink);}
/* Categories de rattrapage (zero state) */
.rescue-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px;}
.rescue-cat{background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 16px;text-align:center;cursor:pointer;transition:all .22s;}
.rescue-cat:hover{border-color:var(--brand);box-shadow:var(--sh-md);transform:translateY(-3px);}
.rescue-cat-icon{width:44px;height:44px;border-radius:50%;background:var(--brand-light);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;}
.rescue-cat-name{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:3px;}
.rescue-cat-count{font-size:11px;color:var(--ink-hint);}
/* SR only (hidden checkbox) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* ============================================================
RESPONSIVE - MOBILE FIRST
============================================================ */
@media(max-width:1100px){
.faq-layout{grid-template-columns:1fr;}
.faq-sidebar{position:static;}
.story-inner,.founder-body,.brands-grid,.legal-layout{grid-template-columns:1fr;}
.about-hero::after{display:none;}
.pro-hero-inner,.form-layout{grid-template-columns:1fr;}
.blog-hero-inner{grid-template-columns:1fr;}
.blog-hero-left{border-right:none;border-bottom:1px solid var(--border);padding:40px 0 36px;}
.blog-hero-right{min-height:280px;}
.blog-layout{grid-template-columns:1fr;}
.sidebar{position:static;}
.articles-grid{grid-template-columns:1fr;}
.acard.featured{grid-column:unset;grid-template-columns:1fr;}
.article-layout{grid-template-columns:1fr;gap:0;}
.article-sidebar{position:static;order:-1;margin-bottom:32px;}
.toc{display:none;}
.article-col-aside{position:static;}
.related-grid{grid-template-columns:1fr 1fr;}
.values-grid{grid-template-columns:1fr 1fr;}
.pharmacy-grid{grid-template-columns:repeat(2,1fr);}
.pharma-grid{grid-template-columns:repeat(2,1fr);}
.pharmacy-hero-layout{grid-template-columns:1fr;}
.pharmacy-hero-right{display:none;}
.pharmacy-hero-search{max-width:100%;}
.cand-layout{grid-template-columns:1fr;}
.fg{grid-template-columns:1fr;}
.ff{grid-column:span 1;}
.phar-map{height:350px;}
.cats-grid{grid-template-columns:repeat(2,1fr);}
.search-layout{grid-template-columns:1fr;}
.rescue-cats{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
.faq-hero-inner{grid-template-columns:1fr;gap:40px;}
.about-hero-inner{grid-template-columns:1fr;gap:40px;}
.contact-inner{grid-template-columns:1fr;}
.values-grid{grid-template-columns:1fr;}
.brands-grid{grid-template-columns:1fr;}
.blog-grid{grid-template-columns:1fr;}
.acard.featured{grid-column:unset;grid-template-columns:1fr;}
.search-layout{grid-template-columns:1fr;}
.related-grid{grid-template-columns:1fr;}
}
@media(max-width:580px){
.pharmacy-grid{grid-template-columns:1fr;}
.pharma-grid{grid-template-columns:1fr;}
.cats-grid{grid-template-columns:1fr 1fr;}
.error-ctas{flex-direction:column;}
.hero-404{padding:40px 0 0;}
.article-cta{flex-direction:column;gap:20px;padding:24px;}
.inline-product{flex-direction:column;gap:12px;}
.inline-prod-right{text-align:left;}
.hero-image,.article-wrap{padding-left:20px;padding-right:20px;}
.rescue-cats{grid-template-columns:1fr 1fr;}
.zero-hero{padding:32px 20px;}
.zero-ctas{flex-direction:column;}
}
/* ================================================
SECTION GEO EDITORIALE (categories)
Contenu SEO/GEO sous la grille produits
================================================ */
.geo-section{background:var(--canvas-warm);padding:80px 0;}
.geo-inner{display:grid;grid-template-columns:2fr 1fr;gap:80px;align-items:start;}
.geo-section-eyebrow{font-size:11px;font-weight:700;color:var(--brand);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:10px;}
.geo-section-eyebrow::before{content:'';width:20px;height:2px;background:var(--brand);border-radius:1px;}
.geo-h2{font-family:var(--font-d);font-size:clamp(24px,2.5vw,36px);font-weight:700;color:var(--ink);letter-spacing:-.025em;line-height:1.2;margin-bottom:20px;}
.geo-h2 em{font-style:italic;color:var(--brand);}
.geo-body{font-size:15px;color:var(--ink-mute);line-height:1.8;margin-bottom:20px;}
.geo-body strong{color:var(--ink);font-weight:600;}
.geo-body a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;}
.geo-highlight{background:var(--canvas-warm);border:1px solid var(--border);border-radius:14px;padding:20px 24px;margin:24px 0;}
.geo-highlight-text{font-size:14px;color:var(--ink-mid);line-height:1.7;font-style:italic;}
.geo-highlight-source{font-size:11px;color:var(--ink-hint);margin-top:6px;font-style:normal;}
.geo-h3{font-family:var(--font-d);font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.015em;margin:32px 0 12px;}
.geo-list{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
.geo-list-item{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-mid);line-height:1.6;}
.geo-list-item::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--brand);margin-top:7px;flex-shrink:0;}
/* GEO Sidebar */
.geo-sidebar{display:flex;flex-direction:column;gap:20px;}
.geo-card{background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;}
.geo-card-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.geo-card-title-icon{width:28px;height:28px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;}
.geo-tag{display:inline-block;background:var(--canvas-warm);border:1px solid var(--border);border-radius:var(--r-pill);padding:5px 12px;font-size:12px;color:var(--ink-mute);margin:3px;transition:border-color .15s,color .15s;}
.geo-tag:hover{border-color:var(--brand);color:var(--brand);}
.geo-related-links{display:flex;flex-direction:column;gap:8px;}
.geo-rel-link{font-size:13px;color:var(--brand);display:flex;align-items:center;gap:6px;transition:gap .2s;}
.geo-rel-link:hover{gap:10px;}
/* GEO editorial section */
.geo-editorial{padding:80px 0;}
.geo-card-icon{width:28px;height:28px;border-radius:var(--r-sm);background:var(--brand-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.geo-links{display:flex;flex-direction:column;gap:8px;}
.geo-link{font-size:13px;color:var(--brand);display:flex;align-items:center;gap:6px;text-decoration:none;transition:gap .2s;}
.geo-link:hover{gap:10px;}
.geo-contact-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;}
.geo-contact-item:last-child{margin-bottom:0;}
.geo-contact-icon{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:2px;}
.geo-contact-text{font-size:13px;color:var(--ink-mid);line-height:1.5;}
.geo-contact-text a{color:var(--brand);text-decoration:none;}
.geo-contact-text a:hover{text-decoration:underline;}
/* GEO Responsive */
@media(max-width:768px){
.geo-inner{grid-template-columns:1fr;gap:40px;}
}
/* ================================================
FAQ CATEGORIE (section sous la grille)
================================================ */
.cat-faq-section{padding:80px 0;}
.cat-faq-layout{display:grid;grid-template-columns:1fr 2fr;gap:80px;align-items:start;}
.cat-faq-intro{font-size:15px;color:var(--ink-mute);line-height:1.75;margin-bottom:24px;}
.cat-faq-geo-note{background:var(--brand-light);border-radius:var(--r-lg);padding:16px 18px;border:1px solid rgba(212,0,18,.15);}
.cat-faq-geo-note-title{font-size:12px;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;}
.cat-faq-geo-note-text{font-size:12px;color:var(--ink-mid);line-height:1.6;}
.cat-faq-items{display:flex;flex-direction:column;gap:0;}
.cat-faq-item{border-top:1px solid var(--border);}
.cat-faq-item:last-child{border-bottom:1px solid var(--border);}
.cat-faq-q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 0;font-family:var(--font-d);font-size:17px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left;line-height:1.3;background:none;border:none;}
.cat-faq-q:hover{color:var(--brand);}
.cat-faq-chevron{transition:transform .3s var(--ease);color:var(--ink-hint);flex-shrink:0;margin-top:2px;}
.cat-faq-item.open .cat-faq-chevron{transform:rotate(180deg);color:var(--brand);}
.cat-faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);}
.cat-faq-item.open .cat-faq-a{max-height:400px;}
.cat-faq-a-inner{padding-bottom:20px;font-size:15px;color:var(--ink-mute);line-height:1.8;}
.cat-faq-a-inner strong{color:var(--ink);}
.cat-faq-a-inner a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;}
/* FAQ Categorie responsive */
@media(max-width:768px){
.cat-faq-layout{grid-template-columns:1fr;gap:32px;}
}
/* ============================================================
SECTION 10 - PAGE CONNEXION / AUTHENTIFICATION
Source : proparo-connexion.html mockup
============================================================ */
/* Bouton retour accueil en haut de la page connexion */
.auth-back-wrap{
position:absolute;top:20px;left:0;right:0;z-index:30;pointer-events:none;
}
.auth-back-wrap .container{pointer-events:auto;}
.auth-back-link{
display:inline-flex;align-items:center;gap:6px;
font-size:13px;font-weight:600;color:#fff;
text-decoration:none;padding:8px 14px;border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.15);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
transition:all .2s ease;
}
.auth-back-link:hover{
background:rgba(255,255,255,.14);
border-color:rgba(255,255,255,.28);
color:#fff;
}
.auth-back-link svg{stroke:currentColor;}
@media(max-width:900px){
.auth-back-link{background:rgba(0,0,0,.06);color:var(--ink);border-color:var(--border);}
.auth-back-link:hover{background:rgba(0,0,0,.1);color:var(--ink);}
}
/* Layout principal connexion */
.auth-main {
flex:1;display:grid;grid-template-columns:1fr 1fr;min-height:600px;
position:relative;
}
/* Panneau gauche - visuel de marque */
.auth-brand {
background:var(--ink);
display:flex;flex-direction:column;justify-content:flex-start;
padding:56px 56px 64px;position:relative;overflow:hidden;
}
.auth-brand::before {
content:'';position:absolute;inset:0;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
background-size:48px 48px;
}
.auth-brand-glow {
position:absolute;right:-120px;bottom:-80px;
width:500px;height:500px;border-radius:50%;
background:radial-gradient(circle,rgba(212,0,18,.14) 0%,transparent 65%);
pointer-events:none;
}
.auth-brand-inner{position:relative;z-index:1;}
.auth-brand-eyebrow{
display:inline-flex;align-items:center;gap:8px;
font-size:11px;font-weight:600;color:rgba(255,255,255,.5);
letter-spacing:.1em;text-transform:uppercase;margin-bottom:28px;
}
.auth-brand-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--brand);}
.auth-brand-title {
font-family:var(--font-d);
font-size:clamp(32px,3.5vw,50px);
font-weight:800;color:#fff;
line-height:1.08;letter-spacing:-.03em;
margin-bottom:20px;
}
.auth-brand-title em{font-style:italic;color:var(--brand);}
.auth-brand-body{font-size:15px;color:rgba(255,255,255,.45);line-height:1.75;max-width:360px;margin-bottom:48px;}
/* Trust indicators */
.auth-trust{display:flex;flex-direction:column;gap:12px;}
.trust-item{
display:flex;align-items:center;gap:14px;
padding:14px 18px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
border-radius:var(--r-lg);
transition:background .2s;
}
.trust-item:hover{background:rgba(255,255,255,.08);}
.trust-icon{
width:36px;height:36px;min-width:36px;border-radius:var(--r-sm);
background:rgba(212,0,18,.15);border:1px solid rgba(212,0,18,.2);
display:flex;align-items:center;justify-content:center;
}
.trust-title{font-size:13px;font-weight:600;color:rgba(255,255,255,.8);}
.trust-text{font-size:11px;color:rgba(255,255,255,.35);margin-top:2px;}
/* Chiffres cles */
.auth-stats{display:flex;gap:28px;margin-bottom:40px;flex-wrap:wrap;}
.auth-stat-num{font-family:var(--font-d);font-size:26px;font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1;}
.auth-stat-lbl{font-size:11px;color:rgba(255,255,255,.4);margin-top:3px;}
/* Panneau droit - formulaire */
.auth-form-side {
display:flex;align-items:center;justify-content:center;
padding:48px 48px;background:var(--canvas-warm);
}
.auth-form-wrap{width:100%;max-width:440px;}
/* Selecteur de mode principal (3 onglets) */
.mode-selector{
display:flex;background:var(--canvas);
border-radius:var(--r-xl);padding:5px;
gap:0;margin-bottom:32px;
border:1px solid var(--border);
box-shadow:var(--sh-xs);
}
.mode-btn{
flex:1;padding:11px 10px;border-radius:var(--r-lg);
font-size:13px;font-weight:600;color:var(--ink-mute);
transition:all .22s var(--ease);text-align:center;
cursor:pointer;line-height:1.3;
}
.mode-btn:hover:not(.active){color:var(--ink);background:var(--canvas-warm);}
.mode-btn.active.b2c{background:var(--brand);color:#fff;box-shadow:var(--brand-sh);}
.mode-btn.active.guest{background:var(--ink);color:#fff;box-shadow:var(--sh-sm);}
/* Formulaire blocs */
.form-block{display:none;}
.form-block.visible{display:block;}
.form-title{
font-family:var(--font-d);font-size:26px;font-weight:700;
color:var(--ink);letter-spacing:-.02em;margin-bottom:6px;
}
.form-subtitle{font-size:14px;color:var(--ink-mute);line-height:1.55;margin-bottom:28px;}
.form-subtitle a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
/* Separateur */
.divider{
display:flex;align-items:center;gap:12px;
font-size:12px;color:var(--ink-hint);margin-bottom:20px;
}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border);}
/* Champs flottants */
.field{position:relative;margin-bottom:14px;}
.field:last-of-type{margin-bottom:0;}
.field-input{
width:100%;padding:20px 16px 8px;
font-size:15px;color:var(--ink);
background:var(--canvas);
border:1.5px solid var(--border-mid);
border-radius:var(--r-md);outline:none;
transition:border-color .15s,box-shadow .15s;
appearance:none;line-height:1.4;
}
.field-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(212,0,18,.08);}
.field-input.valid{border-color:var(--success);}
.field-input.error{border-color:var(--brand);}
.field-label{
position:absolute;left:16px;top:50%;transform:translateY(-50%);
font-size:15px;color:var(--ink-mute);pointer-events:none;
transition:top .15s,font-size .15s,color .15s;
}
.field-input:focus~.field-label,
.field-input:not(:placeholder-shown)~.field-label{
top:10px;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--brand);
}
.field-icon-r{position:absolute;right:14px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:0;}
.pw-toggle{cursor:pointer;color:var(--ink-hint);transition:color .15s;padding:4px;}
.pw-toggle:hover{color:var(--ink);}
.field-hint{font-size:11px;color:var(--ink-hint);margin-top:5px;padding-left:4px;}
.field-hint.ok{color:var(--success);}
.field-hint.err{color:var(--brand);}
/* Grille 2 colonnes formulaire */
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
/* Checkbox */
.check-row{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin-top:14px;}
.check-box{
width:18px;height:18px;min-width:18px;border-radius:4px;
border:1.5px solid var(--border-mid);background:var(--canvas);
display:flex;align-items:center;justify-content:center;
margin-top:1px;transition:background .15s,border-color .15s;
}
.check-row.checked .check-box{background:var(--brand);border-color:var(--brand);}
.check-text{font-size:12px;color:var(--ink-mute);line-height:1.55;}
.check-text a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;}
/* CTA bouton auth */
.btn-auth{
width:100%;height:52px;border-radius:var(--r-pill);
font-size:15px;font-weight:700;
display:flex;align-items:center;justify-content:center;gap:10px;
margin-top:20px;cursor:pointer;
transition:transform .15s,box-shadow .2s,background .2s;
letter-spacing:-.01em;border:none;
font-family:var(--font-b);text-decoration:none;
}
.btn-auth.b2c-cta{background:var(--brand);color:#fff;box-shadow:var(--brand-sh);}
.btn-auth.b2c-cta:hover{background:var(--brand-dk);transform:translateY(-2px);box-shadow:0 12px 32px rgba(212,0,18,.32);}
.btn-auth.guest-cta{background:var(--ink);color:#fff;box-shadow:var(--sh-sm);}
.btn-auth.guest-cta:hover{background:#2A2A28;transform:translateY(-2px);}
.btn-auth:active{transform:scale(.97);}
.btn-label{display:flex;align-items:center;gap:8px;}
/* Loading state */
@keyframes spin{to{transform:rotate(360deg);}}
.btn-auth.loading{opacity:.8;pointer-events:none;}
.btn-auth.loading::after{content:'';width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;}
.btn-auth.loading .btn-label{display:none;}
/* Mot de passe oublie */
.forgot-row{display:flex;justify-content:flex-end;margin-top:-4px;margin-bottom:14px;}
.forgot-link{font-size:12px;font-weight:500;color:var(--ink-mute);transition:color .15s;}
.forgot-link:hover{color:var(--brand);}
/* Separateur mode switch */
.switch-mode{
text-align:center;margin-top:24px;padding-top:20px;
border-top:1px solid var(--border);
font-size:13px;color:var(--ink-mute);
}
.switch-mode a{font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.switch-mode a.brand-a{color:var(--brand);}
.switch-mode a.pro-a{color:var(--pro, #1A3A5C);}
/* Success state */
.auth-success{
display:none;text-align:center;padding:16px 0;
}
.auth-success.visible{display:block;}
.success-icon{
width:64px;height:64px;border-radius:50%;
background:var(--success-bg);border:2px solid rgba(45,138,78,.25);
display:flex;align-items:center;justify-content:center;
margin:0 auto 20px;
}
.success-title{font-family:var(--font-d);font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.02em;margin-bottom:8px;}
.success-body{font-size:14px;color:var(--ink-mute);line-height:1.65;margin-bottom:20px;}
.btn-go{
display:inline-flex;align-items:center;gap:8px;
background:var(--brand);color:#fff;
font-size:14px;font-weight:700;padding:13px 26px;
border-radius:var(--r-pill);box-shadow:var(--brand-sh);
transition:background .2s,transform .15s;
font-family:var(--font-b);cursor:pointer;border:none;
}
.btn-go:hover{background:var(--brand-dk);transform:translateY(-1px);}
/* Forgot password panel */
.forgot-panel{display:none;}
.forgot-panel.visible{display:block;}
/* Responsive connexion */
@media(max-width:860px){
.auth-main{grid-template-columns:1fr;}
.auth-brand{display:none;}
.auth-form-side{padding:32px 24px;}
.form-grid-2{grid-template-columns:1fr;}
}
/* PS8 form overrides for auth page */
.auth-form-wrap .form-group{margin-bottom:0;}
.auth-form-wrap .form-control{
width:100%;padding:20px 16px 8px;
font-size:15px;color:var(--ink);
background:var(--canvas);
border:1.5px solid var(--border-mid);
border-radius:var(--r-md);outline:none;
transition:border-color .15s,box-shadow .15s;
appearance:none;line-height:1.4;
font-family:var(--font-b);
}
.auth-form-wrap .form-control:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(212,0,18,.08);}
.auth-form-wrap .forgot-password{display:flex;justify-content:flex-end;margin-top:-4px;margin-bottom:14px;}
.auth-form-wrap .forgot-password a{font-size:12px;font-weight:500;color:var(--ink-mute);transition:color .15s;}
.auth-form-wrap .forgot-password a:hover{color:var(--brand);}
.auth-form-wrap .form-footer{border:none;padding:0;margin:0;}
.auth-form-wrap .form-footer .btn{
width:100%;height:52px;border-radius:var(--r-pill);
font-size:15px;font-weight:700;
display:flex;align-items:center;justify-content:center;gap:10px;
margin-top:20px;cursor:pointer;
transition:transform .15s,box-shadow .2s,background .2s;
letter-spacing:-.01em;border:none;
font-family:var(--font-b);
background:var(--brand);color:#fff;box-shadow:var(--brand-sh);
}
.auth-form-wrap .form-footer .btn:hover{background:var(--brand-dk);transform:translateY(-2px);}
/* ============================================================
SECTION 11 - PAGE MON COMPTE
Source : proparo-mon-compte.html mockup
============================================================ */
/* Layout sidebar + contenu */
.page-wrap{max-width:1280px;margin:0 auto;padding:32px;display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:start;}
/* Sidebar navigation */
.sidebar-nav{background:var(--canvas);border-radius:var(--r-xl);border:1px solid var(--border);overflow:hidden;box-shadow:var(--sh-sm);position:sticky;top:96px;}
.sidebar-user{padding:24px;border-bottom:1px solid var(--border);text-align:center;}
.sidebar-avatar{width:64px;height:64px;border-radius:50%;background:var(--brand-light);border:3px solid var(--brand);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-family:var(--font-d);font-size:24px;font-weight:700;color:var(--brand);}
.sidebar-name{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:2px;}
.sidebar-email{font-size:11px;color:var(--ink-hint);}
.sidebar-nav-items{padding:8px;}
.nav-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md);cursor:pointer;transition:background .15s,color .15s;color:var(--ink-mute);font-size:13px;font-weight:500;position:relative;}
.nav-item:hover{background:var(--canvas-warm);color:var(--ink);}
.nav-item.active{background:var(--brand-light);color:var(--brand);font-weight:600;}
.nav-item-icon{width:32px;height:32px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--canvas-warm);}
.nav-item.active .nav-item-icon{background:rgba(212,0,18,.1);}
.nav-item-badge{position:absolute;right:12px;background:var(--brand);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:var(--r-pill);}
.nav-item-logout{margin-top:4px;border-top:1px solid var(--border);padding-top:12px;}
.nav-item-logout a{color:inherit;text-decoration:none;}
/* Contenu principal */
.main-content{}
/* Panneau generique */
.panel{background:var(--canvas);border-radius:var(--r-xl);border:1px solid var(--border);box-shadow:var(--sh-sm);overflow:hidden;margin-bottom:20px;}
.panel:last-child{margin-bottom:0;}
.panel-header{padding:24px 28px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:16px;}
.panel-title{font-family:var(--font-d);font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.015em;}
.panel-subtitle{font-size:12px;color:var(--ink-hint);margin-top:2px;}
.panel-action{font-size:12px;font-weight:600;color:var(--brand);cursor:pointer;display:flex;align-items:center;gap:4px;transition:gap .15s;text-decoration:none;}
.panel-action:hover{gap:7px;}
.panel-body{padding:28px;}
/* Section toggle JS */
.account-section{display:none;}
.account-section.active{display:block;}
/* Informations personnelles */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.info-field{background:var(--canvas-warm);border-radius:var(--r-md);padding:14px 16px;border:1px solid var(--border);}
.info-field-label{font-size:10px;font-weight:700;color:var(--ink-hint);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px;}
.info-field-val{font-size:14px;font-weight:500;color:var(--ink);}
.section-action-row{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;}
.btn-edit{display:inline-flex;align-items:center;gap:7px;background:var(--brand);color:#fff;font-size:13px;font-weight:700;padding:11px 22px;border-radius:var(--r-pill);box-shadow:var(--brand-sh);transition:background .2s,transform .15s;cursor:pointer;border:none;font-family:var(--font-b);text-decoration:none;}
.btn-edit:hover{background:var(--brand-dk);transform:translateY(-1px);}
/* Adresses */
.addresses-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.address-card{background:var(--canvas-warm);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:20px;position:relative;transition:border-color .2s,box-shadow .2s;}
.address-card:hover{box-shadow:var(--sh-sm);}
.address-type{font-size:10px;font-weight:700;color:var(--ink-hint);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;}
.address-name{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:4px;}
.address-lines{font-size:13px;color:var(--ink-mute);line-height:1.65;}
.address-actions{display:flex;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border);}
.addr-btn{font-size:11px;font-weight:600;color:var(--ink-mute);padding:5px 10px;border-radius:var(--r-pill);border:1px solid var(--border);transition:all .15s;cursor:pointer;background:transparent;font-family:var(--font-b);text-decoration:none;display:inline-flex;align-items:center;}
.addr-btn:hover{border-color:var(--brand);color:var(--brand);}
.addr-btn.del:hover{border-color:var(--ink-hint);color:var(--ink-hint);}
.add-address-card{background:var(--canvas-deep);border:1.5px dashed var(--border-mid);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:border-color .2s,background .2s;min-height:140px;text-decoration:none;}
.add-address-card:hover{border-color:var(--brand);background:var(--brand-light);}
.add-address-icon{width:40px;height:40px;border-radius:50%;background:var(--canvas);border:1.5px solid var(--border-mid);display:flex;align-items:center;justify-content:center;color:var(--ink-hint);transition:border-color .2s,color .2s;}
.add-address-card:hover .add-address-icon{border-color:var(--brand);color:var(--brand);}
.add-address-label{font-size:13px;font-weight:600;color:var(--ink-mute);transition:color .2s;}
.add-address-card:hover .add-address-label{color:var(--brand);}
/* Liens compte (commandes, avoirs...) */
.account-links{display:flex;flex-direction:column;gap:0;}
.account-link-item{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--border);color:var(--ink-mute);font-size:13px;font-weight:500;transition:color .15s;text-decoration:none;}
.account-link-item:last-child{border-bottom:none;}
.account-link-item:hover{color:var(--brand);}
.account-link-icon{width:36px;height:36px;border-radius:var(--r-sm);background:var(--canvas-warm);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.account-link-item:hover .account-link-icon{background:var(--brand-light);}
.account-link-item span{flex:1;}
.account-link-arrow{color:var(--ink-hint);transition:transform .15s;}
.account-link-item:hover .account-link-arrow{transform:translateX(3px);color:var(--brand);}
/* Fidelite hero */
/* Aplat fidelite : version BEIGE (creme) */
.loyalty-hero{
background:linear-gradient(135deg,#F5F1EA 0%,#EFE7D9 100%);
border:1px solid #E7DECF;
border-radius:var(--r-xl);padding:32px;margin-bottom:20px;
position:relative;overflow:hidden;
}
.loyalty-hero::before{
content:'';position:absolute;inset:0;
background-image:linear-gradient(rgba(0,0,0,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.022) 1px,transparent 1px);
background-size:40px 40px;
}
.loyalty-hero-glow{position:absolute;right:-60px;top:-60px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(212,0,18,.10) 0%,transparent 65%);pointer-events:none;}
.loyalty-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;}
.loyalty-pts-label{font-size:11px;font-weight:700;color:var(--ink-hint);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;}
.loyalty-pts-val{font-family:var(--font-d);font-size:56px;font-weight:800;color:var(--ink);letter-spacing:-.04em;line-height:1;}
.loyalty-pts-unit{font-size:24px;font-weight:700;color:var(--ink-hint);letter-spacing:0;}
.loyalty-pts-sub{font-size:13px;color:var(--ink-mute);margin-top:12px;}
.loyalty-pts-sub strong{color:var(--brand);font-weight:800;}
.loyalty-hero-cta{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;font-size:13px;font-weight:700;padding:12px 20px;border-radius:var(--r-pill);white-space:nowrap;transition:background .2s,transform .15s;}
.loyalty-hero-cta:hover{background:#b8000f;transform:translateY(-1px);}
@media (max-width:768px){.loyalty-hero-inner{grid-template-columns:1fr;gap:18px;}.loyalty-hero-cta{justify-content:center;}}
/* Carte fidelite sur le tableau de bord */
.loyalty-card{display:flex;align-items:center;gap:18px;background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-xl);padding:18px 24px;margin-bottom:20px;box-shadow:var(--sh-xs);transition:box-shadow .2s,transform .2s,border-color .2s;text-decoration:none;}
.loyalty-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px);border-color:rgba(212,0,18,.25);}
.loyalty-card-icon{width:52px;height:52px;min-width:52px;border-radius:50%;background:var(--brand-light);color:var(--brand);display:flex;align-items:center;justify-content:center;}
.loyalty-card-main{flex:1;min-width:0;}
.loyalty-card-label{font-size:11px;font-weight:700;color:var(--ink-hint);text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px;}
.loyalty-card-pts{font-size:14px;color:var(--ink-mute);}
.loyalty-card-pts strong{font-family:var(--font-d);font-size:26px;font-weight:800;color:var(--brand);letter-spacing:-.02em;vertical-align:-2px;margin-right:4px;}
.loyalty-card-sep{margin:0 9px;color:var(--border-mid);}
.loyalty-card-arrow{color:var(--ink-hint);flex-shrink:0;transition:transform .2s,color .2s;}
.loyalty-card:hover .loyalty-card-arrow{color:var(--brand);transform:translateX(3px);}
@media (max-width:540px){.loyalty-card{padding:16px 18px;gap:14px;}.loyalty-card-sep{display:none;}.loyalty-card-voucher{display:block;margin-top:2px;}}
/* Page detail fidelite (dans Mon compte) */
.loyalty-note{font-size:13px;color:var(--ink-mute);margin:16px 0 0;line-height:1.6;}
.loyalty-subtitle{font-family:var(--font-d);font-size:18px;font-weight:700;color:var(--ink);margin:28px 0 0;letter-spacing:-.01em;}
.loyalty-badge{display:inline-flex;align-items:center;padding:4px 11px;border-radius:var(--r-pill);font-size:11px;font-weight:700;background:var(--canvas-deep,#EFEDE7);color:var(--ink-mute);}
.loyalty-badge--ok{background:var(--pro-light);color:var(--pro);}
.loyalty-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:var(--canvas-warm);border:1px solid var(--border);border-radius:6px;padding:2px 8px;color:var(--ink);}
.loyalty-pagination{display:flex;gap:10px;justify-content:flex-end;padding:16px 28px;}
.loyalty-page-btn{font-size:13px;font-weight:600;color:var(--ink-mute);border:1.5px solid var(--border-mid);border-radius:var(--r-pill);padding:7px 16px;transition:all .2s;text-decoration:none;}
.loyalty-page-btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-light);}
@media(max-width:640px){.loyalty-pagination{padding:14px 18px;}}
/* Securite */
.security-items{display:flex;flex-direction:column;gap:0;}
.security-item{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--border);}
.security-item:last-child{border-bottom:none;}
.security-item-icon{width:40px;height:40px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.security-item-icon.ok{background:var(--success-bg);}
.security-item-icon.warn{background:var(--alert-bg, #FFF6EE);}
.security-label{flex:1;}
.security-title{font-size:14px;font-weight:600;color:var(--ink);}
.security-sub{font-size:12px;color:var(--ink-hint);margin-top:2px;}
.security-action{font-size:12px;font-weight:600;color:var(--brand);cursor:pointer;transition:color .15s;white-space:nowrap;text-decoration:none;}
.security-action:hover{color:var(--brand-dk);}
/* Responsive mon compte */
@media(max-width:900px){
.page-wrap{grid-template-columns:1fr;padding:16px;}
.sidebar-nav{position:static;}
.sidebar-nav-items{display:flex;overflow-x:auto;gap:0;padding:6px;}
.nav-item{flex-direction:column;gap:4px;font-size:11px;padding:10px 12px;min-width:80px;text-align:center;}
.nav-item-icon{margin:0 auto;}
.info-grid{grid-template-columns:1fr;}
.addresses-grid{grid-template-columns:1fr;}
}
.quick-links-hint{font-size:11px;color:#8A8A84;line-height:1.4;margin:0 0 12px;font-style:italic;}
/* ============================================================
CONTACT PAGE
============================================================ */
.contact-hero{background:var(--ink);padding:80px 0 60px;position:relative;overflow:hidden;}
.contact-hero-glow{position:absolute;right:-100px;top:-100px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(212,0,18,.12) 0%,transparent 65%);pointer-events:none;}
.contact-hero-inner{max-width:560px;}
.contact-hero-h1{font-family:var(--font-d);font-size:clamp(28px,4vw,44px);font-weight:700;color:#fff;letter-spacing:-.025em;line-height:1.15;margin:12px 0 16px;}
.contact-hero-h1 em{color:var(--brand);font-style:normal;}
.contact-hero-body{font-size:16px;color:rgba(255,255,255,.5);line-height:1.6;}
.contact-main{padding:60px 0 80px;background:var(--canvas);}
.contact-layout{display:grid;grid-template-columns:340px 1fr;gap:48px;align-items:start;}
.contact-info-col{display:flex;flex-direction:column;gap:16px;position:sticky;top:100px;}
.contact-info-card{display:flex;gap:16px;align-items:flex-start;padding:20px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);transition:box-shadow .2s;}
.contact-info-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.06);}
.contact-info-icon{width:44px;height:44px;min-width:44px;border-radius:var(--r-sm);background:rgba(212,0,18,.06);border:1px solid rgba(212,0,18,.1);display:flex;align-items:center;justify-content:center;}
.contact-info-title{font-size:11px;font-weight:700;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px;}
.contact-info-value{font-size:15px;font-weight:600;color:var(--ink);display:block;}
a.contact-info-value{color:var(--brand);text-decoration:none;}
a.contact-info-value:hover{text-decoration:underline;}
.contact-info-sub{font-size:12px;color:var(--ink-mute);margin-top:2px;}
.contact-form-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);padding:36px 32px;}
.contact-form-title{font-family:var(--font-d);font-size:22px;font-weight:700;color:var(--ink);margin-bottom:4px;}
.contact-form-sub{font-size:13px;color:var(--ink-mute);margin-bottom:24px;}
.contact-frm .field{margin-bottom:18px;}
.contact-frm .fi{width:100%;padding:14px 16px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:14px;color:var(--ink);background:var(--canvas);font-family:var(--font-b);transition:border-color .2s;resize:vertical;}
.contact-frm .fi:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(212,0,18,.08);}
.contact-frm .fl{position:absolute;left:16px;top:14px;font-size:14px;color:var(--ink-mute);pointer-events:none;transition:all .15s;}
.contact-frm .fi:focus ~ .fl,.contact-frm .fi:not(:placeholder-shown) ~ .fl{top:-8px;left:12px;font-size:11px;background:var(--canvas);padding:0 4px;color:var(--brand);}
.contact-frm .field{position:relative;}
.contact-frm textarea.fi{min-height:140px;}
.contact-frm-row{display:grid;grid-template-columns:1fr;gap:18px;}
.field-select{width:100%;padding:14px 16px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:14px;color:var(--ink);background:var(--canvas);font-family:var(--font-b);appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A8A84' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;}
.field-select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(212,0,18,.08);}
.field-label-static{display:block;font-size:12px;font-weight:600;color:var(--ink-mute);margin-bottom:6px;}
.contact-file-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;}
.contact-file-label{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-mute);cursor:pointer;padding:10px 16px;border:1.5px dashed var(--border);border-radius:var(--r-sm);transition:all .2s;}
.contact-file-label:hover{border-color:var(--brand);color:var(--brand);}
.contact-frm-footer{margin-top:8px;}
.btn-contact-submit{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;font-size:14px;font-weight:700;padding:14px 28px;border-radius:var(--r-pill);border:none;cursor:pointer;font-family:var(--font-b);box-shadow:var(--brand-sh);transition:all .25s;}
.btn-contact-submit:hover{background:var(--brand-dk);transform:translateY(-1px);box-shadow:0 4px 14px rgba(212,0,18,.3);}
.contact-alert{padding:14px 18px;border-radius:var(--r-sm);margin-bottom:20px;font-size:13px;line-height:1.5;}
.contact-alert-success{background:#e8f5e9;border:1px solid #a5d6a7;color:#2e7d32;}
.contact-alert-error{background:#ffebee;border:1px solid #ef9a9a;color:#c62828;}
@media(max-width:768px){
.contact-layout{grid-template-columns:1fr;gap:32px;}
.contact-info-col{position:static;flex-direction:row;flex-wrap:wrap;gap:12px;}
.contact-info-card{flex:1 1 calc(50% - 6px);min-width:200px;}
.contact-form-card{padding:24px 20px;}
}
@media(max-width:480px){
.contact-info-card{flex:1 1 100%;}
}
/* FAQ Contact section (fond clair, lisible) */
.faq-contact-section{background:var(--canvas-warm);padding:64px 0;border-top:1px solid var(--border);}
.faq-contact-header{text-align:center;margin-bottom:40px;}
.faq-contact-h2{font-family:var(--font-d);font-size:clamp(24px,3vw,34px);font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.2;margin:10px 0 8px;}
.faq-contact-h2 em{color:var(--brand);font-style:normal;}
.faq-contact-sub{font-size:15px;color:var(--ink-mute);line-height:1.5;}
.faq-contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:800px;margin:0 auto;}
a.faq-contact-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 24px;background:#fff;border:1.5px solid var(--border);border-radius:var(--r-lg);text-decoration:none;transition:all .25s;}
a.faq-contact-card:hover{border-color:var(--brand);box-shadow:0 8px 24px rgba(212,0,18,.08);transform:translateY(-2px);}
.faq-contact-icon{width:52px;height:52px;border-radius:50%;background:rgba(212,0,18,.06);border:1.5px solid rgba(212,0,18,.12);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
a.faq-contact-card:hover .faq-contact-icon{background:rgba(212,0,18,.1);border-color:rgba(212,0,18,.25);}
.faq-contact-label{font-size:11px;font-weight:700;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;}
.faq-contact-value{font-size:16px;font-weight:700;color:var(--ink);}
.faq-contact-detail{font-size:12px;color:var(--ink-mute);margin-top:4px;}
@media(max-width:640px){.faq-contact-grid{grid-template-columns:1fr;max-width:320px;}}
/* Contact form 2-col row */
.contact-frm-2col{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:480px){.contact-frm-2col{grid-template-columns:1fr;}}
/* Kill green highlight on textarea/inputs (browser autofill or PS8 valid state) */
.contact-frm .fi:valid,.contact-frm .fi:-webkit-autofill{background:var(--canvas) !important;box-shadow:none !important;}
.contact-frm .fi:valid:not(:focus){border-color:var(--border);}
.contact-frm textarea.contact-textarea{background:var(--canvas);resize:vertical;}
.contact-frm select.field-select:valid{border-color:var(--border);}
.contact-frm select.field-select:valid:not(:focus){box-shadow:none;}
/* 404 page - hide PS8 native search widget and clean layout */
body.page-pagenotfound #search_widget{display:none !important;}
body.page-pagenotfound .page-content{padding:0;margin:0;}
body.page-pagenotfound .notifications-container{display:none;}
.proparo-404{padding:0;margin:0;}
/* 404 contact strip redesign */
.error-contact-strip{background:var(--canvas-warm);padding:48px 0;border-top:1px solid var(--border);}
.error-contact-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.error-contact-title{font-family:var(--font-d);font-size:20px;font-weight:700;color:var(--ink);}
.error-contact-sub{font-size:14px;color:var(--ink-mute);margin-top:4px;}
.error-contact-btns{display:flex;gap:12px;}
@media(max-width:640px){.error-contact-inner{flex-direction:column;text-align:center;}.error-contact-btns{justify-content:center;}}
/* 404 hero - remove tooth, clean layout */
.hero-404 .tooth-illustration{display:none !important;}
.hero-404{position:relative;overflow:hidden;padding:80px 0 60px;background:var(--ink);}
.bg-404{position:absolute;right:5%;top:50%;transform:translateY(-50%);font-size:clamp(200px,25vw,400px);font-weight:900;color:rgba(255,255,255,.03);font-family:var(--font-d);line-height:1;pointer-events:none;user-select:none;}
.error-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(212,0,18,.1);border:1px solid rgba(212,0,18,.2);border-radius:var(--r-pill);padding:6px 14px;margin-bottom:16px;}
.error-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--brand);animation:pulse 2s infinite;}
.error-badge-text{font-size:11px;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.08em;}
.error-h1{font-family:var(--font-d);font-size:clamp(28px,4vw,48px);font-weight:700;color:#fff;line-height:1.15;letter-spacing:-.025em;margin-bottom:16px;}
.error-h1 em{color:var(--brand);font-style:normal;}
.error-body{font-size:16px;color:rgba(255,255,255,.5);line-height:1.6;max-width:480px;margin-bottom:28px;}
.error-ctas{display:flex;gap:12px;flex-wrap:wrap;}
.btn-home{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff !important;font-size:14px;font-weight:700;padding:13px 24px;border-radius:var(--r-pill);box-shadow:var(--brand-sh);transition:all .25s;text-decoration:none;border:none;cursor:pointer;font-family:var(--font-b);}
.btn-home:hover{background:var(--brand-dk);transform:translateY(-1px);}
.btn-secondary{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.6);font-size:14px;font-weight:500;padding:13px 22px;border-radius:var(--r-pill);border:1.5px solid rgba(255,255,255,.15);background:transparent;transition:all .2s;text-decoration:none;cursor:pointer;font-family:var(--font-b);}
.btn-secondary:hover{color:#fff;border-color:rgba(255,255,255,.4);}
/* ============================================================
SECTION 10 - CART PAGE
============================================================ */
/* Reset padding for cart & order pages */
body.page-cart #content-wrapper,
body.page-order #content-wrapper,
body.page-order-confirmation #content-wrapper{padding:0;}
body.page-cart #content-wrapper{padding-bottom:64px;}
body.page-order #content-wrapper{padding-bottom:64px;}
/* Cart page header */
.cart-page{padding:32px 0 80px;}
.cart-page-header{display:flex;align-items:baseline;gap:16px;margin-bottom:32px;}
.cart-page-title{font-family:var(--font-d);font-size:clamp(28px,3.5vw,40px);font-weight:700;color:var(--ink);letter-spacing:-.025em;}
.cart-page-count{font-size:14px;color:var(--ink-hint);font-weight:500;}
/* Cart grid: 2 columns */
.cart-grid-proparo{display:grid;grid-template-columns:1fr 400px;gap:40px;align-items:start;}
@media(max-width:1024px){.cart-grid-proparo{grid-template-columns:1fr;}}
/* Cart main column */
.cart-col-main{min-width:0;}
/* Cart aside (summary) */
.cart-col-aside{position:sticky;top:100px;}
/* Continue shopping link */
.cart-continue{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink-mute);margin-top:24px;transition:color .2s;text-decoration:none;}
.cart-continue:hover{color:var(--brand);}
/* ============================================================
CART ITEMS (product lines)
============================================================ */
/* Override PS8 native cart-items list */
.cart-overview .cart-items{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px;}
.cart-overview .cart-item{border:0;padding:0;margin:0;}
/* Cart item card */
.cart-item-card{display:grid;grid-template-columns:100px 1fr;gap:20px;background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;transition:box-shadow .2s;}
.cart-item-card:hover{box-shadow:0 2px 12px rgba(0,0,0,.04);}
/* Cart item image */
.cart-item-img{width:100px;height:100px;border-radius:12px;overflow:hidden;background:var(--canvas-warm);flex-shrink:0;}
.cart-item-img a{display:block;width:100%;height:100%;}
.cart-item-img img{width:100%;height:100%;object-fit:cover;}
/* Cart item info */
.cart-item-info{display:flex;flex-direction:column;gap:8px;min-width:0;}
.cart-item-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.cart-item-name-wrap{display:flex;flex-direction:column;gap:4px;min-width:0;}
.cart-item-name{font-family:var(--font-d);font-size:16px;font-weight:600;color:var(--ink);text-decoration:none;transition:color .15s;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.cart-item-name:hover{color:var(--brand);}
.cart-item-attr{font-size:12px;color:var(--ink-hint);font-weight:500;}
/* Remove button */
.cart-item-remove{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;color:var(--ink-hint);transition:all .2s;flex-shrink:0;text-decoration:none;}
.cart-item-remove:hover{background:rgba(212,0,18,.06);color:var(--brand);}
/* Price row */
.cart-item-price-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;flex-wrap:wrap;}
/* Unit price */
.cart-item-unit-price{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.cart-item-current-price{font-size:15px;font-weight:600;color:var(--ink);}
.cart-item-regular-price{font-size:13px;color:var(--ink-hint);text-decoration:line-through;}
.cart-item-discount-badge{font-size:11px;font-weight:700;background:rgba(212,0,18,.08);color:var(--brand);padding:2px 6px;border-radius:var(--r-pill);}
.cart-item-unit-ref{font-size:11px;color:var(--ink-hint);}
/* Quantity selector */
.cart-qty-selector{display:inline-flex;align-items:center;border:1.5px solid var(--border);border-radius:var(--r-pill);overflow:hidden;background:var(--canvas);}
.cart-qty-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:none;background:transparent;color:var(--ink-mute);cursor:pointer;transition:all .15s;font-family:var(--font-b);}
.cart-qty-btn:hover{background:var(--canvas-warm);color:var(--ink);}
input[type="number"].cart-qty-input,.cart-qty-input{width:32px !important;max-width:32px !important;height:34px;text-align:center;border:none;border-left:1px solid var(--border);border-right:1px solid var(--border);background:transparent;font-size:13px;font-weight:600;color:var(--ink);font-family:var(--font-b);-moz-appearance:textfield;outline:none;padding:0;line-height:34px;box-sizing:content-box;}
.cart-qty-input::-webkit-outer-spin-button,
.cart-qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
/* Line total */
.cart-item-total{text-align:right;min-width:80px;}
.cart-item-line-total{font-size:17px;font-weight:700;color:var(--ink);font-family:var(--font-d);}
.cart-item-gift-label{font-size:13px;font-weight:600;color:var(--success);background:var(--success-bg);padding:3px 10px;border-radius:var(--r-pill);}
.cart-item-gift-qty{font-size:14px;font-weight:600;color:var(--ink-mute);}
/* Customization link */
.cart-item-customization-link{font-size:12px;color:var(--brand);font-weight:500;text-decoration:underline;text-underline-offset:2px;}
/* ============================================================
CART SUMMARY PANEL (right sidebar on cart page)
============================================================ */
.cart-summary-panel{background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px 24px;display:flex;flex-direction:column;gap:0;}
/* Totals rows */
.cart-detailed-totals{display:flex;flex-direction:column;gap:0;}
.cart-totals-lines{display:flex;flex-direction:column;gap:10px;padding-bottom:16px;}
.cart-totals-row{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.cart-totals-label{font-size:14px;color:var(--ink-mute);font-weight:500;}
.cart-totals-value{font-size:14px;font-weight:600;color:var(--ink);}
.cart-totals-shipping-detail{width:100%;font-size:11px;color:var(--ink-hint);}
.cart-totals-row--tax .cart-totals-label,
.cart-totals-row--tax .cart-totals-value{font-size:12px;color:var(--ink-hint);}
/* Grand total */
.cart-grand-total{border-top:1.5px solid var(--border);padding-top:16px;margin-top:4px;}
.cart-totals-row--grand .cart-totals-label{font-size:16px;font-weight:700;color:var(--ink);font-family:var(--font-d);}
.cart-totals-row--grand .cart-totals-value{font-size:20px;font-weight:800;color:var(--brand);font-family:var(--font-d);letter-spacing:-.02em;}
/* CTA button */
.cart-detailed-actions{padding-top:20px;}
.btn-checkout{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:15px 24px;background:var(--brand);color:#fff;font-size:15px;font-weight:700;border-radius:var(--r-pill);border:none;cursor:pointer;transition:all .25s;text-decoration:none;font-family:var(--font-b);box-shadow:0 4px 16px rgba(212,0,18,.25);}
.btn-checkout:hover{background:var(--brand-dk);transform:translateY(-1px);box-shadow:0 6px 20px rgba(212,0,18,.3);color:#fff;}
.btn-checkout--disabled{opacity:.4;cursor:not-allowed;pointer-events:none;box-shadow:none;}
/* Minimal purchase alert */
.cart-alert-minimal{background:rgba(212,0,18,.06);border:1px solid rgba(212,0,18,.12);border-radius:12px;padding:12px 16px;font-size:13px;color:var(--brand);font-weight:500;margin-bottom:12px;line-height:1.5;}
/* ============================================================
CART VOUCHER / PROMO CODE
============================================================ */
.cart-voucher-wrap{padding-top:16px;border-top:1px solid var(--border);margin-top:16px;}
/* Applied vouchers */
.cart-voucher-applied{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-direction:column;gap:8px;}
.cart-voucher-applied-item{display:flex;justify-content:space-between;align-items:center;background:var(--success-bg);border-radius:10px;padding:8px 12px;}
.cart-voucher-name{font-size:13px;font-weight:600;color:var(--success);}
.cart-voucher-value{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--success);}
.cart-voucher-remove{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;color:var(--ink-hint);transition:all .15s;}
.cart-voucher-remove:hover{color:var(--brand);background:rgba(212,0,18,.06);}
/* Promo trigger */
.cart-promo-toggle{margin-bottom:8px;}
.cart-promo-trigger{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink-mute);text-decoration:none;transition:color .15s;}
.cart-promo-trigger:hover{color:var(--brand);}
/* Promo form */
.cart-promo-form-wrap{padding:12px 0 4px;}
.cart-promo-form{display:flex;gap:8px;}
.cart-promo-input{flex:1;padding:10px 14px;font-size:13px;color:var(--ink);background:var(--canvas-warm);border:1.5px solid var(--border);border-radius:var(--r-pill);font-family:var(--font-b);outline:none;transition:border-color .15s;}
.cart-promo-input:focus{border-color:var(--brand);}
.cart-promo-input::placeholder{color:var(--ink-hint);}
.cart-promo-submit{padding:10px 18px;background:var(--ink);color:#fff;font-size:13px;font-weight:700;border:none;border-radius:var(--r-pill);cursor:pointer;font-family:var(--font-b);transition:background .15s;}
.cart-promo-submit:hover{background:var(--brand);}
/* Promo error */
.cart-promo-error{display:none;align-items:center;gap:8px;padding:10px 14px;background:rgba(212,0,18,.06);border-radius:10px;font-size:12px;color:var(--brand);margin-top:8px;}
.cart-promo-error.alert-danger{display:flex;}
/* Promo close */
.cart-promo-close{font-size:12px;color:var(--ink-hint);margin-top:8px;display:inline-block;text-decoration:none;transition:color .15s;}
.cart-promo-close:hover{color:var(--brand);}
/* Available discounts */
.cart-promo-available{margin-top:12px;padding:12px 14px;background:var(--canvas-warm);border-radius:12px;}
.cart-promo-available-title{font-size:12px;font-weight:600;color:var(--ink-mute);margin-bottom:8px;display:block;}
.cart-promo-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;}
.cart-promo-list-item{display:flex;align-items:center;gap:8px;font-size:13px;}
.cart-promo-code{font-weight:700;color:var(--brand);background:rgba(212,0,18,.06);padding:2px 8px;border-radius:var(--r-pill);font-size:11px;}
.cart-promo-desc{color:var(--ink-mute);}
/* ============================================================
CART REASSURANCE BADGES
============================================================ */
.cart-reassurance{display:flex;flex-direction:column;gap:0;background:var(--canvas-warm);border:1px solid var(--border);border-radius:var(--r-lg);margin-top:16px;overflow:hidden;}
.cart-reassurance-item{display:flex;align-items:center;gap:14px;padding:14px 20px;}
.cart-reassurance-item+.cart-reassurance-item{border-top:1px solid var(--border);}
.cart-reassurance-item svg{flex-shrink:0;}
.cart-reassurance-item div{display:flex;flex-direction:column;gap:1px;}
.cart-reassurance-item strong{font-size:13px;font-weight:600;color:var(--ink);}
.cart-reassurance-item span{font-size:11px;color:var(--ink-hint);}
/* ============================================================
CART EMPTY STATE
============================================================ */
.cart-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 20px;background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-lg);}
.cart-empty-icon{width:80px;height:80px;border-radius:50%;background:var(--canvas-warm);display:flex;align-items:center;justify-content:center;margin-bottom:24px;}
.cart-empty-title{font-family:var(--font-d);font-size:24px;font-weight:700;color:var(--ink);margin-bottom:10px;}
.cart-empty-body{font-size:15px;color:var(--ink-mute);line-height:1.6;max-width:380px;margin-bottom:28px;}
.cart-detailed-actions-empty{padding:20px 0;}
/* ============================================================
SECTION 11 - CHECKOUT TUNNEL (supplement)
============================================================ */
/* Tunnel summary panel in checkout sidebar */
.tunnel-summary{background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:0;}
.tunnel-summary .cart-grand-total{border-top:1.5px solid var(--border);padding-top:16px;margin-top:8px;}
.tunnel-summary .cart-voucher-wrap{border-top:1px solid var(--border);margin-top:12px;padding-top:12px;}
/* ============================================================
SECTION 12 - ORDER CONFIRMATION (supplement)
============================================================ */
/* Confirm hero */
.confirm-hero{background:var(--ink);padding:60px 0 56px;text-align:center;position:relative;overflow:hidden;}
.confirm-hero-inner{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:0 20px;}
/* Check circle animation */
.check-circle-wrap{width:88px;height:88px;margin:0 auto 28px;}
.check-circle-wrap svg{width:88px;height:88px;}
.check-circle-bg{fill:rgba(45,138,78,.12);}
.check-circle-ring{fill:none;stroke:var(--success);stroke-width:3;stroke-dasharray:251;stroke-dashoffset:251;animation:ringDraw .8s .3s ease-out forwards;}
.check-mark{fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:checkDraw .5s .9s ease-out forwards;}
@keyframes ringDraw{to{stroke-dashoffset:0;}}
@keyframes checkDraw{to{stroke-dashoffset:0;}}
/* Confirm labels */
.confirm-label{font-size:11px;font-weight:700;color:var(--success);text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px;}
.confirm-h1{font-family:var(--font-d);font-size:clamp(28px,4vw,44px);font-weight:700;color:#fff;line-height:1.2;letter-spacing:-.025em;margin-bottom:16px;}
.confirm-h1 em{color:var(--brand);font-style:italic;}
.confirm-sub{font-size:15px;color:rgba(255,255,255,.5);line-height:1.6;margin-bottom:28px;}
.confirm-sub strong{color:rgba(255,255,255,.75);}
.confirm-sub a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;}
/* Confirm meta */
.confirm-meta{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;}
.confirm-meta-item{display:flex;align-items:center;gap:6px;font-size:13px;color:rgba(255,255,255,.55);font-weight:500;}
.confirm-meta-item strong{color:rgba(255,255,255,.85);}
.meta-sep{width:1px;height:16px;background:rgba(255,255,255,.12);}
/* Confetti */
.confetti-wrap{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.confetti-piece{position:absolute;top:-10px;width:8px;height:8px;border-radius:2px;animation:confettiFall 1.2s ease-in forwards;}
@keyframes confettiFall{0%{transform:translateY(0) rotate(0deg);opacity:1;}100%{transform:translateY(120px) rotate(360deg);opacity:0;}}
/* Confirm layout */
.confirm-layout{max-width:1200px;margin:0 auto;padding:48px 24px 80px;display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:start;}
@media(max-width:960px){.confirm-layout{grid-template-columns:1fr;}}
/* Panel cards */
.confirm-layout .panel{background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;}
.confirm-layout .panel+.panel{margin-top:20px;}
.panel-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--border);}
.panel-title{font-family:var(--font-d);font-size:18px;font-weight:700;color:var(--ink);}
.panel-sub{font-size:12px;color:var(--ink-hint);margin-top:2px;}
.panel-action{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--brand);text-decoration:none;transition:gap .2s;}
.panel-action:hover{gap:8px;}
.panel-body{padding:20px 24px;}
/* Info grid */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:640px){.info-grid{grid-template-columns:1fr;}}
.info-box{background:var(--canvas-warm);border-radius:12px;padding:16px;}
.info-box-label{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--ink-hint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;}
.info-box-content{font-size:14px;color:var(--ink);line-height:1.6;}
.info-box-link{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
/* Avis panel */
.avis-panel{background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px 24px;text-align:center;}
.avis-eyebrow{font-size:11px;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;}
.avis-title{font-family:var(--font-d);font-size:18px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.avis-body{font-size:13px;color:var(--ink-mute);line-height:1.5;margin-bottom:20px;}
.stars-row{display:flex;justify-content:center;gap:6px;margin-bottom:20px;}
.star-btn{font-size:28px;color:var(--border);background:none;border:none;cursor:pointer;transition:all .15s;padding:2px;line-height:1;}
.star-btn.active,.star-btn.hover{color:#C9973A;transform:scale(1.15);}
.avis-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;background:var(--brand);color:#fff;font-size:14px;font-weight:700;border:none;border-radius:var(--r-pill);cursor:pointer;font-family:var(--font-b);transition:all .2s;box-shadow:0 4px 16px rgba(212,0,18,.2);}
.avis-btn:hover{background:var(--brand-dk);transform:translateY(-1px);}
.avis-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none;}
/* Action row */
.action-row{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.action-row .btn-primary{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;background:var(--brand);color:#fff;font-size:14px;font-weight:700;border-radius:var(--r-pill);text-decoration:none;font-family:var(--font-b);transition:all .2s;border:none;}
.action-row .btn-primary:hover{background:var(--brand-dk);transform:translateY(-1px);}
.action-row .btn-ghost{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;background:transparent;color:var(--ink-mute);font-size:14px;font-weight:600;border:1.5px solid var(--border);border-radius:var(--r-pill);text-decoration:none;font-family:var(--font-b);transition:all .2s;}
.action-row .btn-ghost:hover{border-color:var(--brand);color:var(--brand);}
/* Confirm hook sections */
.confirm-hook-section{max-width:1200px;margin:0 auto;padding:0 24px 32px;}
/* Reveal animation */
.rv{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease;}
.rv.on{opacity:1;transform:none;}
/* ============================================================
RESPONSIVE - CART / CHECKOUT / CONFIRMATION
============================================================ */
@media(max-width:768px){
.cart-page{padding:20px 0 60px;}
.cart-page-header{flex-direction:column;gap:4px;margin-bottom:20px;}
.cart-item-card{grid-template-columns:80px 1fr;gap:14px;padding:16px;}
.cart-item-img{width:80px;height:80px;}
.cart-item-price-row{flex-direction:column;align-items:flex-start;gap:10px;}
.cart-item-total{text-align:left;}
.cart-col-aside{position:static;}
.cart-summary-panel{padding:20px 16px;}
.confirm-hero{padding:40px 0 36px;}
.confirm-layout{padding:32px 16px 60px;gap:24px;}
.panel-header{padding:16px 20px;}
.panel-body{padding:16px 20px;}
.info-grid{grid-template-columns:1fr;}
}
/* ═══════════════════════════════════════════════════════
TUNNEL DE COMMANDE -- from mockup
═══════════════════════════════════════════════════════ */
/* Header tunnel */
.tunnel-header {
background: var(--canvas);
border-bottom: 1px solid var(--border);
padding: 0;
position: sticky;
top: 0;
z-index: 100;
box-shadow: var(--sh-xs);
}
.tunnel-header-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 32px;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
}
.t-logo {
display: inline-flex;
align-items: center;
line-height: 0;
}
.t-logo .proparo-logo { width: 140px; height: 36px; }
.t-logo-back {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 500;
color: var(--ink-mute);
transition: color .15s;
}
.t-logo-back:hover { color: var(--brand); }
.t-secure {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--ink-hint);
}
/* Progress bar */
.progress-wrap {
background: var(--canvas);
border-bottom: 1px solid var(--border);
padding: 0;
}
.progress-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 32px;
display: flex;
align-items: center;
height: 56px;
gap: 0;
}
.step-item {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
padding: 0 20px 0 0;
position: relative;
}
.step-item:first-child { padding-left: 0; }
#checkout .progress-wrap .step-num,
.progress-wrap .step-num {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
font-family: var(--font-b);
flex-shrink: 0;
transition: background .25s, color .25s, border-color .25s;
border: 2px solid var(--border);
color: var(--ink-hint);
background: var(--canvas);
min-width: auto;
letter-spacing: 0;
line-height: 1;
}
#checkout .progress-wrap .step-item.done .step-num,
.progress-wrap .step-item.done .step-num {
background: var(--success) !important;
border-color: var(--success) !important;
color: #fff !important;
}
#checkout .progress-wrap .step-item.active .step-num,
.progress-wrap .step-item.active .step-num {
background: var(--brand) !important;
border-color: var(--brand) !important;
color: #fff !important;
box-shadow: 0 0 0 4px rgba(212,0,18,.12);
}
#checkout .progress-wrap .step-item.done .step-label,
.progress-wrap .step-item.done .step-label { color: var(--ink-mute) !important; }
#checkout .progress-wrap .step-item.active .step-label,
.progress-wrap .step-item.active .step-label { color: var(--ink) !important; font-weight: 600 !important; }
#checkout .progress-wrap .step-connector-fill.done,
.progress-wrap .step-connector-fill.done { width: 100% !important; }
#checkout .progress-wrap .step-connector-fill.half,
.progress-wrap .step-connector-fill.half { width: 50% !important; background: var(--brand) !important; }
.step-label {
font-size: 13px;
font-weight: 500;
color: var(--ink-hint);
white-space: nowrap;
transition: color .25s;
}
.step-item.done .step-label { color: var(--ink-mute); }
.step-item.active .step-label { color: var(--ink); font-weight: 600; }
.step-connector {
flex: 1;
height: 2px;
background: var(--border);
margin: 0 8px;
border-radius: 1px;
overflow: hidden;
min-width: 40px;
}
.step-connector-fill {
height: 100%;
background: var(--success);
border-radius: 1px;
width: 0%;
transition: width .4s var(--ease);
}
.step-connector-fill.done { width: 100%; }
.step-connector-fill.half { width: 50%; background: var(--brand); }
/* Layout tunnel */
.tunnel-body {
max-width: 1100px;
margin: 0 auto;
padding: 40px 32px 80px;
display: grid;
grid-template-columns: 1fr 380px;
gap: 40px;
align-items: start;
}
/* Panneau formulaire */
.form-panel {
background: var(--canvas);
border-radius: var(--r-xl);
border: 1px solid var(--border);
overflow: hidden;
box-shadow: var(--sh-sm);
}
#checkout .form-panel { overflow: hidden; }
/* En-tete etape */
.step-header {
padding: 28px 32px 20px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 14px;
}
.step-header-num {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--brand-light);
color: var(--brand);
font-size: 14px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-family: var(--font-d);
}
.step-header-title {
font-family: var(--font-d);
font-size: 22px;
font-weight: 700;
color: var(--ink);
letter-spacing: -.02em;
}
.step-header-sub {
font-size: 13px;
color: var(--ink-mute);
margin-top: 2px;
}
/* Contenu etape */
.step-content { padding: 28px 32px 32px; }
.step-content.hidden { display: none; }
/* Grilles formulaire */
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.form-grid-1 { display: grid; grid-template-columns: 1fr; }
.form-gap { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
/* Animations formulaire */
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
/* Icone champ */
.field-icon {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
display: flex;
align-items: center;
}
/* Select stylise - label complement */
.field-select ~ .field-label {
top: 10px;
font-size: 10px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--brand);
}
/* Section title dans form */
.form-section-title {
font-size: 12px;
font-weight: 700;
color: var(--ink-mute);
text-transform: uppercase;
letter-spacing: .08em;
margin: 24px 0 14px;
display: flex;
align-items: center;
gap: 8px;
}
.form-section-title::before {
content: '';
width: 16px;
height: 2px;
background: var(--brand);
border-radius: 1px;
}
.form-section-title:first-child { margin-top: 0; }
/* Radio group */
.radio-group { display: flex; flex-direction: column; gap: 10px; }
.radio-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px 18px;
border: 1.5px solid var(--border-mid);
border-radius: var(--r-lg);
cursor: pointer;
transition: border-color .15s, background .15s;
position: relative;
}
.radio-item:hover { border-color: var(--brand); background: var(--brand-light); }
.radio-item.selected { border-color: var(--brand); background: var(--brand-light); }
.radio-dot {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid var(--border-mid);
flex-shrink: 0;
margin-top: 1px;
display: flex;
align-items: center;
justify-content: center;
transition: border-color .15s;
}
.radio-item.selected .radio-dot { border-color: var(--brand); }
.radio-dot-inner {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--brand);
transform: scale(0);
transition: transform .2s var(--ease);
}
.radio-item.selected .radio-dot-inner { transform: scale(1); }
.radio-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.radio-desc { font-size: 12px; color: var(--ink-mute); line-height: 1.5; }
.radio-price {
margin-left: auto;
font-size: 14px;
font-weight: 700;
color: var(--ink);
padding-left: 16px;
white-space: nowrap;
}
.radio-price.free { color: var(--success); }
.radio-dot input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.radio-item input[type="radio"]:checked ~ .radio-dot-inner,
.radio-dot input[type="radio"]:checked + .radio-dot-inner { transform: scale(1); }
.radio-item:has(input:checked) { border-color: var(--brand); background: rgba(212,0,18,.03); }
.radio-item:has(input:checked) .radio-dot { border-color: var(--brand); }
.radio-item:has(input:checked) .radio-dot-inner { transform: scale(1); }
.radio-badge {
position: absolute;
top: -1px;
right: 12px;
transform: translateY(-50%);
background: var(--brand);
color: #fff;
font-size: 10px;
font-weight: 700;
padding: 2px 8px;
border-radius: var(--r-pill);
letter-spacing: .04em;
}
/* Guest checkout toggle */
.guest-toggle {
display: flex;
gap: 10px;
background: var(--canvas-warm);
border-radius: var(--r-lg);
padding: 4px;
margin-bottom: 24px;
}
.guest-btn {
flex: 1;
padding: 10px 16px;
border-radius: var(--r-md);
font-size: 13px;
font-weight: 600;
color: var(--ink-mute);
transition: background .2s, color .2s, box-shadow .2s;
text-align: center;
}
.guest-btn.active {
background: var(--canvas);
color: var(--ink);
box-shadow: var(--sh-xs);
}
/* Paiement */
.pay-methods {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 24px;
}
.pay-method {
padding: 14px 12px;
border: 1.5px solid var(--border-mid);
border-radius: var(--r-md);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
cursor: pointer;
transition: border-color .15s, background .15s;
text-align: center;
}
.pay-method:hover { border-color: var(--brand); background: var(--brand-light); }
.pay-method.selected { border-color: var(--brand); background: var(--brand-light); }
.pay-method-icon {
height: 28px;
display: flex;
align-items: center;
justify-content: center;
}
.pay-method-label { font-size: 11px; font-weight: 600; color: var(--ink-mute); letter-spacing: .04em; }
.pay-method.selected .pay-method-label { color: var(--brand); }
/* Carte bancaire fields */
.card-fields {
background: var(--canvas-warm);
border-radius: var(--r-lg);
padding: 20px;
border: 1px solid var(--border);
margin-bottom: 16px;
}
.card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.card-num-wrap { position: relative; }
.card-type-icons {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
display: flex;
gap: 4px;
align-items: center;
}
.card-icon {
height: 18px;
padding: 2px 5px;
background: var(--canvas);
border: 1px solid var(--border);
border-radius: 3px;
font-size: 8px;
font-weight: 800;
color: var(--ink-mute);
display: flex;
align-items: center;
}
/* Express pay */
.express-pay {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 20px;
}
.express-btn {
height: 48px;
border-radius: var(--r-pill);
border: 1.5px solid var(--border-mid);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
transition: border-color .15s, background .15s, box-shadow .15s;
cursor: pointer;
}
.express-btn.apple {
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
.express-btn.apple:hover {
background: #2A2A28;
box-shadow: var(--sh-sm);
}
.express-btn.google {
background: var(--canvas);
color: var(--ink);
border-color: var(--border-mid);
}
.express-btn.google:hover {
border-color: var(--ink);
box-shadow: var(--sh-sm);
}
.pay-divider {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 20px;
color: var(--ink-hint);
font-size: 12px;
}
.pay-divider::before, .pay-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
/* Resume etape validee */
.step-summary {
padding: 16px 32px;
background: var(--canvas-warm);
border-top: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.step-summary.hidden { display: none; }
.step-summary-text { font-size: 13px; color: var(--ink-mute); }
.step-summary-text strong { color: var(--ink); font-weight: 600; }
.step-summary-edit {
font-size: 12px;
font-weight: 600;
color: var(--brand);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
flex-shrink: 0;
transition: color .15s;
}
.step-summary-edit:hover { color: var(--brand-dk); }
/* CTA principal tunnel */
.btn-next {
width: 100%;
height: 56px;
background: var(--brand);
color: #fff;
font-size: 16px;
font-weight: 700;
border-radius: var(--r-pill);
box-shadow: var(--brand-sh);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 24px;
transition: background .2s, transform .15s, box-shadow .2s;
letter-spacing: -.01em;
cursor: pointer;
border: none;
font-family: var(--font-b);
}
.btn-next:hover {
background: var(--brand-dk);
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(212,0,18,.32);
}
.btn-next:active { transform: scale(.97); }
.btn-next.loading {
pointer-events: none;
opacity: .85;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
width: 20px; height: 20px;
border: 2px solid rgba(255,255,255,.3);
border-top-color: #fff;
border-radius: 50%;
animation: spin .6s linear infinite;
display: none;
}
.btn-next.loading .spinner { display: block; }
.btn-next.loading .btn-next-text { display: none; }
/* Annuler adresse */
#checkout .btn-cancel{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-mute);text-decoration:underline;background:none;border:none;cursor:pointer;padding:8px 0;}
#checkout .btn-cancel:hover{color:var(--ink);}
/* Recapitulatif sticky */
.order-summary {
position: sticky;
top: 128px;
}
.summary-card {
background: var(--canvas);
border-radius: var(--r-xl);
border: 1px solid var(--border);
overflow: hidden;
box-shadow: var(--sh-sm);
}
.summary-header {
padding: 20px 24px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
}
.summary-title {
font-family: var(--font-d);
font-size: 16px;
font-weight: 700;
color: var(--ink);
letter-spacing: -.01em;
}
.summary-toggle {
font-size: 12px;
color: var(--brand);
cursor: pointer;
font-weight: 500;
text-decoration: underline;
text-underline-offset: 2px;
}
.summary-items { padding: 16px 24px; display: flex; flex-direction: column; gap: 14px; }
.summary-item { display: flex; gap: 12px; align-items: flex-start; }
.summary-item-img {
width: 56px; height: 56px; min-width: 56px;
background: var(--canvas-warm);
border-radius: var(--r-md);
border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-d); font-style: italic; font-size: 8px; color: var(--ink-hint);
text-align: center; line-height: 1.4;
position: relative;
}
.item-qty-badge {
position: absolute;
top: -6px; right: -6px;
width: 18px; height: 18px;
background: var(--ink);
color: #fff;
border-radius: 50%;
font-size: 10px;
font-weight: 700;
display: flex; align-items: center; justify-content: center;
border: 2px solid var(--canvas);
font-family: var(--font-b);
}
.summary-item-info { flex: 1; }
.summary-item-brand { font-size: 10px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px; }
.summary-item-name { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.4; margin-bottom: 2px; }
.summary-item-variant { font-size: 11px; color: var(--ink-hint); }
.summary-item-price { font-size: 14px; font-weight: 700; color: var(--ink); flex-shrink: 0; }
/* Code promo */
.promo-wrap { padding: 0 24px 16px; }
.promo-row { display: flex; gap: 8px; }
.promo-input {
flex: 1;
padding: 11px 14px;
font-size: 13px;
font-weight: 500;
color: var(--ink);
background: var(--canvas-warm);
border: 1.5px solid var(--border-mid);
border-radius: var(--r-md);
outline: none;
font-family: var(--font-b);
text-transform: uppercase;
letter-spacing: .06em;
transition: border-color .15s, box-shadow .15s;
}
.promo-input::placeholder { text-transform: none; letter-spacing: 0; color: var(--ink-hint); }
.promo-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(212,0,18,.08); }
.promo-btn {
padding: 11px 16px;
background: var(--canvas-warm);
border: 1.5px solid var(--border-mid);
border-radius: var(--r-md);
font-size: 13px;
font-weight: 600;
color: var(--ink-mid);
transition: background .15s, border-color .15s, color .15s;
cursor: pointer;
font-family: var(--font-b);
white-space: nowrap;
}
.promo-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }
.promo-success {
display: flex; align-items: center; gap: 7px;
font-size: 12px; color: var(--success); margin-top: 7px; font-weight: 500;
}
/* Totaux recapitulatif */
.summary-totals { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.total-row { display: flex; justify-content: space-between; align-items: center; }
.total-lbl { font-size: 13px; color: var(--ink-mute); }
.total-val { font-size: 13px; font-weight: 500; color: var(--ink); }
.total-val.free { color: var(--success); font-weight: 600; }
.total-val.promo { color: var(--brand); font-weight: 600; }
.total-row.main .total-lbl { font-size: 15px; font-weight: 700; color: var(--ink); }
.total-row.main .total-val { font-size: 20px; font-weight: 800; color: var(--brand); letter-spacing: -.02em; }
.total-sep { height: 1px; background: var(--border); margin: 2px 0; }
/* Reassurance mini (recapitulatif) */
.summary-reass {
padding: 14px 24px;
border-top: 1px solid var(--border);
background: var(--canvas-warm);
display: flex;
flex-direction: column;
gap: 8px;
}
.reass-mini {
display: flex;
align-items: center;
gap: 9px;
font-size: 12px;
color: var(--ink-mute);
}
.reass-mini-icon {
width: 24px;
height: 24px;
border-radius: 6px;
background: var(--canvas);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.pay-icons-row {
display: flex;
gap: 5px;
padding: 12px 24px;
border-top: 1px solid var(--border);
flex-wrap: wrap;
align-items: center;
}
.pay-icon-sm {
height: 20px;
padding: 2px 7px;
background: var(--canvas-warm);
border: 1px solid var(--border);
border-radius: 4px;
font-size: 9px;
font-weight: 800;
color: var(--ink-mute);
display: flex;
align-items: center;
}
/* Etape confirmation (tunnel) */
.confirm-panel {
background: var(--canvas);
border-radius: var(--r-xl);
border: 1px solid var(--border);
box-shadow: var(--sh-sm);
padding: 56px 40px;
text-align: center;
display: none;
}
.confirm-panel.visible { display: block; }
.confirm-icon {
width: 72px;
height: 72px;
background: var(--success-bg);
border: 2px solid var(--success-border);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
animation: scaleIn .4s var(--ease);
}
@keyframes scaleIn { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.confirm-title {
font-family: var(--font-d);
font-size: 32px;
font-weight: 800;
color: var(--ink);
letter-spacing: -.025em;
margin-bottom: 12px;
}
.confirm-title em { font-style: italic; color: var(--brand); }
.confirm-num {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--canvas-warm);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 12px 20px;
font-size: 14px;
color: var(--ink-mid);
margin-bottom: 32px;
}
.confirm-num strong {
font-family: monospace;
font-size: 15px;
color: var(--brand);
letter-spacing: .04em;
}
.confirm-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 32px 0;
text-align: left;
}
.confirm-step {
background: var(--canvas-warm);
border-radius: var(--r-lg);
padding: 18px 18px 16px;
}
.confirm-step-num {
font-family: var(--font-d);
font-size: 28px;
font-weight: 800;
color: var(--border);
line-height: 1;
margin-bottom: 8px;
letter-spacing: -.04em;
}
.confirm-step-title { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.confirm-step-text { font-size: 12px; color: var(--ink-mute); line-height: 1.5; }
.confirm-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-account {
padding: 13px 24px;
border: 1.5px solid var(--border-mid);
color: var(--ink-mid);
font-size: 14px;
font-weight: 600;
border-radius: var(--r-pill);
transition: border-color .15s, color .15s;
cursor: pointer;
font-family: var(--font-b);
background: transparent;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-account:hover { border-color: var(--ink); color: var(--ink); }
/* Upsell post-achat (tunnel) */
.upsell-section {
margin-top: 32px;
text-align: left;
border-top: 1px solid var(--border);
padding-top: 28px;
}
.upsell-title {
font-family: var(--font-d);
font-size: 16px;
font-weight: 700;
color: var(--ink);
letter-spacing: -.01em;
margin-bottom: 16px;
text-align: center;
}
.upsell-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.upsell-card {
background: var(--canvas-warm);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 14px;
display: flex;
gap: 12px;
align-items: center;
cursor: pointer;
transition: border-color .15s, box-shadow .15s;
}
.upsell-card:hover { border-color: var(--brand); box-shadow: var(--sh-sm); }
/* Footer tunnel */
.tunnel-footer {
border-top: 1px solid var(--border);
background: var(--canvas);
padding: 16px 32px;
margin-top: 0;
}
.tunnel-footer-inner {
max-width: 1100px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.footer-links-mini { display: flex; gap: 20px; }
.footer-links-mini a { font-size: 12px; color: var(--ink-hint); transition: color .15s; }
.footer-links-mini a:hover { color: var(--brand); }
.footer-copy-mini { font-size: 12px; color: var(--ink-hint); }
/* Responsive tunnel */
@media (max-width: 860px) {
.tunnel-body { grid-template-columns: 1fr; padding: 24px 20px 60px; }
.order-summary { position: static; order: -1; }
.form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
.pay-methods { grid-template-columns: 1fr 1fr 1fr; }
.confirm-steps { grid-template-columns: 1fr; }
.upsell-grid { grid-template-columns: 1fr; }
.express-pay { grid-template-columns: 1fr; }
.progress-inner { overflow-x: auto; padding-bottom: 4px; }
.step-label { display: none; }
.step-content { padding: 20px; }
.step-header { padding: 20px; }
.step-summary { padding: 12px 20px; }
}
/* ═══════════════════════════════════════════════════════
CONFIRMATION COMMANDE -- from mockup
═══════════════════════════════════════════════════════ */
/* Animations confirmation */
@keyframes check-draw{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
@keyframes circle-fill{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes pop-up{from{opacity:0;transform:translateY(32px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes confetti-fall{0%{transform:translateY(-20px) rotate(0deg);opacity:1}100%{transform:translateY(100px) rotate(360deg);opacity:0}}
@keyframes pts-count{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes slide-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
/* Confetti */
.confetti-wrap{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
/* Cercle check anime */
.check-circle-wrap{
width:88px;height:88px;margin:0 auto 24px;
animation:circle-fill .45s var(--ease) .1s both;
}
/* Hero confirmation labels */
.confirm-label{font-size:11px;font-weight:700;color:var(--success);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:8px;animation:pop-up .4s var(--ease) .9s both;}
.confirm-label::before,.confirm-label::after{content:'';width:20px;height:2px;background:var(--success);border-radius:1px;}
/* Meta confirmation */
.confirm-meta{
display:inline-flex;align-items:center;gap:24px;
background:var(--canvas-warm);border:1px solid var(--border);
border-radius:var(--r-pill);padding:12px 28px;
font-size:13px;color:var(--ink-mute);
animation:pop-up .4s var(--ease) 1.2s both;
flex-wrap:wrap;justify-content:center;gap:16px;
}
.confirm-meta .confirm-meta-item{color:var(--ink-mid);}
.confirm-meta .confirm-meta-item strong{color:var(--ink);font-weight:600;}
.confirm-meta .meta-sep{background:var(--border);}
/* Points fidelite gagnes */
.pts-banner{
background:linear-gradient(135deg,var(--ink) 0%,#2A2A28 100%);
border-radius:var(--r-xl);padding:24px 32px;
display:flex;align-items:center;gap:24px;
margin:32px 0 0;
position:relative;overflow:hidden;
animation:pop-up .4s var(--ease) 1.35s both;
}
.pts-banner::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:36px 36px;}
.pts-banner-glow{position:absolute;right:-40px;top:50%;transform:translateY(-50%);width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(201,151,58,.2) 0%,transparent 65%);pointer-events:none;}
.pts-icon{width:48px;height:48px;border-radius:50%;background:rgba(201,151,58,.15);border:2px solid rgba(201,151,58,.3);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1;}
.pts-content{flex:1;position:relative;z-index:1;}
.pts-label{font-size:11px;font-weight:700;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.1em;margin-bottom:5px;}
.pts-val{font-family:var(--font-d);font-size:28px;font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1;}
.pts-val span{color:var(--gold);}
.pts-sub{font-size:12px;color:rgba(255,255,255,.4);margin-top:4px;}
.pts-total{text-align:right;position:relative;z-index:1;}
.pts-total-label{font-size:11px;color:rgba(255,255,255,.4);margin-bottom:4px;}
.pts-total-val{font-family:var(--font-d);font-size:20px;font-weight:800;color:var(--gold);letter-spacing:-.02em;}
.pts-cta{
display:inline-flex;align-items:center;gap:7px;
background:rgba(201,151,58,.15);border:1px solid rgba(201,151,58,.25);
color:var(--gold);font-size:11px;font-weight:700;
padding:7px 14px;border-radius:var(--r-pill);
transition:background .15s;position:relative;z-index:1;
text-decoration:none;
}
.pts-cta:hover{background:rgba(201,151,58,.25);}
/* Layout principal confirmation */
.page-layout{padding:40px 0 80px;display:grid;grid-template-columns:1fr 380px;gap:32px;align-items:start;}
.left-col{display:flex;flex-direction:column;gap:24px;}
.right-col{display:flex;flex-direction:column;gap:20px;}
/* Panneau generique */
.panel{background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-sm);}
/* Items commandes */
.order-items{display:flex;flex-direction:column;gap:16px;}
.order-item{display:flex;gap:14px;align-items:center;}
.order-item-img{
width:64px;height:64px;min-width:64px;border-radius:var(--r-md);
background:var(--canvas-warm);border:1px solid var(--border);
display:flex;align-items:center;justify-content:center;
font-family:var(--font-d);font-style:italic;font-size:8px;
color:var(--ink-hint);text-align:center;line-height:1.5;
position:relative;
}
.order-item-qty-badge{
position:absolute;top:-6px;right:-6px;
width:20px;height:20px;border-radius:50%;
background:var(--ink);color:#fff;
font-size:10px;font-weight:700;font-family:var(--font-b);
display:flex;align-items:center;justify-content:center;
border:2px solid var(--canvas);
}
.order-item-info{flex:1;}
.order-item-brand{font-size:10px;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px;}
.order-item-name{font-size:14px;font-weight:600;color:var(--ink);line-height:1.3;margin-bottom:3px;}
.order-item-ref{font-size:11px;color:var(--ink-hint);}
.order-item-price{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.02em;white-space:nowrap;}
.order-divider{height:1px;background:var(--border);margin:8px 0;}
.order-totals{display:flex;flex-direction:column;gap:6px;}
.total-line{display:flex;justify-content:space-between;align-items:center;font-size:13px;}
.total-line .lbl{color:var(--ink-mute);}
.total-line .val{color:var(--ink-mid);font-weight:500;}
.total-line .val.green{color:var(--success);font-weight:700;}
.total-line.grand{margin-top:8px;padding-top:12px;border-top:1px solid var(--border);}
.total-line.grand .lbl{font-size:15px;font-weight:700;color:var(--ink);}
.total-line.grand .val{font-family:var(--font-d);font-size:22px;font-weight:800;color:var(--brand);letter-spacing:-.02em;}
/* Livraison tracking */
.tracking-section{padding:20px 24px;border-top:1px solid var(--border);background:var(--canvas-warm);}
.tracking-label{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.tracking-label-icon{width:22px;height:22px;border-radius:var(--r-sm);background:var(--brand-light);display:flex;align-items:center;justify-content:center;}
.track-bar{display:flex;align-items:flex-start;position:relative;}
.track-bar::before{content:'';position:absolute;top:12px;left:12px;right:12px;height:2px;background:var(--border);z-index:0;}
.track-bar::after{content:'';position:absolute;top:12px;left:12px;width:calc(25%);height:2px;background:var(--success);z-index:1;transition:width .8s var(--ease);}
.track-step{flex:1;text-align:center;position:relative;z-index:2;}
.track-dot{width:24px;height:24px;border-radius:50%;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;background:var(--canvas);border:2px solid var(--border);}
.track-dot.done{background:var(--success);border-color:var(--success);}
.track-dot.active{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 4px rgba(212,0,18,.12);}
.track-step-label{font-size:10px;font-weight:600;color:var(--ink-hint);}
.track-step-label.done{color:var(--success);}
.track-step-label.active{color:var(--brand);}
.track-eta{font-size:12px;color:var(--ink-mute);margin-top:14px;display:flex;align-items:center;gap:6px;}
.track-eta strong{color:var(--ink);}
/* Info livraison / paiement */
.info-box-content strong{color:var(--ink);font-weight:600;}
/* Prochaines etapes */
.steps-panel{background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-sm);}
.steps-list{display:flex;flex-direction:column;gap:0;}
.step-num-circle{
width:32px;height:32px;min-width:32px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:13px;font-weight:800;font-family:var(--font-d);
flex-shrink:0;
}
.step-num-circle.done{background:var(--success-bg);color:var(--success);}
.step-num-circle.pending{background:var(--canvas-warm);color:var(--ink-hint);border:1.5px solid var(--border);}
.step-text-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:3px;}
.step-text-sub{font-size:12px;color:var(--ink-mute);line-height:1.5;}
/* Upsell discret (confirmation) */
.upsell-panel{background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-sm);}
.upsell-header{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.upsell-eyebrow{font-size:11px;font-weight:700;color:var(--ink-hint);text-transform:uppercase;letter-spacing:.08em;}
.upsell-items{display:flex;flex-direction:column;gap:0;}
.upsell-item{display:flex;gap:12px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;}
.upsell-item:last-child{border-bottom:none;}
.upsell-item:hover{background:var(--canvas-warm);}
.upsell-img{width:52px;height:52px;min-width:52px;border-radius:var(--r-md);background:var(--canvas-warm);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-style:italic;font-size:7px;color:var(--ink-hint);text-align:center;line-height:1.4;}
.upsell-info{flex:1;}
.upsell-brand{font-size:9px;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px;}
.upsell-name{font-size:12px;font-weight:600;color:var(--ink);line-height:1.3;}
.upsell-reason{font-size:11px;color:var(--ink-mute);margin-top:2px;}
.upsell-price{font-size:15px;font-weight:800;color:var(--brand);white-space:nowrap;letter-spacing:-.02em;}
.upsell-add{
width:32px;height:32px;min-width:32px;border-radius:50%;
background:var(--brand);color:#fff;
display:flex;align-items:center;justify-content:center;
box-shadow:0 2px 8px rgba(212,0,18,.2);
transition:background .15s,transform .15s;
}
.upsell-item:hover .upsell-add{background:var(--brand-dk);transform:scale(1.08);}
/* Invitation avis */
.avis-panel{
background:linear-gradient(135deg,#1A3A5C 0%,#0E2440 100%);
border-radius:var(--r-xl);padding:26px 24px;
position:relative;overflow:hidden;
}
.avis-panel::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:32px 32px;}
.avis-panel > *{position:relative;z-index:1;}
.avis-panel .avis-eyebrow{color:var(--brand);}
.avis-panel .avis-title{color:#fff;font-size:19px;line-height:1.3;}
.avis-panel .avis-body{color:rgba(255,255,255,.72);}
.avis-panel .stars-row{margin:18px 0 18px;}
.avis-panel .star-btn{color:rgba(255,255,255,.25);background:transparent;border:none;font-size:28px;cursor:pointer;padding:2px 4px;transition:color .15s,transform .15s;}
.avis-panel .star-btn.active,.avis-panel .star-btn.hover{color:#F5B800;}
.avis-panel .star-btn:hover{transform:scale(1.1);}
.avis-panel .avis-btn{
width:100%;background:var(--brand);color:#fff;border:none;border-radius:var(--r-pill);
padding:14px 20px;font-size:14px;font-weight:600;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
transition:background .15s;
}
.avis-panel .avis-btn:hover:not(:disabled){background:var(--brand-dk);}
.avis-panel .avis-btn:disabled{background:rgba(255,255,255,.12);color:rgba(255,255,255,.45);cursor:not-allowed;}
/* Responsive confirmation */
@media(max-width:900px){
.page-layout{grid-template-columns:1fr;}
.right-col{order:-1;}
}
@media(max-width:580px){
.pts-banner{flex-direction:column;text-align:center;gap:14px;}
.pts-total{text-align:center;}
.upsell-item{flex-wrap:wrap;}
}
/* ===============================================================
CHECKOUT PS8 OVERRIDES -- Proparo CRO
Restyle native PrestaShop 8 Bootstrap checkout classes
to match Proparo design system
================================================================ */
/* --- Hide PS8 native elements on checkout, keep our tunnel-header + progress --- */
#checkout #header { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
#checkout .header-top,
#checkout .header-nav,
#checkout .promo-bar,
#checkout .breadcrumb-wrapper,
#checkout .breadcrumb,
#checkout #notifications,
#checkout .ft-main,
#checkout .ft-bottom { display: none !important; }
#checkout footer#footer { display: none !important; }
#checkout .modal.js-checkout-modal + .text-sm-center,
#checkout footer#footer ~ .text-sm-center { display: none !important; }
/* --- Material Icons: hide font, replace with CSS --- */
#checkout .material-icons {
font-size: 0 !important;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
}
#checkout .material-icons.done::before {
content: '';
display: block;
width: 18px;
height: 18px;
background: var(--success, #2E7D32);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
mask-size: contain;
-webkit-mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
}
#checkout .material-icons.edit::before {
content: '';
display: block;
width: 14px;
height: 14px;
background: var(--brand);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 000-1.42l-2.34-2.34a1.003 1.003 0 00-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 000-1.42l-2.34-2.34a1.003 1.003 0 00-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82z'/%3E%3C/svg%3E");
mask-size: contain;
-webkit-mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
}
/* --- Layout wrappers --- */
#checkout .tunnel-wrap {
max-width: 1100px;
margin: 0 auto;
padding: 40px 32px 80px;
}
#checkout .tunnel-layout {
display: grid;
grid-template-columns: 1fr 400px;
gap: 40px;
align-items: start;
}
#checkout .tunnel-main {
display: flex;
flex-direction: column;
gap: 20px;
}
#checkout .tunnel-aside {
position: sticky;
top: 128px;
}
/* --- Step accordion cards --- */
#checkout .checkout-step {
background: none;
border: none;
border-radius: 0;
overflow: visible;
box-shadow: none;
}
#checkout .checkout-step.-current .form-panel {
border: 1px solid var(--brand);
box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
#checkout .checkout-step.-reachable.-complete {
opacity: .88;
}
#checkout .checkout-step.-reachable.-complete:hover {
opacity: 1;
}
#checkout .checkout-step.-unreachable {
opacity: .5;
pointer-events: none;
}
/* Step title (header row) */
#checkout .checkout-step .step-title {
display: flex;
align-items: center;
gap: 14px;
padding: 22px 28px;
cursor: pointer;
font-family: var(--font-d);
font-size: 20px;
font-weight: 700;
color: var(--ink);
letter-spacing: -.02em;
border: none;
background: none;
width: 100%;
text-align: left;
transition: color .15s;
}
#checkout .checkout-step.-reachable.-complete .step-title {
color: var(--ink-mute);
font-size: 16px;
padding: 18px 28px;
}
#checkout .checkout-step.-current .step-title {
padding-bottom: 16px;
border-bottom: 1px solid var(--border);
}
/* Step number circle */
#checkout .checkout-step .step-number {
width: 36px;
height: 36px;
min-width: 36px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-d);
font-size: 14px;
font-weight: 800;
flex-shrink: 0;
transition: background .2s, color .2s, border-color .2s;
}
#checkout .checkout-step.-current .step-number {
background: var(--brand);
color: #fff;
border: none;
box-shadow: 0 0 0 4px rgba(212,0,18,.1);
}
#checkout .checkout-step.-reachable.-complete .step-number {
background: var(--success, #2E7D32);
color: #fff;
border: none;
}
#checkout .checkout-step.-unreachable .step-number {
background: var(--canvas-warm);
color: var(--ink-mute);
border: 1.5px solid var(--border);
}
/* Edit link on completed steps */
#checkout .checkout-step .step-edit {
margin-left: auto;
font-size: 12px;
font-weight: 600;
color: var(--brand);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
transition: color .15s;
font-family: var(--font-b);
}
#checkout .checkout-step .step-edit:hover {
color: var(--brand-dk);
}
/* Step body - ONLY visible when step is current */
#checkout .checkout-step .content { display: none; }
#checkout .checkout-step .form-footer { display: none; }
#checkout .checkout-step.-current .content { display: block; padding: 24px 28px 28px; font-family: var(--font-b); font-size: 14px; color: var(--ink); line-height: 1.6; }
#checkout .checkout-step.-current .form-footer { display: block; padding: 0 28px 28px; }
/* Completed step summary line */
#checkout .checkout-step.-complete:not(.-current) .form-panel { padding-bottom: 0; }
#checkout .checkout-step.-complete:not(.-current) .step-header { border-bottom: none; cursor: pointer; }
#checkout .checkout-step.-complete:not(.-current) .step-header-num { background: #E8F5E9; color: #2D8A4E; }
#checkout .step-summary { display: none; padding: 0 28px 20px; font-size: 13px; color: var(--ink-mute); line-height: 1.5; }
#checkout .checkout-step.-complete:not(.-current) .step-summary { display: flex; align-items: center; justify-content: space-between; }
#checkout .step-summary-text { flex: 1; }
#checkout .step-summary-edit { font-size: 12px; color: var(--brand); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
#checkout .step-summary-edit:hover { text-decoration: underline; }
/* --- Navigation tabs (login/register/guest) --- */
#checkout .nav.nav-inline {
display: flex;
gap: 0;
background: var(--canvas-warm);
border-radius: var(--r-lg);
padding: 4px;
margin-bottom: 24px;
border: none;
list-style: none;
}
#checkout .nav.nav-inline .nav-item {
flex: 1;
}
#checkout .nav.nav-inline .nav-separator {
display: none;
}
#checkout .nav.nav-inline .nav-link {
display: block;
width: 100%;
padding: 10px 16px;
border-radius: calc(var(--r-lg) - 2px);
font-size: 13px;
font-weight: 600;
color: var(--ink-mute);
text-align: center;
border: none;
background: none;
transition: background .2s, color .2s, box-shadow .2s;
font-family: var(--font-b);
text-decoration: none;
cursor: pointer;
}
#checkout .nav.nav-inline .nav-link:hover {
color: var(--ink);
}
#checkout .nav.nav-inline .nav-link.active {
background: var(--canvas);
color: var(--ink);
box-shadow: var(--sh-sm);
font-weight: 700;
}
/* --- Form layout overrides --- */
#checkout .form-group.row {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 16px;
margin-left: 0;
margin-right: 0;
}
#checkout .form-group.row > [class*="col-"] {
flex: none;
width: 100%;
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
#checkout .form-group .form-control-label {
font-size: 12px;
font-weight: 600;
color: var(--ink-mute);
text-transform: uppercase;
letter-spacing: .05em;
margin-bottom: 0;
font-family: var(--font-b);
}
#checkout .form-group .form-control-comment {
display: none;
}
/* --- Form controls --- */
#checkout .form-control {
height: 48px;
padding: 12px 16px;
font-size: 14px;
font-weight: 500;
color: var(--ink);
background: var(--canvas);
border: 1.5px solid var(--border);
border-radius: 12px;
font-family: var(--font-b);
transition: border-color .2s, box-shadow .2s;
outline: none;
-webkit-appearance: none;
appearance: none;
width: 100%;
box-sizing: border-box;
}
#checkout .form-control:focus {
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(212,0,18,.08);
}
#checkout .form-control::placeholder {
color: var(--ink-mute);
font-weight: 400;
}
#checkout textarea.form-control {
height: auto;
min-height: 100px;
resize: vertical;
}
#checkout select.form-control {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8A84' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
}
/* --- Custom radio buttons --- */
#checkout .custom-radio {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px 18px;
border: 1.5px solid var(--border);
border-radius: var(--r-lg);
cursor: pointer;
transition: border-color .15s, background .15s;
margin-bottom: 10px;
position: relative;
}
#checkout .custom-radio:hover {
border-color: var(--brand);
background: rgba(212,0,18,.02);
}
#checkout .custom-radio input[type="radio"] {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
min-width: 20px;
border: 2px solid var(--border);
border-radius: 50%;
margin: 0;
margin-top: 1px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: border-color .15s;
position: relative;
background: var(--canvas);
}
#checkout .custom-radio input[type="radio"]::after {
content: '';
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--brand);
transform: scale(0);
transition: transform .2s cubic-bezier(.4,0,.2,1);
}
#checkout .custom-radio input[type="radio"]:checked {
border-color: var(--brand);
}
#checkout .custom-radio input[type="radio"]:checked::after {
transform: scale(1);
}
#checkout .custom-radio input[type="radio"]:checked ~ label,
#checkout .custom-radio input[type="radio"]:checked + label {
color: var(--ink);
font-weight: 600;
}
/* --- Custom checkboxes --- */
#checkout .custom-checkbox {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 12px;
cursor: pointer;
}
#checkout .custom-checkbox input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
min-width: 20px;
border: 1.5px solid var(--border);
border-radius: 6px;
margin: 0;
margin-top: 1px;
flex-shrink: 0;
cursor: pointer;
transition: background .15s, border-color .15s;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
background: var(--canvas);
}
#checkout .custom-checkbox input[type="checkbox"]::after {
content: '';
width: 12px;
height: 12px;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
mask-size: contain;
-webkit-mask-size: contain;
background: #fff;
opacity: 0;
transition: opacity .15s;
}
#checkout .custom-checkbox input[type="checkbox"]:checked {
background: var(--brand);
border-color: var(--brand);
}
#checkout .custom-checkbox input[type="checkbox"]:checked::after {
opacity: 1;
}
#checkout .custom-checkbox label {
font-size: 13px;
color: var(--ink-mute);
line-height: 1.5;
font-family: var(--font-b);
cursor: pointer;
}
/* --- Form info blocks --- */
#checkout .form-informations {
font-size: 12px;
color: var(--ink-mute);
line-height: 1.6;
padding: 12px 16px;
background: var(--canvas-warm);
border-radius: 10px;
margin-top: 8px;
border: 1px solid var(--border);
}
/* --- CTA buttons --- */
#checkout .btn.btn-primary,
#checkout .continue.btn {
width: 100%;
height: 52px;
background: var(--brand);
color: #fff;
font-size: 15px;
font-weight: 700;
border: none;
border-radius: var(--r-pill);
box-shadow: 0 4px 16px rgba(212,0,18,.2);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 20px;
transition: background .2s, transform .15s, box-shadow .2s;
letter-spacing: -.01em;
cursor: pointer;
font-family: var(--font-b);
text-transform: none;
padding: 0 32px;
}
#checkout .btn.btn-primary:hover,
#checkout .continue.btn:hover {
background: var(--brand-dk);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(212,0,18,.28);
}
#checkout .btn.btn-primary:active,
#checkout .continue.btn:active {
transform: scale(.97);
}
/* --- Cart summary sidebar --- */
#checkout .cart-summary {
background: var(--canvas);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--sh-sm);
}
#checkout .cart-summary .card-header,
#checkout .cart-summary .cart-summary-top {
padding: 20px 24px;
border-bottom: 1px solid var(--border);
font-family: var(--font-d);
font-size: 16px;
font-weight: 700;
color: var(--ink);
letter-spacing: -.01em;
}
/* Product list in summary */
#checkout .cart-summary .media-list {
list-style: none;
padding: 16px 24px;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
#checkout .cart-summary .media {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 0;
border: none;
}
#checkout .cart-summary .media-object {
width: 56px;
height: 56px;
min-width: 56px;
object-fit: cover;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--canvas-warm);
}
#checkout .cart-summary .media-body {
flex: 1;
min-width: 0;
}
#checkout .cart-summary .media-body .product-name {
font-size: 13px;
font-weight: 500;
color: var(--ink);
line-height: 1.4;
margin-bottom: 2px;
}
#checkout .cart-summary .media-body .product-price {
font-size: 14px;
font-weight: 700;
color: var(--ink);
}
#checkout .cart-summary .media-body .product-quantity {
font-size: 11px;
color: var(--ink-mute);
}
/* Summary totals */
#checkout .cart-summary .cart-summary-totals {
padding: 16px 24px;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 10px;
}
#checkout .cart-summary .cart-summary-totals .cart-summary-line {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
color: var(--ink-mute);
font-family: var(--font-b);
}
#checkout .cart-summary .cart-summary-totals .cart-summary-line .value {
font-weight: 500;
color: var(--ink);
}
#checkout .cart-summary .cart-summary-totals .cart-summary-line.cart-total {
padding-top: 12px;
margin-top: 4px;
border-top: 1px solid var(--border);
}
#checkout .cart-summary .cart-summary-totals .cart-summary-line.cart-total .label {
font-size: 15px;
font-weight: 700;
color: var(--ink);
}
#checkout .cart-summary .cart-summary-totals .cart-summary-line.cart-total .value {
font-size: 20px;
font-weight: 800;
color: var(--brand);
font-family: var(--font-d);
letter-spacing: -.02em;
}
/* --- Delivery options --- */
#checkout .delivery-options {
display: flex;
flex-direction: column;
gap: 10px;
list-style: none;
padding: 0;
margin: 0;
}
#checkout .delivery-options .delivery-option {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px 18px;
border: 1.5px solid var(--border);
border-radius: var(--r-lg);
cursor: pointer;
transition: border-color .15s, background .15s;
}
#checkout .delivery-options .delivery-option:hover {
border-color: var(--brand);
background: rgba(212,0,18,.02);
}
#checkout .delivery-options .delivery-option label {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
cursor: pointer;
font-family: var(--font-b);
}
#checkout .delivery-options .delivery-option .carrier-name {
font-size: 14px;
font-weight: 600;
color: var(--ink);
}
#checkout .delivery-options .delivery-option .carrier-delay {
font-size: 12px;
color: var(--ink-mute);
}
#checkout .delivery-options .delivery-option .carrier-price {
margin-left: auto;
font-size: 14px;
font-weight: 700;
color: var(--ink);
white-space: nowrap;
}
/* --- Payment options : layout type Fnac ---
Radio (gauche) | Libelle | Logos (droite, plus gros)
Le markup a 2 classes par item (.pay-method ET .payment-option),
on cible la combinaison pour battre l'ancienne regle .pay-method (col center). */
.pay-methods.payment-options {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
list-style: none;
padding: 0;
margin: 0 0 24px !important;
grid-template-columns: none !important;
}
.pay-methods.payment-options .pay-method.payment-option {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
text-align: left !important;
gap: 14px !important;
padding: 18px 20px !important;
border: 1.5px solid var(--border) !important;
border-radius: var(--r-lg) !important;
cursor: pointer;
transition: border-color .15s, background .15s;
background: #ffffff !important;
}
.pay-methods.payment-options .pay-method.payment-option:hover {
border-color: var(--brand) !important;
background: rgba(212, 0, 18, 0.02) !important;
}
.pay-methods.payment-options .pay-method.payment-option:has(input[type="radio"]:checked) {
border-color: var(--brand) !important;
background: rgba(212, 0, 18, 0.04) !important;
}
/* Classe utilitaire JS : masque definitif (bat les display:flex !important) */
.pay-methods.payment-options .pay-method.payment-option.proparo-wallet-hidden,
.payment-option.proparo-wallet-hidden {
display: none !important;
}
/* Radio rond custom, rouge a la selection */
.pay-methods.payment-options .pay-method.payment-option input[type="radio"].ps-shown-by-js {
appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
border: 2px solid #cfcdc8;
border-radius: 50%;
cursor: pointer;
display: inline-block;
position: relative;
flex-shrink: 0;
margin: 0;
background: #ffffff;
transition: border-color .15s, background .15s;
}
.pay-methods.payment-options .pay-method.payment-option input[type="radio"].ps-shown-by-js:hover,
.pay-methods.payment-options .pay-method.payment-option input[type="radio"].ps-shown-by-js:checked {
border-color: var(--brand);
}
.pay-methods.payment-options .pay-method.payment-option input[type="radio"].ps-shown-by-js:checked::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--brand);
}
/* Label : libelle a gauche, logo a droite (FNAC-style) */
.pay-methods.payment-options .pay-method.payment-option label.pay-method-inner {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 12px !important;
flex: 1 !important;
cursor: pointer;
font-size: 15px !important;
font-weight: 600 !important;
color: var(--ink) !important;
font-family: var(--font-b, 'DM Sans'), Arial, sans-serif !important;
margin: 0 !important;
text-align: left !important;
}
.pay-methods.payment-options .pay-method.payment-option .pay-method-label {
order: 1 !important;
flex: 1 !important;
text-align: left !important;
font-size: 15px !important;
font-weight: 600 !important;
color: var(--ink) !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
.pay-methods.payment-options .pay-method.payment-option .pay-method-icon {
order: 2 !important;
display: inline-flex !important;
align-items: center;
margin-left: auto !important;
height: auto !important;
}
.pay-methods.payment-options .pay-method.payment-option img {
height: 32px !important;
width: auto !important;
max-width: 140px !important;
max-height: 32px !important;
object-fit: contain;
display: block;
}
/* Sur petits ecrans : logo plus petit, padding resserre */
@media (max-width: 480px) {
.pay-methods.payment-options .pay-method.payment-option {
padding: 14px 16px !important;
gap: 12px !important;
}
.pay-methods.payment-options .pay-method.payment-option img {
height: 26px !important;
max-height: 26px !important;
max-width: 100px !important;
}
.pay-methods.payment-options .pay-method.payment-option label.pay-method-inner {
font-size: 14px !important;
}
.pay-methods.payment-options .pay-method.payment-option .pay-method-label {
font-size: 14px !important;
}
}
/* --- Address block --- */
#checkout .address-item {
background: var(--canvas-warm);
border: 1.5px solid var(--border);
border-radius: var(--r-lg);
padding: 18px 20px;
margin-bottom: 12px;
transition: border-color .15s;
}
#checkout .address-item.selected,
#checkout .address-item:has(input:checked) {
border-color: var(--brand);
background: rgba(212,0,18,.02);
}
#checkout .address-item .address {
font-size: 13px;
color: var(--ink-mute);
line-height: 1.6;
}
#checkout .address-item .address .address-alias {
font-weight: 700;
color: var(--ink);
display: block;
margin-bottom: 4px;
font-size: 14px;
}
/* --- Responsive checkout --- */
@media (max-width: 860px) {
#checkout .tunnel-layout {
grid-template-columns: 1fr;
}
#checkout .tunnel-aside {
position: static;
order: 2;
}
#checkout .tunnel-main {
order: 1;
}
#checkout .checkout-step .step-title {
padding: 18px 20px;
font-size: 17px;
}
#checkout .checkout-step .content {
padding: 20px;
}
#checkout .nav.nav-inline {
flex-wrap: wrap;
}
#checkout .form-group.row {
margin-bottom: 14px;
}
}
@media (max-width: 480px) {
#checkout .tunnel-wrap {
padding: 20px 16px 60px;
}
#checkout .checkout-step .step-title {
padding: 16px;
font-size: 16px;
gap: 10px;
}
#checkout .checkout-step .step-number {
width: 30px;
height: 30px;
min-width: 30px;
font-size: 12px;
}
#checkout .checkout-step .content {
padding: 16px;
}
#checkout .cart-summary .media-list {
padding: 14px 16px;
}
#checkout .cart-summary .cart-summary-totals {
padding: 14px 16px;
}
#checkout .btn.btn-primary,
#checkout .continue.btn {
height: 48px;
font-size: 14px;
}
}
/* --- Address cards --- */
#checkout .address-card {
border: 1.5px solid var(--border);
border-radius: 14px;
padding: 0;
margin-bottom: 10px;
background: var(--canvas);
transition: border-color .15s, box-shadow .15s;
overflow: hidden;
}
#checkout .address-card.selected {
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(212,0,18,.06);
}
#checkout .address-card-inner {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px 20px;
cursor: pointer;
}
#checkout .address-card-radio {
flex-shrink: 0;
margin-top: 2px;
}
#checkout .address-card-radio input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
#checkout .address-radio-dot {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
transition: border-color .15s;
}
#checkout .address-card.selected .address-radio-dot {
border-color: var(--brand);
}
#checkout .address-radio-dot-inner {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--brand);
transform: scale(0);
transition: transform .2s;
}
#checkout .address-card.selected .address-radio-dot-inner {
transform: scale(1);
}
#checkout .address-card-body {
flex: 1;
min-width: 0;
}
#checkout .address-card-alias {
font-size: 14px;
font-weight: 700;
color: var(--ink);
margin-bottom: 6px;
}
#checkout .address-card-text {
font-size: 13px;
color: var(--ink-mute);
line-height: 1.5;
}
#checkout .address-card-text br { display: block; margin-bottom: 2px; }
#checkout .address-card-actions {
display: flex;
gap: 16px;
padding: 10px 20px;
border-top: 1px solid var(--border);
background: var(--canvas-warm);
}
#checkout .address-action {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 500;
color: var(--ink-mute);
text-decoration: none;
transition: color .15s;
cursor: pointer;
}
#checkout .address-action:hover { color: var(--ink); }
#checkout .address-action--delete:hover { color: var(--brand); }
#checkout .add-address { margin: 12px 0 16px; }
#checkout .different-invoice-link { margin-top: 8px; }
#checkout .different-invoice-link a { font-size: 13px; color: var(--brand); text-decoration: underline; }
#checkout .address-info-text { font-size: 13px; color: var(--ink-mute); margin-bottom: 16px; line-height: 1.5; }
/* Locked/unreachable steps */
/* --- Active form panel spacing --- */
#checkout .tunnel-layout { padding: 40px 20px 60px; max-width: 1100px; margin: 0 auto; }
#checkout .tunnel-main { display: flex; flex-direction: column; gap: 16px; }
#checkout .form-panel { margin-bottom: 0; overflow: hidden; }
#checkout .step-content { padding: 0 32px 32px; }
#checkout .form-footer { padding: 0 32px 32px; border-top: none; }
/* --- Field sizing fixes --- */
#checkout .field {
margin-bottom: 12px;
display: flex;
flex-direction: column-reverse;
}
#checkout .field--radio { margin-bottom: 16px; display: block; }
#checkout .field--check { margin-bottom: 8px; display: block; }
#checkout .field-input {
padding: 0 16px !important;
height: 52px;
line-height: 52px;
font-size: 15px;
}
#checkout .field-input::placeholder {
line-height: 52px;
color: var(--ink-hint);
}
#checkout textarea.field-input {
height: auto;
line-height: 1.5;
padding: 14px 16px !important;
}
#checkout .field-select {
padding: 0 16px;
height: 52px;
line-height: 52px;
font-size: 15px;
border: 1.5px solid var(--border);
border-radius: 12px;
background: var(--canvas);
width: 100%;
appearance: none;
-webkit-appearance: none;
}
#checkout .field-label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--ink-mute);
text-transform: uppercase;
letter-spacing: .05em;
margin-bottom: 6px;
position: static;
transform: none;
pointer-events: auto;
}
#checkout .radio-group-inline { display: flex; gap: 10px; margin-top: 6px; }
#checkout .radio-pill { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1.5px solid var(--border); border-radius: var(--r-pill); cursor: pointer; font-size: 13px; transition: all .15s; }
#checkout .radio-pill:hover { border-color: var(--ink-mute); }
#checkout .radio-pill input[type="radio"] { display: none; }
#checkout .radio-pill input[type="radio"]:checked + .radio-pill-label { color: var(--brand); }
#checkout .radio-pill:has(input:checked) { border-color: var(--brand); background: rgba(212,0,18,.04); }
#checkout .field-label-static { font-size: 12px; font-weight: 600; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .05em; }
/* --- Checkbox design --- */
#checkout .check-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 6px 0; }
#checkout .check-input { display: none; }
#checkout .check-box { width: 18px; height: 18px; min-width: 18px; border: 1.5px solid var(--border); border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: all .15s; background: var(--canvas); margin-top: 1px; }
#checkout .check-box svg { opacity: 0; transition: opacity .15s; }
#checkout .check-input:checked ~ .check-box { background: var(--brand); border-color: var(--brand); }
#checkout .check-input:checked ~ .check-box svg { opacity: 1; }
#checkout .check-text { font-size: 13px; color: var(--ink-mute); line-height: 1.45; }
#checkout .check-text em { font-style: normal; font-size: 11px; color: var(--ink-hint); display: block; margin-top: 2px; }
/* --- Guest toggle tabs --- */
#checkout .guest-toggle { display: flex; background: var(--canvas-warm); border-radius: var(--r-pill); padding: 4px; margin-bottom: 24px; }
#checkout .guest-btn { flex: 1; text-align: center; padding: 10px 16px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--ink-mute); text-decoration: none; cursor: pointer; transition: all .2s; }
#checkout .guest-btn.active { background: var(--canvas); color: var(--ink); box-shadow: var(--sh-sm); }
#checkout .guest-btn:hover:not(.active) { color: var(--ink); }
/* --- Summary sidebar --- */
#checkout .order-summary { position: sticky; top: 140px; }
#checkout .summary-card { background: var(--canvas); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; }
#checkout .summary-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
#checkout .summary-title { font-family: var(--font-d); font-size: 17px; font-weight: 700; }
#checkout .summary-toggle { font-size: 12px; color: var(--ink-mute); cursor: pointer; }
#checkout .summary-items { padding: 16px 24px; }
#checkout .summary-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
#checkout .summary-item-img { width: 48px; height: 48px; background: transparent; flex-shrink: 0; position: relative; overflow: visible; }
#checkout .summary-item-img a,
#checkout .summary-item-img picture { display: block; width: 48px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--canvas-warm); }
#checkout .summary-item-img img { width: 100%; height: 100%; object-fit: cover; }
#checkout .item-qty-badge { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); line-height: 1; z-index: 2; }
#checkout .summary-item-name a { font-size: 13px; font-weight: 500; color: var(--ink); text-decoration: none; }
#checkout .summary-item-price { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; }
#checkout .summary-totals { padding: 16px 24px; border-top: 1px solid var(--border); }
#checkout .total-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; color: var(--ink-mute); }
#checkout .total-row.main { font-size: 16px; font-weight: 700; color: var(--ink); padding: 8px 0 0; }
#checkout .total-row.main .total-val { color: var(--brand); font-family: var(--font-d); }
#checkout .total-sep { height: 1px; background: var(--border); margin: 8px 0; }
#checkout .summary-reass { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
#checkout .reass-mini { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-mute); }
/* --- Responsive --- */
@media (max-width: 860px) {
#checkout .tunnel-layout { grid-template-columns: 1fr; padding: 20px 16px 40px; }
#checkout .order-summary { position: static; }
#checkout .step-content { padding: 0 20px 24px; }
#checkout .form-footer { padding: 0 20px 24px; }
}
/* --- Locked/unreachable steps --- */
#checkout .form-panel--locked {
background: var(--canvas-warm);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 20px 24px;
margin-bottom: 12px;
opacity: 0.5;
}
#checkout .form-panel--locked .step-header-num {
background: var(--border);
color: var(--ink-mute);
}
/* Form section title (create account) */
#checkout .form-section-title {
font-size: 14px;
font-weight: 700;
color: var(--ink);
padding: 16px 0 8px;
margin-top: 8px;
border-top: 1px solid var(--border);
}
/* Tab pane visibility */
#checkout .tab-pane { display: none; }
#checkout .tab-pane.active { display: block; }
/* Field hint styling */
#checkout .field-hint {
font-size: 11px;
color: var(--ink-mute);
margin-top: 4px;
display: block;
}
/* Password field with eye toggle */
#checkout .field-password-wrap {
position: relative;
}
#checkout .field-password-wrap .field-input {
padding-right: 48px;
}
#checkout .field-pw-toggle {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
color: var(--ink-mute);
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
}
#checkout .field-pw-toggle:hover { color: var(--ink); }
/* Form informations PS8 override */
#checkout .form-informations { display: none; }
/* Password strength feedback */
#checkout .password-strength-feedback { margin-top: 8px; }
#checkout .password-strength-feedback .progress { height: 4px; border-radius: 2px; background: var(--border); }
#checkout .password-strength-feedback .progress-bar { border-radius: 2px; transition: width .3s; }
/* ===============================================================
ACCOUNT PAGES OVERRIDES (identity, address, history, etc.)
Same design as checkout forms
================================================================ */
#identity .page-content,
#address .page-content,
#authentication .page-content,
#registration .page-content,
#password .page-content {
max-width: 680px;
margin: 0 auto;
padding: 40px 20px 60px;
}
/* ======================
ACCOUNT CARD : encart avec border + box-shadow pour wrapper
les formulaires sur les pages dediees (identite, adresses, etc.)
====================== */
.account-card{
background:#FFFFFF;
border:1px solid var(--border);
border-radius:var(--r-xl);
box-shadow:0 2px 14px rgba(0,0,0,.04);
overflow:hidden;
margin:24px 0;
}
.account-card-header{
padding:24px 28px;
border-bottom:1px solid var(--border);
background:var(--canvas-warm);
display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.account-card-title{
font-family:var(--font-d);font-size:20px;font-weight:700;
color:var(--ink);margin:0 0 4px;letter-spacing:-.015em;
}
.account-card-subtitle{
font-size:13px;color:var(--ink-mute);margin:0;line-height:1.5;
}
.account-card-back{
display:inline-flex;align-items:center;gap:6px;
font-size:13px;font-weight:600;color:var(--ink-mute);
text-decoration:none;transition:color .15s;
padding:6px 10px;border-radius:var(--r-pill);
flex-shrink:0;
}
.account-card-back:hover{color:var(--brand);}
.account-card-body{padding:32px 28px;}
@media(max-width:640px){
.account-card-body{padding:22px 18px;}
.account-card-header{padding:18px 20px;}
}
/* Notifications de sauvegarde rendues a l'interieur du body de la carte, au dessus du premier champ */
.account-card-body > #notifications{display:block;margin:0 0 20px;}
.account-card-body > #notifications .notifications-container{max-width:none;padding:0;margin:0;}
.account-card-body > #notifications .alert{margin:0;border:none;border-radius:12px;padding:12px 16px;font-size:13.5px;line-height:1.5;}
.account-card-body > #notifications .alert ul{margin:0;padding:0;list-style:none;}
.account-card-body > #notifications .alert-success{background:rgba(18,148,79,.08);color:#0E7A3F;}
.account-card-body > #notifications .alert-danger{background:rgba(212,0,18,.08);color:var(--brand);}
.account-card-body > #notifications .alert-warning{background:rgba(217,119,6,.08);color:#B45309;}
.account-card-body > #notifications .alert-info{background:rgba(2,132,199,.08);color:#0369A1;}
/* Style "carte" sur les pages Mon compte non encore migrees vers .account-card
(les pages migrees fournissent leur propre wrapper .account-card) */
#history .page-content,
#order-slip .page-content,
#order-detail .page-content,
#order-follow .page-content,
#order-return .page-content,
#guest-tracking .page-content{
background:#FFFFFF;
border:1px solid var(--border);
border-radius:var(--r-xl);
box-shadow:0 2px 14px rgba(0,0,0,.04);
padding:32px 28px;
margin:24px auto 32px;
max-width:960px;
}
@media(max-width:640px){
#history .page-content,
#order-slip .page-content,
#order-detail .page-content,
#order-follow .page-content,
#order-return .page-content,
#guest-tracking .page-content{padding:22px 18px;}
}
/* Wrapper Mon compte : sidebar + main-content
Neutralise les contraintes de largeur/padding sur .page-content quand la
page est rendue a l'interieur de .page-wrap : le .account-card sert de
cadre visuel a l'interieur du main-content. On force la largeur pleine
pour prendre le pas sur #identity .page-content { max-width:680px }. */
.page-wrap #content.page-content,
body .page-wrap #content.page-content{
background:transparent;border:none;box-shadow:none;
padding:0;margin:0;max-width:none;width:auto;
}
.page-wrap .main-content{min-width:0;width:100%;}
.page-wrap .main-content > #content.page-content{width:100%;max-width:none;}
.page-wrap .account-card{margin:0 0 24px;width:100%;max-width:none;}
/* Desktop : titre + bouton retour sur la meme ligne (carte large dans page-wrap) */
@media (min-width: 1025px){
.page-wrap .account-card-header{flex-wrap:nowrap;}
}
/* Header de carte : actions alignees a droite et centrees verticalement */
.page-wrap .account-card-header{align-items:center;}
.account-card-header-actions{
display:flex;align-items:center;gap:14px;
flex-shrink:0;flex-wrap:wrap;
margin-left:auto;
}
.account-card-cta,
.account-card-cta:link,
.account-card-cta:visited{
display:inline-flex;align-items:center;gap:6px;
background:var(--brand);color:#fff;
padding:10px 18px;border-radius:var(--r-pill);
font-size:13px;font-weight:600;letter-spacing:-.01em;
text-decoration:none;border:none;
transition:background .15s,transform .15s,box-shadow .15s;
box-shadow:0 2px 8px rgba(212,0,18,.18);
}
.account-card-cta:hover{
background:var(--brand-dk);color:#fff;
transform:translateY(-1px);
box-shadow:0 4px 14px rgba(212,0,18,.28);
}
/* Mode "flush" : le body de la .account-card n'a aucun padding, le tableau
qu'il contient remplit la carte entierement (zero padding haut / droite /
bas / gauche). Les notifications gardent leur margin interne. */
.account-card-body--flush{padding:0;}
.account-card-body--flush > #notifications{margin:16px 28px 0;}
@media(max-width:640px){
.account-card-body--flush > #notifications{margin:14px 18px 0;}
}
/* Tableaux de listing dans un body flush : pas de double encart, pleine largeur */
.account-card-body--flush .order-history-table,
.account-card-body--flush .slips-table{
border:none;border-radius:0;box-shadow:none;background:transparent;
margin:0;width:100%;
}
.account-card-body--flush .order-history-table thead th,
.account-card-body--flush .slips-table thead th{background:var(--canvas-warm);}
.account-card-body--flush .order-history-table thead th:first-child,
.account-card-body--flush .slips-table thead th:first-child,
.account-card-body--flush .order-history-table tbody td:first-child,
.account-card-body--flush .order-history-table tbody th:first-child,
.account-card-body--flush .slips-table tbody td:first-child{padding-left:28px;}
.account-card-body--flush .order-history-table thead th:last-child,
.account-card-body--flush .slips-table thead th:last-child,
.account-card-body--flush .order-history-table tbody td:last-child,
.account-card-body--flush .slips-table tbody td:last-child{padding-right:28px;}
@media(max-width:640px){
.account-card-body--flush .order-history-table thead th:first-child,
.account-card-body--flush .slips-table thead th:first-child,
.account-card-body--flush .order-history-table tbody td:first-child,
.account-card-body--flush .order-history-table tbody th:first-child,
.account-card-body--flush .slips-table tbody td:first-child{padding-left:18px;}
.account-card-body--flush .order-history-table thead th:last-child,
.account-card-body--flush .slips-table thead th:last-child,
.account-card-body--flush .order-history-table tbody td:last-child,
.account-card-body--flush .slips-table tbody td:last-child{padding-right:18px;}
}
/* Etats vides + listes mobiles : on re-applique un padding autour */
.account-card-body--flush .orders.mobile-only,
.account-card-body--flush .slips-list.mobile-only,
.account-card-body--flush .slips-empty,
.account-card-body--flush .info-notice{margin:16px 28px;}
@media(max-width:640px){
.account-card-body--flush .orders.mobile-only,
.account-card-body--flush .slips-list.mobile-only,
.account-card-body--flush .slips-empty,
.account-card-body--flush .info-notice{margin:14px 18px;}
}
/* ================================================
AVOIRS (order-slip) : table + etat vide
================================================ */
.slips-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;font-size:14px;}
.slips-table thead th{
background:var(--canvas-warm);
padding:14px 18px;
text-align:left;
font-family:var(--font-b);
font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--ink-mute);
border-bottom:1px solid var(--border);
}
.slips-table tbody td{padding:16px 18px;border-bottom:1px solid var(--border);color:var(--ink);vertical-align:middle;}
.slips-table tbody tr:last-child td{border-bottom:none;}
.slips-table tbody tr:hover{background:var(--canvas-warm);}
.slips-col-action{width:120px;text-align:right;}
.slip-order-link{
display:inline-flex;align-items:center;gap:8px;
color:var(--ink);font-weight:600;text-decoration:none;
transition:color .15s;
}
.slip-order-link:hover{color:var(--brand);}
.slip-order-link svg{color:var(--ink-mute);flex-shrink:0;}
.slip-number{font-family:var(--font-d);font-weight:700;color:var(--ink);letter-spacing:-.005em;}
.slip-download{
display:inline-flex;align-items:center;gap:6px;
padding:8px 14px;border-radius:var(--r-pill);
background:rgba(212,0,18,.08);color:var(--brand);
font-size:12px;font-weight:600;
text-decoration:none;transition:background .15s,color .15s;
}
.slip-download:hover{background:var(--brand);color:#fff;}
/* Liste mobile */
.slips-list{display:flex;flex-direction:column;gap:12px;}
.slip-card{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:#fff;}
.slip-card-head{
display:flex;justify-content:space-between;align-items:center;gap:12px;
padding:14px 18px;background:var(--canvas-warm);border-bottom:1px solid var(--border);
}
.slip-card-number{font-family:var(--font-d);font-weight:700;color:var(--ink);}
.slip-card-date{font-size:12px;color:var(--ink-mute);}
.slip-card-body{padding:14px 18px;}
.slip-card-row{display:flex;justify-content:space-between;gap:12px;font-size:14px;}
.slip-card-label{color:var(--ink-mute);}
.slip-card-footer{padding:12px 18px;border-top:1px solid var(--border);text-align:center;}
/* Etat vide : pas d'avoir */
.slips-empty{
text-align:center;
padding:48px 24px;
background:var(--canvas-warm);
border:1px dashed var(--border);
border-radius:var(--r-lg);
}
.slips-empty-icon{
width:56px;height:56px;border-radius:50%;
background:#fff;border:1px solid var(--border);
display:flex;align-items:center;justify-content:center;
margin:0 auto 16px;color:var(--ink-mute);
}
.slips-empty-title{
font-family:var(--font-d);font-size:16px;font-weight:700;
color:var(--ink);margin:0 0 6px;
}
.slips-empty-text{font-size:13px;color:var(--ink-mute);margin:0;line-height:1.55;}
@media(max-width:640px){
.slips-table.desktop-only{display:none;}
.slips-list.mobile-only{display:flex;}
}
@media(min-width:641px){
.slips-list.mobile-only{display:none;}
}
/* ================================================
HISTORIQUE COMMANDES : listing mobile (cards)
================================================ */
.account-card-body--flush .orders.mobile-only {
display: flex;
flex-direction: column;
gap: 12px;
}
.account-card-body--flush .orders.mobile-only .order {
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 16px 18px;
transition: box-shadow .2s, border-color .15s;
}
.account-card-body--flush .orders.mobile-only .order:hover {
border-color: var(--brand);
box-shadow: 0 4px 14px rgba(20, 20, 18, 0.06);
}
.account-card-body--flush .orders.mobile-only .order-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}
.account-card-body--flush .orders.mobile-only .order-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.account-card-body--flush .orders.mobile-only .order-info a {
text-decoration: none;
}
.account-card-body--flush .orders.mobile-only .order-info h3 {
font-family: var(--font-d, 'Playfair Display'), serif;
font-size: 18px;
font-weight: 600;
color: var(--ink);
margin: 0;
letter-spacing: -.005em;
}
.account-card-body--flush .orders.mobile-only .order-info .date {
font-size: 12px;
color: var(--ink-hint);
letter-spacing: 0.02em;
}
.account-card-body--flush .orders.mobile-only .order-info .total {
font-family: var(--font-d, 'Playfair Display'), serif;
font-size: 18px;
font-weight: 600;
color: var(--brand);
margin-top: 2px;
}
.account-card-body--flush .orders.mobile-only .order-info .status {
margin-top: 4px;
}
.account-card-body--flush .orders.mobile-only .order-quick-actions {
display: flex;
flex-direction: column;
gap: 10px;
flex-shrink: 0;
}
.account-card-body--flush .orders.mobile-only .order-quick-actions > div {
display: flex;
}
.account-card-body--flush .orders.mobile-only .order-quick-actions a {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--canvas-warm);
color: var(--ink-mute);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s, color .15s;
text-decoration: none;
}
.account-card-body--flush .orders.mobile-only .order-quick-actions a:hover {
background: var(--brand);
color: #ffffff;
}
/* ================================================
BADGE "Paiement accepte" (order-status-label)
PS injecte un background-color inline ; on l'override
pour styler proprement le badge.
================================================ */
.order-status-label {
display: inline-flex !important;
align-items: center !important;
padding: 5px 12px !important;
border-radius: var(--r-pill) !important;
background: rgba(34, 139, 87, 0.10) !important;
color: #1f7a4d !important;
font-family: var(--font-b, 'DM Sans'), sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
line-height: 1.4 !important;
white-space: nowrap !important;
}
/* Variantes status couleurs (mappees aux classes contrast PS) */
.order-status-label.dark {
background: rgba(212, 0, 18, 0.10) !important;
color: var(--brand) !important;
}
/* ================================================
DETAIL COMMANDE : masquer les blocs PS natifs
non designes sur mobile (repetition non stylee)
================================================ */
.order-items.hidden-md-up,
.order-totals.hidden-md-up {
display: none !important;
}
/* Pour la table desktop : la garder visible meme sur mobile
(le style est responsive et acceptable, vs les divs PS bruts) */
#order-products.hidden-sm-down {
display: table !important;
}
/* ================================================
RECHERCHE : overlay modal + suggestions live
================================================ */
.proparo-search-overlay {
position: fixed;
inset: 0;
background: rgba(20, 20, 18, 0.55);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
z-index: 9999;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 80px 20px 20px;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.proparo-search-overlay.is-open {
opacity: 1;
visibility: visible;
}
.proparo-search-panel {
background: #ffffff;
border-radius: 12px;
width: min(720px, 100%);
max-height: 80vh;
overflow-y: auto;
padding: 28px 28px 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.30);
position: relative;
transform: translateY(-16px);
transition: transform 0.25s ease;
}
.proparo-search-overlay.is-open .proparo-search-panel {
transform: translateY(0);
}
.proparo-search-close {
position: absolute;
top: 14px;
right: 14px;
width: 40px;
height: 40px;
border: 0;
background: #f5f1ec;
cursor: pointer;
color: #141412;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s, transform 0.15s;
}
.proparo-search-close:hover {
background: #D40012;
color: #ffffff;
transform: rotate(90deg);
}
.proparo-search-form {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
border: 1.5px solid #eae5df;
border-radius: 10px;
transition: border-color 0.15s;
margin-top: 4px;
background: #ffffff;
}
.proparo-search-form:focus-within {
border-color: #D40012;
}
.proparo-search-icon {
color: #76746e;
flex-shrink: 0;
}
#proparo-search-input {
flex: 1;
border: 0;
outline: 0 !important;
box-shadow: none !important;
background: transparent;
font-family: 'DM Sans', Arial, sans-serif;
font-size: 16px;
color: #141412;
min-width: 0;
padding: 6px 0;
-webkit-appearance: none;
appearance: none;
}
#proparo-search-input:focus {
outline: 0 !important;
box-shadow: none !important;
border: 0 !important;
}
#proparo-search-input::placeholder {
color: #9c9892;
}
.proparo-search-submit {
display: inline-flex;
align-items: center;
padding: 9px 18px;
background: #D40012;
color: #ffffff;
border: 0;
border-radius: 999px;
font-family: 'DM Sans', Arial, sans-serif;
font-weight: 600;
font-size: 13px;
cursor: pointer;
transition: background 0.15s;
flex-shrink: 0;
}
.proparo-search-submit:hover {
background: #b8000f;
}
.proparo-search-results {
margin-top: 12px;
}
.proparo-search-result-item {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 8px;
border-radius: 6px;
text-decoration: none;
color: #141412;
transition: background 0.15s;
}
.proparo-search-result-item:hover,
.proparo-search-result-item:focus {
background: #faf7f3;
color: #141412;
}
.proparo-search-result-img {
width: 50px;
height: 50px;
flex-shrink: 0;
border-radius: 4px;
object-fit: contain;
background: #faf7f3;
}
.proparo-search-result-info {
flex: 1;
min-width: 0;
}
.proparo-search-result-name {
font-family: 'DM Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 600;
color: #141412;
margin: 0 0 2px;
line-height: 1.3;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.proparo-search-result-price {
font-family: 'DM Sans', Arial, sans-serif;
font-size: 13px;
color: #D40012;
font-weight: 700;
}
.proparo-search-see-all {
display: block;
text-align: center;
padding: 14px;
color: #D40012;
font-family: 'DM Sans', Arial, sans-serif;
font-weight: 600;
font-size: 14px;
text-decoration: none;
border-top: 1px solid #eae5df;
margin-top: 12px;
transition: background 0.15s;
}
.proparo-search-see-all:hover {
background: #fef0f1;
color: #D40012;
}
.proparo-search-empty {
text-align: center;
padding: 32px 16px;
color: #76746e;
font-family: 'DM Sans', Arial, sans-serif;
font-size: 14px;
}
.proparo-search-hint {
margin-top: 14px;
text-align: center;
font-family: 'DM Sans', Arial, sans-serif;
font-size: 12px;
color: #9c9892;
}
@media (max-width: 600px) {
.proparo-search-overlay {
padding: 0;
}
.proparo-search-panel {
width: 100%;
height: 100vh;
max-height: 100vh;
border-radius: 0;
padding: 60px 18px 18px;
}
.proparo-search-form {
flex-wrap: wrap;
padding: 8px 14px;
}
.proparo-search-submit {
width: 100%;
justify-content: center;
margin-top: 6px;
}
.proparo-search-close {
top: 14px;
right: 14px;
}
}
/* Formulaire Securite (email + mot de passe actuel + nouveau mot de passe) */
.proparo-security-form .security-section{
padding:20px 0 28px;
border-bottom:1px solid var(--border);
}
.proparo-security-form .security-section:last-of-type{border-bottom:none;padding-bottom:16px;}
.proparo-security-form .security-section-title{
font-family:var(--font-d);font-size:15px;font-weight:700;
color:var(--ink);margin:0 0 4px;letter-spacing:-.01em;
}
.proparo-security-form .security-section-hint{
font-size:13px;color:var(--ink-mute);margin:0 0 20px;line-height:1.55;
}
.proparo-security-form .security-field-hint{
font-size:12px;color:var(--ink-mute);margin:-8px 0 0;line-height:1.45;
}
.proparo-security-form .form-footer{margin-top:24px;border:none;padding:0;}
/* Details de commande : neutralise le double-encart .order-info-block dans .account-card */
/* Espace respiratoire entre le header de carte et le premier bloc d'infos */
.account-card-body #order-infos{display:flex;flex-direction:column;gap:16px;margin:8px 0 28px;}
.account-card-body .order-info-block{
background:var(--canvas-warm);
border:1px solid var(--border);
border-radius:var(--r-lg);
box-shadow:none;
padding:18px 22px;
}
.account-card-body .order-info-block + .order-info-block{margin-top:16px;}
.account-card-body .order-info-block ul{margin:0;padding:0;list-style:none;}
.account-card-body .order-info-block ul li{padding:6px 0;font-size:14px;color:var(--ink-mid);border:none;}
.account-card-body .order-info-block ul li strong{display:inline-block;min-width:160px;font-weight:600;color:var(--ink);}
.account-card-body .order-section-title{
font-family:var(--font-d);font-size:16px;font-weight:700;color:var(--ink);
margin:0 0 14px;letter-spacing:-.01em;
}
.account-card-body .order-invoice-link{
display:inline-flex;align-items:center;gap:6px;
color:var(--brand);font-weight:600;text-decoration:none;
}
.account-card-body .order-invoice-link:hover{text-decoration:underline;}
.account-card-body .addresses{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0;}
.account-card-body .addresses .address-col{min-width:0;}
.account-card-body #order-history{margin-top:24px;}
@media(max-width:768px){
.account-card-body .addresses{grid-template-columns:1fr;}
.account-card-body .order-info-block ul li strong{min-width:auto;display:block;margin-bottom:2px;}
}
/* === PASSWORD RECOVERY (demande + confirmation) === */
#password .page-content.card,
#password .page-content.card-block{
background:#fff;border:1px solid var(--border);border-radius:20px;
padding:40px 36px;box-shadow:0 2px 16px rgba(0,0,0,0.04);
margin-top:40px;
}
#password .page-header{margin-bottom:24px;text-align:center;}
#password .page-header h1{
font-family:var(--font-d);font-size:26px;font-weight:700;color:var(--ink);
letter-spacing:-.02em;margin:0;
}
#password .forgotten-password header{margin-bottom:24px;}
#password .send-renew-password-link{
font-size:14px;color:var(--ink-mute);line-height:1.6;margin:0;text-align:center;
}
#password .forgotten-password .form-fields{margin-top:8px;}
#password .forgotten-password .form-group{margin-bottom:18px;}
#password .forgotten-password .form-control-label{
display:block;font-size:12px;font-weight:600;color:var(--ink-mute);
text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;
}
#password .forgotten-password .form-control{
width:100%;height:52px;padding:0 16px;
font-size:15px;border:1.5px solid var(--border);border-radius:12px;
background:var(--canvas);color:var(--ink);font-family:var(--font-b);
transition:border-color .15s,box-shadow .15s;
}
#password .forgotten-password .form-control:focus{
outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(212,0,18,.08);
}
#password .forgotten-password .email{margin-bottom:8px;}
#password #send-reset-link{
display:flex;align-items:center;justify-content:center;gap:8px;
width:100%;height:52px;background:var(--brand);color:#fff;
font-size:15px;font-weight:700;border:none;border-radius:var(--r-pill);
cursor:pointer;transition:all .2s;box-shadow:0 2px 8px rgba(212,0,18,.2);
font-family:var(--font-b);margin-top:8px;
}
#password #send-reset-link:hover{
background:var(--brand-dk);transform:translateY(-1px);
box-shadow:0 4px 14px rgba(212,0,18,.3);
}
/* Alerts sur pages password */
#password .ps-alert-success,
#password .ps-alert-error{
list-style:none;padding:0;margin:0 0 24px;
}
#password .ps-alert-success:empty,
#password .ps-alert-error:empty{margin:0;}
#password .ps-alert-success .item,
#password .ps-alert-error .item{
display:flex;align-items:flex-start;gap:12px;
padding:16px 18px;border-radius:12px;
font-size:14px;line-height:1.5;
}
#password .ps-alert-success .item{
background:#EEF9F2;color:#1B6E2E;border:1px solid #B8E0C4;
}
#password .ps-alert-error .item{
background:#FEF2F2;color:#B91C1C;border:1px solid #FECACA;
}
#password .ps-alert-success .item i,
#password .ps-alert-error .item i{
flex-shrink:0;width:22px;height:22px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
}
#password .ps-alert-success .item i{background:#1B9E3E;}
#password .ps-alert-error .item i{background:#D40012;}
#password .ps-alert-success .item i svg,
#password .ps-alert-error .item i svg{width:14px;height:14px;}
#password .ps-alert-success .item p,
#password .ps-alert-error .item p{margin:0;}
/* Footer (Retour à la connexion) */
#password .page-footer{
margin-top:28px;padding-top:24px;border-top:1px solid var(--border);
text-align:center;
}
#password .page-footer ul{list-style:none;padding:0;margin:0;}
#password .page-footer ul li{display:inline-block;}
#password .page-footer a,
#password #back-to-login.account-link{
display:inline-flex;align-items:center;gap:6px;
font-size:13px;font-weight:600;color:var(--ink-mute);
text-decoration:none;transition:color .15s;
}
#password .page-footer a:hover,
#password #back-to-login.account-link:hover{color:var(--brand);}
#password #back-to-login.account-link svg{stroke:currentColor;}
@media(max-width:640px){
#password .page-content.card,
#password .page-content.card-block{padding:28px 22px;margin-top:24px;}
#password .page-header h1{font-size:22px;}
}
/* Forms on all account pages */
#identity .field,
#address .field,
#authentication .field,
#registration .field,
#password .field {
margin-bottom: 14px;
/* Le markup PS est puis