/* Layout : site vitrine mobile d'abord, en-tête fixe, blocs pleine largeur alternant encre / clair / sable, contenu centré à 72rem. */
:root{
  --or:#C9A961; --or-fort:#9A7B36; --banco:#A0522D; --encre:#1A1A2E; --sable:#EFE6D5;
  --bg:#FBF8F2; --surface:#FFFFFF; --sable-bg:#EFE6D5; --fg:#1A1A2E; --muted:#5B5866; --line:#DDD3C0;
  --hero-bg:#1A1A2E; --hero-fg:#F6F1E7; --hero-muted:#B9B4C4; --hero-line:#34344F;
  --accent-txt:#8A6A2C; --banco-txt:#A0522D;
  --f-display:"Fraunces", Georgia, "Times New Roman", serif;
  --f-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --w:72rem; --r:6px;
}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.12;text-wrap:balance;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,6vw,3.6rem)}
h2{font-size:clamp(1.6rem,4vw,2.3rem)}
h3{font-size:1.25rem}
p{margin:0;max-width:65ch}
a{color:inherit}
:focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--w);margin:0 auto;padding-inline:clamp(16px,4vw,32px)}
.band{padding-block:clamp(3rem,8vw,5.5rem)}
.band.sable{background:var(--sable-bg)}
.band.dark{background:var(--hero-bg);color:var(--hero-fg)}
.stack{display:flex;flex-direction:column;gap:1.25rem}
.eyebrow{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-txt)}
.dark .eyebrow{color:var(--or)}
.lead{font-size:1.15rem;color:var(--muted)}
.dark .lead{color:var(--hero-muted)}
.smallcaps{font-family:var(--f-body);font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}


/* En-tête */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--hero-bg);color:var(--hero-fg);border-bottom:1px solid var(--hero-line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;background:none;border:0;color:inherit;cursor:pointer;padding:0}
.brand svg{width:30px;height:36px;flex:none}
.wordmark{font-family:var(--f-display);font-weight:700;font-size:1.3rem;letter-spacing:.02em;line-height:1}
.wordmark em{font-style:normal;color:var(--or)}
.nav{display:flex;gap:.25rem;flex-wrap:wrap}
.nav a{font-size:.88rem;text-decoration:none;color:var(--hero-muted);padding:.45rem .7rem;border-radius:4px}
.nav a:hover{color:var(--hero-fg)}
.nav a[aria-current="page"]{color:var(--or);box-shadow:inset 0 -2px 0 var(--or)}
.menu-btn{display:none;background:none;border:1px solid var(--hero-line);color:var(--hero-fg);border-radius:4px;padding:.45rem .7rem;font:500 .85rem var(--f-body);cursor:pointer}
@media (max-width:860px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--hero-bg);flex-direction:column;padding:.5rem clamp(16px,4vw,32px) 1rem;border-bottom:1px solid var(--hero-line)}
  .nav.open{display:flex}
  .nav a{padding:.75rem .25rem;font-size:1rem}
  .nav a[aria-current="page"]{box-shadow:none}
}

/* Boutons */
.btns{display:flex;flex-wrap:wrap;gap:.75rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;font:600 .95rem var(--f-body);padding:.8rem 1.3rem;border-radius:4px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:transform .15s, background .15s}
.btn.gold{background:var(--or);color:#1A1A2E}
.btn.gold:hover{background:#D8BC7C}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
.btn.ghost:hover{background:color-mix(in srgb, currentColor 8%, transparent)}
.btn:active{transform:translateY(1px)}

/* Héros */
.hero{background:var(--hero-bg);color:var(--hero-fg);position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2rem;align-items:center;padding-block:clamp(3rem,9vw,6.5rem)}
.hero .mark{justify-self:center;width:min(100%,300px)}
.hero .mark svg{width:100%;height:auto}
.baseline{font-family:var(--f-body);font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:.78rem;color:var(--or)}
.big-word{font-size:clamp(3rem,11vw,6rem);letter-spacing:.01em;line-height:.95}
.big-word em{font-style:normal;color:var(--or)}
.underline-or{display:block;width:5.5rem;height:3px;background:var(--or);margin-top:.9rem}
@media (max-width:760px){.hero .wrap{grid-template-columns:1fr}.hero .mark{order:-1;width:140px;justify-self:start}}
/* Motif torons, discret */
.hero::after{content:"";position:absolute;right:0;bottom:0;width:40%;height:10px;background:repeating-linear-gradient(90deg,var(--banco) 0 18px,transparent 18px 44px);opacity:.55}

/* Cartes produits */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1.25rem}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;display:flex;flex-direction:column;gap:1rem;min-width:0}
.pcard .logo{height:56px;display:flex;align-items:center;gap:.75rem}
.pcard .logo svg{height:52px;width:auto;flex:none}
.pcard .num{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;color:var(--muted)}
.pcard p{color:var(--muted)}
.pcard .go{margin-top:auto;font-weight:600;font-size:.92rem;color:var(--accent-txt);text-decoration:none;display:inline-flex;gap:.4rem;align-items:center}
.pcard .go:hover{text-decoration:underline;text-underline-offset:4px}
.status{display:inline-block;font-family:var(--f-mono);font-size:.72rem;padding:.2rem .55rem;border-radius:99px;border:1px solid var(--line);color:var(--muted);width:fit-content}
.status.live{border-color:#2C6E7F;color:#2C6E7F}

/* Principes */
.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:2rem}
.principle{display:flex;flex-direction:column;gap:.6rem;padding-top:1rem;border-top:2px solid var(--banco)}
.principle p{color:var(--muted)}

