/* Certiforga — styles partagés des maquettes (hors homepage, autonome) */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap");
@import url("/certiforga-tokens.css");

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--cf-font);font-size:var(--cf-fs-body);line-height:var(--cf-lh-body);color:var(--cf-text);background:var(--cf-surface-2);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--cf-primary-text);outline-offset:3px;border-radius:8px}
.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--cf-max-width);margin-inline:auto;padding-inline:var(--cf-gutter)}
.label{font-size:var(--cf-fs-label);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--cf-muted)}
.accent{color:var(--cf-primary-text)}
h1,h2,h3{font-weight:var(--cf-fw-medium);color:var(--cf-ink);letter-spacing:-.025em;margin:0}
.muted{color:var(--cf-muted)}
.demo-note{font-size:12px;color:var(--cf-muted)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:var(--cf-radius-pill);font-weight:500;font-size:16px;white-space:nowrap;transition:background var(--cf-dur) var(--cf-ease),box-shadow var(--cf-dur) var(--cf-ease)}
.btn .i{transition:transform var(--cf-dur) var(--cf-ease)}
.btn:hover .i.mv{transform:translateX(3px)}
.btn-sm{min-height:44px;padding:0 18px;font-size:15px}
.btn-ink{background:var(--cf-ink);color:#fff}
.btn-ink:hover{background:#0B151D;box-shadow:var(--cf-shadow-md)}
.btn-ghost{background:#fff;color:var(--cf-ink);box-shadow:inset 0 0 0 1px var(--cf-border-strong)}
.btn-ghost:hover{background:var(--cf-mint-50)}
.btn-primary{background:var(--cf-primary);color:var(--cf-ink)}
.btn-primary:hover{background:var(--cf-primary-hover)}
.btn-block{width:100%}
/* SendToQualioditButton — composant dédié, toujours cyan + icône send */
.btn-qd{background:var(--cf-cyan);color:var(--cf-ink)}
.btn-qd:hover{background:#0CA6C0}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--cf-primary-text)}
.link-arrow .i{transition:transform var(--cf-dur) var(--cf-ease)}
.link-arrow:hover .i{transform:translateX(3px)}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--cf-radius-pill);font-size:12px;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.b-docx{background:#E7F0FB;color:#1D4E89}
.b-xlsx{background:#E6F4EA;color:#1E6B3A}
.b-ind{background:var(--cf-mint-100);color:var(--cf-primary-text)}
.b-ver{background:var(--cf-surface-2);color:var(--cf-muted);box-shadow:inset 0 0 0 1px var(--cf-border)}
.b-ok{background:var(--cf-success-bg);color:var(--cf-success)}
.b-warn{background:var(--cf-warning-bg);color:var(--cf-warning)}
.b-qd{background:#E3F6FA;color:var(--cf-cyan-text)}

/* Header */
.hdr{position:sticky;top:0;z-index:50;background:rgb(247 250 249 / .8);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);transition:box-shadow var(--cf-dur)}
.hdr.scrolled{box-shadow:0 1px 0 var(--cf-border)}
.hdr .wrap{display:flex;align-items:center;gap:40px;height:76px}
.logo img{height:26px;width:auto}
.nav{display:flex;gap:30px;font-size:15px}
.nav a{position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--cf-primary);transform:scaleX(0);transform-origin:left;transition:transform var(--cf-dur) var(--cf-ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav .eco{color:var(--cf-cyan-text)}
.hdr-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.icon-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;transition:background var(--cf-dur-fast)}
.icon-btn:hover{background:var(--cf-mint-100)}
.cart-dot{position:absolute;top:6px;right:5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--cf-primary);color:var(--cf-ink);font-size:11px;font-weight:600;display:grid;place-items:center}
.menu-btn{display:none}

/* Breadcrumb */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--cf-muted);padding:20px 0 0}
.crumbs a:hover{color:var(--cf-ink)}
.crumbs span[aria-hidden]{opacity:.5}

/* File preview (ProductPreview) */
.file{position:relative;width:100%;aspect-ratio:3/4;background:#fff;border-radius:16px;padding:18px 18px 16px;display:flex;flex-direction:column;box-shadow:0 1px 0 var(--cf-border),0 18px 36px -22px rgb(19 32 43 / .25);clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%)}
.file::before{content:"";position:absolute;top:0;right:0;width:28px;height:28px;background:var(--cf-mint-100);border-bottom-left-radius:8px}
.file .brand{font-size:9px;letter-spacing:.16em;font-weight:600;color:var(--cf-ink);display:flex;align-items:center;gap:6px}
.file .brand i{width:7px;height:7px;border-radius:50%;background:var(--cf-primary)}
.file .crit{margin-top:20px;font-size:10px;letter-spacing:.12em;font-weight:600;color:var(--cf-primary-text)}
.file .ttl{margin-top:6px;font-size:17px;line-height:1.15;font-weight:500;color:var(--cf-ink);letter-spacing:-.01em}
.file .lines{margin-top:14px;display:grid;gap:6px}
.file .lines span{height:4px;border-radius:3px;background:var(--cf-surface-2)}
.file .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--cf-muted)}
.file.of .crit{color:var(--cf-muted)}

/* Cards / surfaces */
.surface{background:#fff;border-radius:var(--cf-radius-card);box-shadow:0 0 0 1px var(--cf-border)}

/* Form fields */
.field{display:grid;gap:8px}
.field label{font-size:14px;font-weight:500;color:var(--cf-ink)}
.field .hint{font-size:13px;color:var(--cf-muted)}
.input,select.input{height:52px;width:100%;padding:0 16px;border-radius:var(--cf-radius-input);border:0;background:#fff;box-shadow:inset 0 0 0 1px var(--cf-border-strong);outline:none;transition:box-shadow var(--cf-dur-fast)}
.input:focus{box-shadow:inset 0 0 0 2px var(--cf-primary-text)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--cf-text);cursor:pointer}
.check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--cf-primary-text);flex:none}

