html{-webkit-text-size-adjust:100%}
:root{
  --marine:#1D3A63; --marine-fonce:#12253F; --marine-clair:#2C4E82;
  --acier:#6E7681; --acier-clair:#9AA1AB;
  --fond:#EEF1F5; --blanc:#FFFFFF; --filet:#D7DCE3;
  --stock:#1E7A4E; --stock-bg:#E4F2EA;
  --preco:#A2660B; --preco-bg:#FBF0DC;
  --encre:#1A2331;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:var(--fond);color:var(--encre);font-size:15px;line-height:1.6}
h1,h2,h3,.font-display{font-family:'Archivo',sans-serif}
a{color:inherit;text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Archivo',sans-serif;font-weight:600;font-size:14px;letter-spacing:.02em;padding:12px 24px;border:1.5px solid var(--marine);cursor:pointer;transition:background .15s,color .15s}
.btn-plein{background:var(--marine);color:#fff}
.btn-plein:hover{background:var(--marine-clair);border-color:var(--marine-clair)}
.btn-ligne{background:transparent;color:var(--marine)}
.btn-ligne:hover{background:var(--marine);color:#fff}
.btn:focus-visible{outline:3px solid var(--marine-clair);outline-offset:2px}
.badge{display:inline-block;font-family:'Archivo',sans-serif;font-weight:600;font-size:12px;padding:3px 9px;letter-spacing:.02em}
.badge-stock{background:var(--stock-bg);color:var(--stock)}
.badge-preco{background:var(--preco-bg);color:var(--preco)}
.topbar{background:var(--marine-fonce);color:#fff;font-size:12.5px}
.topbar-in{max-width:1160px;margin:0 auto;padding:7px 24px;display:flex;justify-content:space-between;align-items:center}
.langues{display:flex;gap:2px}
.langues a{padding:3px 9px;color:#B9C4D4;font-family:'Archivo',sans-serif;font-weight:600;font-size:12px}
.langues a.actif{background:var(--marine);color:#fff}
.langues a:hover{color:#fff}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th{font-family:'Archivo',sans-serif;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--acier);text-align:left;padding:10px 12px;border-bottom:2px solid var(--marine)}
td{padding:11px 12px;border-bottom:1px solid var(--filet);vertical-align:middle}
tr:hover td{background:#F6F8FB}
.mono-chf{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---- Public ---- */
header.site{background:var(--blanc);border-bottom:1px solid var(--filet)}
.site-in{max-width:1160px;margin:0 auto;padding:14px 24px;display:flex;justify-content:space-between;align-items:center}
.site-in img{height:52px;display:block}
.site-in nav{display:flex;gap:12px;align-items:center}
.hero{background:var(--blanc)}
.hero-in{max-width:1160px;margin:0 auto;padding:72px 24px 64px;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hero h1{font-size:44px;font-weight:800;line-height:1.12;color:var(--marine);letter-spacing:-.01em}
.hero p.sous{font-size:17px;color:var(--acier);margin:20px 0 32px;max-width:52ch}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap}
.hero .pro{margin-top:22px;font-size:13.5px;color:var(--acier);border-left:3px solid var(--marine);padding-left:12px}
.hero-logo{display:flex;justify-content:center}
.hero-logo img{width:100%;max-width:420px}
.reperes{border-top:3px solid var(--marine);background:var(--blanc)}
.reperes-in{max-width:1160px;margin:0 auto;padding:8px 24px;display:grid;grid-template-columns:repeat(3,1fr)}
.repere{padding:30px 24px;border-right:1px solid var(--filet);text-align:center}
.repere:last-child{border-right:none}
.ico{width:56px;height:56px;border-radius:50%;background:#EAF0F8;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--marine)}
.ico svg{width:28px;height:28px}
.repere h3{font-size:16px;font-weight:700;color:var(--marine);margin-bottom:6px}
.repere p{font-size:14px;color:var(--acier)}
.etapes{max-width:1160px;margin:0 auto;padding:64px 24px}
.etapes h2{font-size:28px;font-weight:700;color:var(--marine);margin-bottom:36px;text-align:center}
.etapes-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.etape{text-align:center}
.etape .ico{background:var(--blanc);border:1.5px solid var(--filet)}
.etape h3{font-size:16px;font-weight:700;margin-bottom:6px}
.etape p{font-size:14px;color:var(--acier)}
.marques{background:var(--blanc);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.marques-in{max-width:1160px;margin:0 auto;padding:44px 24px;text-align:center}
.marques h2{font-size:22px;font-weight:700;color:var(--marine);margin-bottom:6px}
.marques p.sous{font-size:14px;color:var(--acier);margin-bottom:28px}
.marques-grille{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.marque-tuile{width:170px;height:76px;border:1px solid var(--filet);background:var(--fond);display:flex;align-items:center;justify-content:center;font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;color:var(--acier);letter-spacing:.04em;padding:10px}
.marque-tuile img{max-width:100%;max-height:100%;object-fit:contain}
.contact-bloc{background:var(--blanc);border-top:3px solid var(--marine)}
.contact-in{max-width:1160px;margin:0 auto;padding:56px 24px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.contact-in h2{font-size:28px;font-weight:700;color:var(--marine);margin-bottom:8px}
.contact-in p.intro{font-size:14.5px;color:var(--acier);margin-bottom:24px}
.coord{border-left:1px solid var(--filet);padding-left:56px}
.coord h3{font-size:16px;font-weight:700;color:var(--marine);margin-bottom:10px}
.coord address{font-style:normal;font-size:14.5px;line-height:1.8;color:var(--acier)}
.coord address strong{color:var(--encre)}
footer{background:var(--marine-fonce);color:#B9C4D4;font-size:13px}
.footer-in{max-width:1160px;margin:0 auto;padding:28px 24px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer strong{color:#fff;font-family:'Archivo',sans-serif;font-weight:600}
footer .legal{display:flex;gap:18px;flex-wrap:wrap}
footer .legal a:hover{color:#fff;text-decoration:underline}
.flash{max-width:1160px;margin:16px auto 0;padding:12px 18px;background:#E4F2EA;color:#1E7A4E;font-size:14px;font-weight:500}

/* ---- Formulaires ---- */
.page-form{max-width:760px;margin:0 auto;padding:48px 24px 72px}
.page-form h1{font-size:32px;font-weight:800;color:var(--marine);margin-bottom:10px}
.page-form p.intro{font-size:15px;color:var(--acier);margin-bottom:28px;max-width:60ch}
.selecteur{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:32px}
.selecteur.trois{grid-template-columns:repeat(3,1fr)}
[hidden]{display:none!important}
.sel{border:1.5px solid var(--filet);background:var(--blanc);padding:18px;cursor:pointer;text-align:left;font-family:'Inter',sans-serif}
.sel .lib{font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;color:var(--encre)}
.sel .sous{font-size:13px;color:var(--acier);margin-top:3px}
.sel.actif{border-color:var(--marine);background:#F0F4FA}
.sel.actif .lib{color:var(--marine)}
.section{background:var(--blanc);border:1px solid var(--filet);border-top:3px solid var(--marine);padding:24px 28px;margin-bottom:24px}
.section h2{font-size:17px;font-weight:700;color:var(--marine);margin-bottom:18px}
.champ{margin-bottom:16px}
.champ label{display:block;font-family:'Archivo',sans-serif;font-weight:600;font-size:13px;color:var(--marine);margin-bottom:5px}
.champ .aide{font-size:12.5px;color:var(--acier);margin-top:5px}
.champ input,.champ textarea,.champ select{width:100%;font-family:'Inter',sans-serif;font-size:14px;padding:10px 12px;border:1.5px solid var(--filet);background:var(--blanc);color:var(--encre)}
.champ input:focus,.champ textarea:focus,.champ select:focus{outline:none;border-color:var(--marine)}
.champ textarea{min-height:90px;resize:vertical}
.deux-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.radios{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.radio{border:1.5px solid var(--filet);padding:14px;cursor:pointer;text-align:center;position:relative}
.radio input{position:absolute;opacity:0}
.radio .lib{font-family:'Archivo',sans-serif;font-weight:600;font-size:13.5px;color:var(--encre)}
.radio .sous{font-size:12px;color:var(--acier);margin-top:2px}
.radio:has(input:checked){border-color:var(--marine);background:#F0F4FA}
.radio:has(input:checked) .lib{color:var(--marine)}
.envoi-final .note{font-size:13px;color:var(--acier);border-left:3px solid var(--marine);padding-left:12px;margin-bottom:18px}
.mode-compte{display:none}
body.compte .mode-compte{display:block}
body.compte .mode-question{display:none}
.err{background:#FDECEC;color:#A3282D;padding:12px 18px;font-size:14px;margin-bottom:20px}

/* ---- Espace client ---- */
.appbar{background:var(--marine-fonce);color:#fff}
.appbar-in{max-width:1220px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:12px 24px;gap:16px;flex-wrap:wrap}
.appbar .marque-nom{font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;letter-spacing:.03em;color:#fff}
.appbar .marque-nom span{color:#8FA5C4;font-weight:500}
.appbar nav{display:flex;gap:4px}
.appbar nav a{font-family:'Archivo',sans-serif;font-weight:600;font-size:13.5px;color:#B9C4D4;padding:8px 14px;border-bottom:3px solid transparent}
.appbar nav a.actif{color:#fff;border-bottom-color:#fff}
.appbar nav a:hover{color:#fff}
.appbar .compte{font-size:13px;color:#B9C4D4;display:flex;gap:12px;align-items:center}
.appbar .compte a{color:#B9C4D4}
.appbar .compte a:hover{color:#fff}
.page-client{max-width:1220px;margin:0 auto;padding:28px 24px;display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:start}
.page-client.pleine{grid-template-columns:1fr}
.titre-rub{font-family:'Archivo',sans-serif;font-size:20px;font-weight:700;color:var(--marine);margin-bottom:4px}
.sous-rub{font-size:13px;color:var(--acier);margin-bottom:14px}
.filtres{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.filtre{font-family:'Archivo',sans-serif;font-weight:600;font-size:12.5px;padding:7px 14px;border:1.5px solid var(--filet);background:var(--blanc);color:var(--acier);cursor:pointer;text-decoration:none;display:inline-block}
.filtre.actif{border-color:var(--marine);background:var(--marine);color:#fff}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.produit{background:var(--blanc);border:1px solid var(--filet);padding:14px;display:flex;flex-direction:column}
.produit-corps{display:flex;flex-direction:column;flex:1;min-width:0}
.produit h3 a{color:var(--encre)}
.produit h3 a:hover{color:var(--marine);text-decoration:underline}
.produit a.visuel{text-decoration:none}
.deja{color:var(--preco);font-size:12px;font-weight:700;margin-top:2px}
.vues{margin-left:auto;display:flex;gap:6px}
.liste{display:flex;flex-direction:column;gap:10px}
.liste .produit{flex-direction:row;align-items:center;gap:16px}
.liste .produit .visuel{width:92px;height:66px;margin:0;flex-shrink:0}
.liste .produit-corps{flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap}
.liste .produit .badge{align-self:center!important}
.liste .produit h3{margin:0;min-width:160px}
.liste .produit .meta{margin:0}
.liste .produit .desc{display:none}
.liste .produit .sortie,.liste .produit .deja{margin:0;white-space:nowrap}
.liste .produit .prix{margin:0}
.liste .produit form{margin:0 0 0 auto}
.retour{display:inline-block;font-family:'Archivo',sans-serif;font-weight:600;font-size:13px;color:var(--acier);margin-bottom:14px}
.retour:hover{color:var(--marine)}
.fiche{background:var(--blanc);border:1px solid var(--filet);display:grid;grid-template-columns:340px 1fr;gap:28px;padding:24px}
.fiche-visuel{background:var(--fond);min-height:280px;display:flex;align-items:center;justify-content:center;color:var(--acier-clair);overflow:hidden}
.fiche-visuel img{max-width:100%;max-height:360px;object-fit:contain}
.fiche-infos h1{font-family:'Archivo',sans-serif;font-size:24px;font-weight:700;color:var(--marine);margin:10px 0 6px}
.fiche-infos .meta{font-size:13.5px;color:var(--acier);margin-bottom:8px}
.fiche-infos .prix{font-family:'Archivo',sans-serif;font-weight:700;font-size:24px;color:var(--marine);margin:14px 0}
.fiche-infos .prix small{font-family:'Inter',sans-serif;font-weight:400;font-size:12.5px;color:var(--acier)}
.fiche-ajout{display:flex;gap:10px;max-width:320px;margin-bottom:18px}
.fiche-ajout input[type=number]{width:80px;font-size:14px;padding:10px;border:1.5px solid var(--filet)}
.fiche-desc{font-size:14.5px;line-height:1.75;color:var(--encre);border-top:1px solid var(--filet);padding-top:16px;max-width:62ch}
.produit .visuel{height:130px;background:var(--fond);display:flex;align-items:center;justify-content:center;color:var(--acier-clair);font-size:12px;margin-bottom:10px;overflow:hidden}
.produit .visuel img{max-width:100%;max-height:100%;object-fit:contain}
.produit h3{font-size:14.5px;font-weight:600;margin:6px 0 2px}
.produit .meta{font-size:12.5px;color:var(--acier);margin-bottom:4px}
.produit .desc{font-size:12.5px;color:var(--acier);margin-bottom:6px}
.produit .prix{font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;color:var(--marine);margin:6px 0 10px}
.produit .prix small{font-family:'Inter',sans-serif;font-weight:400;font-size:11.5px;color:var(--acier)}
.produit .pvc{font-family:'Inter',sans-serif;font-weight:400;font-size:11.5px;color:var(--acier);margin-top:2px}
.produit .sortie{color:var(--preco);font-size:12px;font-weight:600}
.produit form{margin-top:auto;display:flex;gap:8px}
.produit input[type=number]{width:64px;font-family:'Inter',sans-serif;font-size:13px;padding:8px;border:1.5px solid var(--filet)}
.btn-prod{flex:1;font-family:'Archivo',sans-serif;font-weight:600;font-size:13px;padding:9px;border:1.5px solid var(--marine);background:var(--marine);color:#fff;cursor:pointer}
.btn-prod.ligne{background:transparent;color:var(--marine)}
.btn-prod:hover{background:var(--marine-clair);border-color:var(--marine-clair);color:#fff}
.panier{background:var(--blanc);border:1px solid var(--filet);border-top:3px solid var(--marine);position:sticky;top:20px}
.panier h2{font-size:15px;font-weight:700;color:var(--marine);padding:14px 16px;border-bottom:1px solid var(--filet)}
.envoi{padding:12px 16px;border-bottom:1px solid var(--filet)}
.envoi .titre{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.envoi .titre span:last-child{font-size:11.5px;color:var(--acier)}
.lig{display:flex;justify-content:space-between;font-size:13px;color:var(--acier);padding:3px 0;gap:8px}
.lig b{color:var(--encre);font-weight:500}
.lig a.suppr{color:#A3282D;font-size:12px}
.scission{padding:10px 16px;background:var(--fond);font-size:12px;color:var(--acier);border-bottom:1px solid var(--filet)}
.franco{padding:12px 16px;border-bottom:1px solid var(--filet)}
.franco .txt{font-size:12.5px;color:var(--marine);font-weight:600;margin-bottom:7px}
.franco .txt.ok{color:var(--stock)}
.jauge{height:6px;background:var(--fond);position:relative;margin-bottom:8px}
.jauge i{position:absolute;left:0;top:0;bottom:0;background:var(--marine)}
.totaux{padding:12px 16px}
.totaux .lig.total{font-family:'Archivo',sans-serif;font-size:16px;font-weight:700;color:var(--marine);border-top:2px solid var(--marine);margin-top:8px;padding-top:10px}
.totaux .tva{font-size:11.5px;color:var(--acier);margin-top:6px}
.btn-cmd{display:block;width:calc(100% - 32px);margin:4px 16px 16px;font-family:'Archivo',sans-serif;font-weight:600;font-size:14px;padding:12px;border:1.5px solid var(--marine);background:var(--marine);color:#fff;cursor:pointer;text-align:center;text-decoration:none}
.btn-cmd:hover{background:var(--marine-clair)}
.bloc-table{background:var(--blanc);border:1px solid var(--filet)}
.bloc-table h2{font-size:15px;font-weight:700;color:var(--marine);padding:14px 18px;border-bottom:1px solid var(--filet)}
.badge-exp{background:#E3EBF6;color:var(--marine)}

/* ---- BO admin ---- */
.coque{display:flex;min-height:calc(100vh - 54px)}
aside.admin{width:216px;flex-shrink:0;background:var(--blanc);border-right:1px solid var(--filet);padding:18px 12px}
aside.admin a{display:block;font-family:'Archivo',sans-serif;font-weight:600;font-size:13.5px;color:var(--acier);padding:10px 12px;margin-bottom:2px;border-left:3px solid transparent}
aside.admin a.actif{color:var(--marine);border-left-color:var(--marine);background:var(--fond)}
aside.admin a:hover{color:var(--marine)}
aside.admin .pastille{float:right;background:var(--preco-bg);color:var(--preco);font-size:11px;padding:1px 7px;font-weight:700}
main.admin{flex:1;min-width:0;padding:28px 32px}
main.admin h1{font-family:'Archivo',sans-serif;font-size:22px;font-weight:700;color:var(--marine);margin-bottom:20px}
.cartes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:32px}
.carte{background:var(--blanc);border:1px solid var(--filet);border-top:3px solid var(--marine);padding:16px 18px}
.carte .lib{font-size:12.5px;color:var(--acier);margin-bottom:4px}
.carte .val{font-family:'Archivo',sans-serif;font-size:26px;font-weight:700;color:var(--marine)}
.bloc{background:var(--blanc);border:1px solid var(--filet);margin-bottom:28px}
.bloc-tete{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--filet);gap:12px;flex-wrap:wrap}
.bloc-tete h2{font-size:15px;font-weight:700;color:var(--marine)}
.bloc-tete .note{font-size:12.5px;color:var(--acier)}
.btn-mini{font-family:'Archivo',sans-serif;font-weight:600;font-size:12.5px;padding:7px 13px;border:1.5px solid var(--marine);background:transparent;color:var(--marine);cursor:pointer;text-decoration:none;display:inline-block}
.btn-mini.plein{background:var(--marine);color:#fff}
.btn-mini.danger{border-color:#A3282D;color:#A3282D}
.btn-mini:hover{background:var(--marine-clair);border-color:var(--marine-clair);color:#fff}
.actions-cell{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.sortie{color:var(--preco);font-size:12.5px;white-space:nowrap}
.form-admin{padding:18px}
@media(max-width:960px){.page-client{grid-template-columns:1fr}.panier{position:static}.coque{flex-direction:column}aside.admin{width:100%;display:flex;flex-wrap:wrap;padding:8px}aside.admin a{border-left:none}.cartes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.hero-in{grid-template-columns:1fr}.hero-logo{order:-1}.hero-logo img{max-width:280px}.reperes-in,.etapes-grille{grid-template-columns:1fr}.repere{border-right:none;border-bottom:1px solid var(--filet)}.hero h1{font-size:32px}.contact-in{grid-template-columns:1fr;gap:32px}.coord{border-left:none;padding-left:0}.deux-col,.radios,.selecteur,.selecteur.trois{grid-template-columns:1fr}}


/* ---- Mobile (iOS / Android) ---- */
@media(max-width:700px){
  /* iOS zoome sur les champs < 16px : on force 16px au focus tactile */
  .champ input,.champ select,.champ textarea,
  .produit input[type=number],.form-admin input,.form-admin select,.form-admin textarea{font-size:16px}
  /* Tableaux larges : défilement horizontal au doigt au lieu d'un écrasement */
  .bloc-table,.bloc{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .bloc-table table,.bloc table{min-width:640px}
  /* Barres de navigation */
  .appbar-in{padding:10px 14px}
  .appbar nav{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .appbar .compte{flex-wrap:wrap}
  .site-in{padding:10px 14px;flex-wrap:wrap;gap:10px}
  .site-in img{height:42px}
  .site-in nav{flex-wrap:wrap;gap:8px}
  /* Espacements resserrés */
  .page-client,.page-form{padding:20px 14px 48px}
  main.admin{padding:20px 14px}
  .section{padding:18px 16px}
  .hero-in{padding:44px 16px 40px}
  .etapes{padding:44px 16px}
  .marques-in,.contact-in{padding:36px 16px}
  .footer-in{flex-direction:column;gap:10px;text-align:center}
  footer .legal{justify-content:center}
  /* Cibles tactiles confortables */
  .btn,.btn-cmd,.btn-prod{padding-top:13px;padding-bottom:13px}
  .filtre{padding:9px 14px}
  .produit form{flex-wrap:wrap}
  .produit input[type=number]{width:76px}
  .grille{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
  .produit .visuel{height:110px}
  .cartes{grid-template-columns:1fr 1fr;gap:10px}
  .actions-cell{justify-content:flex-start}
}
@media(max-width:420px){
  .grille{grid-template-columns:1fr 1fr}
  .hero h1{font-size:27px}
  .cartes{grid-template-columns:1fr}
}

@media(max-width:860px){
  .fiche{grid-template-columns:1fr;padding:16px}
  .liste .produit-corps{flex-direction:column;align-items:flex-start;gap:4px}
  .liste .produit form{margin:8px 0 0}
}