/* Bandeau confiance */
.trust{display:flex;flex-wrap:wrap;gap:1rem}
.trust span{flex:1 1 9rem;height:4rem;border:1px dashed var(--line);border-radius:var(--r);display:grid;place-items:center;font-family:var(--f-mono);font-size:.72rem;color:var(--muted)}

/* Tableaux */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:40rem;font-size:.93rem}
th,td{text-align:left;vertical-align:top;padding:.9rem 1rem;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
th{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;background:var(--sable-bg)}
td.name{font-family:var(--f-display);font-weight:700;font-size:1.05rem;white-space:nowrap}
td.num{font-family:var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums}

/* Page produit */
.p-hero{background:var(--hero-bg);color:var(--hero-fg)}
.p-hero .wrap{padding-block:clamp(2.5rem,7vw,5rem);display:flex;flex-direction:column;gap:1.4rem}
.p-hero .logo-lg{background:#F6F1E7;border-radius:var(--r);padding:1rem 1.25rem;width:fit-content;max-width:100%}
.p-hero .logo-lg svg{height:60px;width:auto;max-width:100%;display:block}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:2.5rem;align-items:start}
.two > *{min-width:0}
.split{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.split .hd{padding:.8rem 1rem;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase}
.split .hd.k{background:var(--hero-bg);color:var(--or)}
.split .hd.h{background:var(--banco);color:#FBF3E8}
.split .c{padding:.85rem 1rem;border-top:1px solid var(--line);font-size:.93rem}
.split .c.k{color:var(--muted);border-right:1px solid var(--line)}
@media (max-width:620px){.split{grid-template-columns:1fr}.split .c.k{border-right:0}.split .hd.h{display:none}.split .c.h{border-top:0;padding-top:0;font-weight:500}.split .c.h::before{content:"L'humain : ";color:var(--banco-txt)}}
.locks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1.25rem}
.lock{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem;display:flex;flex-direction:column;gap:.5rem}
.lock h3{font-size:1.1rem}
.lock p{color:var(--muted);font-size:.95rem}
.lock svg{width:22px;height:22px;color:var(--banco-txt)}

/* Parcours KREDO */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;counter-reset:s}
.steps li{counter-increment:s;padding:1rem .6rem 0 0;border-top:3px solid var(--line);position:relative;font-size:.9rem;font-weight:500}
.steps li::before{content:counter(s);display:block;font-family:var(--f-mono);font-size:.72rem;color:var(--accent-txt);margin-bottom:.3rem}
.steps li::after{content:"";position:absolute;top:-7px;left:0;width:11px;height:11px;border-radius:50%;background:var(--or)}
@media (max-width:860px){.steps{grid-template-columns:1fr;gap:0}.steps li{border-top:0;border-left:3px solid var(--line);padding:.2rem 0 1rem 1.2rem}.steps li::after{top:.35rem;left:-7px}}

/* Cadran STRATEX */
.dial-wrap{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:2.5rem;align-items:center}
@media (max-width:760px){.dial-wrap{grid-template-columns:1fr}.dial-wrap svg{max-width:260px}}
.mods{display:flex;flex-direction:column;gap:0}
.mod{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.mod:first-child{border-top:1px solid var(--line)}
.mod .h{font-family:var(--f-mono);font-size:.8rem;font-variant-numeric:tabular-nums}
.mod b{font-family:var(--f-display);font-size:1.1rem;display:block;margin-bottom:.15rem}
.mod p{color:var(--muted);font-size:.95rem}

/* SIKANO / SIKAVI */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:1.25rem}
.face{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.face .top-band{padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.35rem}
.face.no .top-band{background:var(--hero-bg);color:var(--hero-fg)}
.face.vi .top-band{background:var(--banco);color:#FBF3E8}
.face .top-band .smallcaps{opacity:.85}
.face dl{margin:0;padding:.5rem 1.4rem 1.4rem;display:flex;flex-direction:column}
.face dt{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:1rem}
.face dd{margin:.25rem 0 0;font-size:.95rem}
.face ul{margin:.3rem 0 0;padding-left:1.1rem}
.face li{margin-bottom:.2rem}
.price{font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--accent-txt)}

/* Contact */
form{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
form .full{grid-column:1/-1}
@media (max-width:620px){form{grid-template-columns:1fr}}
label{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;font-weight:500}
input,select,textarea{font:inherit;font-size:1rem;padding:.7rem .8rem;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--fg);width:100%}
textarea{min-height:8rem;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--or);outline-offset:0;border-color:var(--or)}
.check{flex-direction:row;align-items:flex-start;gap:.6rem;font-weight:400;color:var(--muted)}
.check input{width:auto;margin-top:.25rem;accent-color:var(--banco)}
.notice{padding:1rem;border-radius:4px;background:var(--sable-bg);border-left:3px solid var(--or);font-size:.93rem}
.info-list{display:flex;flex-direction:column;gap:0}
.info-list div{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
.info-list dt{font-family:var(--f-mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding-top:.15rem}
.info-list dd{margin:0}
@media (max-width:480px){.info-list div{grid-template-columns:1fr;gap:.2rem}}

/* Pied de page */
footer{background:var(--hero-bg);color:var(--hero-muted);font-size:.88rem}
footer .wrap{padding-block:3rem 2rem;display:flex;flex-direction:column;gap:2rem}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem}
.foot-logos{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;color:var(--hero-muted)}
.foot-logos span{font-family:var(--f-display);font-weight:700;letter-spacing:.06em;font-size:1rem}
.foot-nav{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem}
.foot-nav a{text-decoration:none}
.foot-nav a:hover{color:var(--hero-fg)}
.legal{border-top:1px solid var(--hero-line);padding-top:1.25rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.8rem}

.page{animation:in .35s ease both}
@keyframes in{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.page{animation:none}.btn{transition:none}}

/* ===== Version claire : blanc cassé, sable, beige ; l'encre ne sert plus qu'au texte et aux petits accents ===== */
:root{
  --bg:#FFFDF9; --surface:#FFFFFF; --sable-bg:#F6F0E4; --deep:#EDE3D0; --line:#E4D9C4; --muted:#5E5A66;
  --hero-bg:#F6F0E4; --hero-fg:#1A1A2E; --hero-muted:#5E5A66; --hero-line:#E4D9C4;
  --accent-txt:#8A6A2C; --banco-txt:#A0522D; color-scheme:light;
}
.top{background:#1A1A2E;color:#F6F1E7;border-bottom:1px solid #34344F}
.top .wordmark{color:#F6F1E7}
.nav a{color:#B9B4C4}
.nav a:hover{color:#F6F1E7}
.nav a[aria-current="page"]{color:#C9A961;box-shadow:inset 0 -2px 0 #C9A961}
@media (max-width:860px){.nav{background:#1A1A2E;border-bottom-color:#34344F}.nav a[aria-current="page"]{box-shadow:none}}
.menu-btn{color:#F6F1E7;border-color:#34344F}
.baseline,.dark .eyebrow{color:var(--accent-txt)}
.hero .lead[style]{color:var(--fg)!important}
/* Bandeaux sous la navigation : encre légèrement éclaircie, halo or discret, pour se détacher de la barre */
.hero,.p-hero{--fg:#F6F1E7;--muted:#C3BECE;--hero-fg:#F6F1E7;--hero-muted:#C3BECE;--accent-txt:#C9A961;--banco-txt:#E3996E;
  color:#F6F1E7;background:radial-gradient(120% 90% at 85% 10%,rgba(201,169,97,.16) 0%,rgba(201,169,97,0) 55%),#25253F;border-bottom:3px solid #A0522D}
.hero::after{opacity:.6}
.p-hero .logo-lg{background:#FFFFFF;border:1px solid var(--line)}
.band.dark{background:var(--deep);color:var(--fg)}
.dark .lead{color:var(--muted)}
.split .hd.k{background:var(--fg);color:var(--or)}
.face.no .top-band{background:var(--sable-bg);color:var(--fg);border-bottom:1px solid var(--line)}
.btn.gold{color:#1A1A2E}
.btn.ghost{color:var(--fg)}
footer{background:#1A1A2E;color:#B9B4C4;border-top:3px solid #C9A961}
footer .wordmark{color:#F6F1E7!important}
footer .smallcaps{color:#C9A961!important}
.foot-nav a:hover{color:#F6F1E7}
.foot-logos{color:#B9B4C4}
.legal{border-top-color:#34344F}
.pcard{box-shadow:0 1px 0 var(--line)}

/* Bandeaux en deux colonnes : texte à gauche, fiche d'identité de l'édition à droite */
.p-hero .wrap{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.ph-text{display:flex;flex-direction:column;gap:1.2rem;min-width:0}
.ph-text .lead{font-size:1.1rem}
.ph-panel{background:rgba(255,255,255,.045);border:1px solid rgba(201,169,97,.32);border-radius:10px;padding:1.5rem;display:flex;flex-direction:column;gap:1.1rem;min-width:0}
.ph-id{display:flex;gap:1rem;align-items:center}
.ph-id svg{width:64px;height:64px;flex:none}
.ph-name{font-family:var(--f-display);font-weight:700;font-size:1.55rem;line-height:1.1;letter-spacing:.02em}
.ph-name em{font-style:normal;color:#C9A961}
.ph-base{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#C9A961;margin-top:.3rem}
.ph-facts{margin:0;display:flex;flex-direction:column}
.ph-facts div{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:.8rem;padding:.7rem 0;border-top:1px solid rgba(255,255,255,.1);font-size:.92rem}
.ph-facts dt{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#C3BECE;padding-top:.15rem}
.ph-facts dd{margin:0;color:#F6F1E7}
.p-hero .status{border-color:rgba(255,255,255,.3);color:#E7E2EE}
.p-hero .status.live{border-color:#7CC3D3;color:#7CC3D3}
.ph-trio{gap:0;padding:.5rem 1.25rem}
.ph-trio a{display:flex;align-items:center;gap:1rem;padding:.9rem 0;text-decoration:none;border-top:1px solid rgba(255,255,255,.1);font-family:var(--f-display);font-weight:700;font-size:1.2rem;color:#F6F1E7}
.ph-trio a:first-child{border-top:0}
.ph-trio a:hover{color:#C9A961}
.ph-trio svg{width:44px;height:44px;flex:none}
.ph-trio small{display:block;font-family:var(--f-mono);font-weight:400;font-size:.7rem;color:#C3BECE;letter-spacing:.1em}
.hero-lead{font-size:1.25rem;color:#F6F1E7}
@media (max-width:860px){.p-hero .wrap{grid-template-columns:1fr}}
@media (max-width:420px){.ph-facts div{grid-template-columns:1fr;gap:.15rem}}

.legal a{color:inherit}
.legal a:hover{color:#F6F1E7}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.prose{display:flex;flex-direction:column;gap:1rem;max-width:65ch}
.prose h2{font-size:1.35rem;margin-top:1rem}

/* Bouton Espace client dans la navigation */
.nav a.nav-client{color:#C9A961;border:1px solid #C9A961;margin-left:.5rem}
.nav a.nav-client:hover{background:#C9A961;color:#1A1A2E}
@media (max-width:860px){.nav a.nav-client{margin:.5rem 0 0;text-align:center;padding:.7rem}}

/* ===== Lisibilité : police agrandie =====
   Base passée de 16 px à 18 px (17 px sur mobile) : tout ce qui est en rem grandit d'environ 12 %.
   Les petits libellés (sur-titres, badges, en-têtes de tableau) reçoivent en plus un plancher pour rester lisibles. */
html{font-size:112.5%}
@media (max-width:620px){html{font-size:106.25%}}
body{line-height:1.65}
p{max-width:68ch}

.eyebrow,.pcard .num,.status,th,.split .hd,.face dt,.info-list dt,.ph-facts dt,.ph-trio small,.steps li::before,.trust span{font-size:.8rem}
.smallcaps,.ph-base,.baseline{font-size:.76rem}
.nav a{font-size:.95rem}
.legal{font-size:.86rem}
footer{font-size:.94rem}
label{font-size:.92rem}
.lead,.ph-text .lead{font-size:1.15rem}
.hero-lead{font-size:1.3rem}
table,.split .c,.ph-facts div,.lock p,.mod p,.face dd,.info-list div,.notice{font-size:.98rem}
.steps li{font-size:.95rem}