/* Footer */
.ftr{margin-top:var(--cf-section-gap);background:#fff;border-top:1px solid var(--cf-border)}
.ftr-in{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding-block:64px 36px}
.ftr-brand{grid-column:1 / span 4}
.ftr-brand img{height:24px;width:auto}
.ftr-brand p{margin:20px 0 0;color:var(--cf-muted);font-size:15px;max-width:34ch}
.ftr-col{grid-column:span 2}
.ftr-col h4{margin:0 0 16px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cf-ink)}
.ftr-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px;color:var(--cf-muted)}
.ftr-col a:hover{color:var(--cf-ink)}
.ftr-col .eco{color:var(--cf-cyan-text)}
.legal{grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:28px;border-top:1px solid var(--cf-border);font-size:13px;color:var(--cf-muted)}
.legal p{margin:0;max-width:80ch}

/* Reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity var(--cf-dur-slow) var(--cf-ease),transform var(--cf-dur-slow) var(--cf-ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

@media (max-width:1180px){.nav{gap:20px;font-size:14px}.ftr-brand{grid-column:1 / -1}.ftr-col{grid-column:span 3}}
@media (max-width:980px){.nav{display:none}.menu-btn{display:grid}}
@media (max-width:720px){
  .hdr .wrap{height:64px;gap:12px}
  .logo img{height:20px}
  .hdr-actions .hide-sm{display:none}
  .ftr-col{grid-column:span 6}
}

/* Alerte domaine — seul site officiel : qualiodit.com */
.domain-alert{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:16px;background:var(--cf-warning-bg);box-shadow:inset 0 0 0 1px #F3DDBB;font-size:14px;line-height:1.5;color:var(--cf-text);text-align:left}
.domain-alert .i{width:22px;height:22px;color:var(--cf-warning);margin-top:1px}
.domain-alert b{display:block;color:var(--cf-ink);font-weight:600;font-size:15px;margin-bottom:2px}
.domain-alert .dom{font-weight:600;color:var(--cf-ink);white-space:nowrap}
.domain-alert .bad{font-weight:600;color:var(--cf-danger);white-space:nowrap;text-decoration:line-through;text-decoration-thickness:1.5px}
dialog .domain-alert{margin-top:16px}
.domain-alert.compact{padding:10px 14px;font-size:13px;border-radius:12px}
.domain-alert.compact .i{width:18px;height:18px}