/* Atlas Steel — charte du site d origine (atlas_steel_v241.html).
   Reprise telle quelle pour la parite visuelle, en 5 blocs ;
   les blocs media=print sont restitues en @media print.
   Ne pas editer : regenerer via tools/extraire_charte_site.py */


*{margin:0;padding:0;box-sizing:border-box}
a,button,input,select,textarea{font-family:inherit}

:root{
  /* ─── Charte : les valeurs du catalogue imprimé ─────────────────
     Le logo porte le bleu #005EB5 et le gris #A7A9AF. Il ne sert pas
     de couleur d'accent : dans les neuf documents imprimés, le bleu
     du logo cohabite avec un fond marine #0B2440 et un orange #E2711D
     qui porte les repères, les filets et les chiffres clés. Le site
     reprend ces trois valeurs telles quelles, pour qu'une page écran
     et une page de brochure se ressemblent.
     L'échelle de gris est recalée sur la teinte marine, un peu bleutée,
     plutôt que sur la teinte neutre de l'ancienne version orange.
     ──────────────────────────────────────────────────────────────── */
  --navy:#0B2440;        /* aplats sombres : entête, pied, pages de garde */
  --navy-deep:#081B31;
  --navy-mid:#2C4058;
  --accent:#E2711D;      /* orange des repères, comme au catalogue */
  --accent-dk:#C25F14;
  --accent-pale:#FDF1E7;
  --logo-b:#005EB5;      /* bleu du logo */
  --logo-g:#A7A9AF;      /* gris du logo */
  --ghost:#E7EBF0;       /* chiffres fantômes */

  --ink:#0B2440; --g800:#2B3644; --g700:#44536B; --g600:#66717F;
  --g500:#7C8794; --g400:#959DA7; --g300:#BFC7D1; --g200:#DFE4EA;
  --g100:#EFF2F5; --g50:#F7F8FA;
  --page:#FFFFFF; --soft:#F7F8FA;

  --ok:#1F8A4C; --err:#C0392B;

  --disp:'Jost',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --max:1240px;
}
html{scroll-behavior:smooth}
/* ═══ SOCLE TYPOGRAPHIQUE ═══
   Une seule échelle pour tout le site, en clamp : le corps grandit avec
   l'écran, les titres beaucoup plus vite. C'est ce qui donne l'air d'un
   grand site sur un grand écran sans casser le petit. */
body{font-family:var(--body);color:var(--g800);background:var(--page);-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;line-height:1.62;font-size:clamp(15px,.42vw + 14px,16.5px);
  text-rendering:optimizeLegibility}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ─── dispositifs typographiques du catalogue ─── */
/* L'interlettrage de 0,28 em est fait pour une ligne courte. Sur un
   téléphone, l'accroche de l'accueil débordait et laissait « MAROC »
   seul sur la ligne suivante : il se resserre avec l'écran, et la ligne
   ne se coupe plus au milieu d'une locution. */
.eyebrow{font-family:var(--mono);font-size:10px;font-weight:500;text-transform:uppercase;
  letter-spacing:clamp(.14em,.9vw,.28em);color:var(--g500);text-wrap:balance}
@media(max-width:560px){.eyebrow{font-size:9px}}
.eyebrow.on-dark{color:rgba(255,255,255,.66)}
.eyebrow.orange{color:var(--accent)}
.rule{width:64px;height:1px;background:var(--g300);margin:22px 0}
.rule.on-dark{background:rgba(255,255,255,.28)}
/* Plus le titre est grand, plus il se resserre : c'est la règle qui
   sépare une composition tenue d'une page qui a juste grossi. */
/* Plus le titre est grand, plus il se resserre : c'est la règle qui
   sépare une composition tenue d'une page qui a juste grossi. */
h1,h2,h3,h4{font-family:var(--disp);color:var(--ink);font-weight:600;letter-spacing:-.018em;line-height:1.06;
  text-wrap:balance}
h1{letter-spacing:-.03em}
h3,h4{letter-spacing:-.012em}
p{text-wrap:pretty}

/* filet orange de tête, comme sur chaque page du catalogue */
.topline{position:fixed;top:0;left:0;right:0;height:3px;background:var(--accent);z-index:1002}

/* ─── barre utilitaire ─── */
.topbar{position:fixed;top:3px;left:0;right:0;z-index:1001;background:var(--navy);height:34px}
.topbar-in{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 36px}
.tb-l,.tb-r{display:flex;align-items:center;gap:7px}
.tb-i{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:rgba(255,255,255,.55);transition:color .15s;cursor:pointer;background:none;border:none}
.tb-i:hover{color:#fff}
/* Le bandeau de langue se cale sous l'en-tête fixe ; sans cela il restait
   caché derrière et ne laissait qu'une bande blanche. La hauteur qu'il
   prend est répercutée sur les pages par --lgb. */
.lg-ban{background:var(--soft);border-bottom:1px solid var(--g200);font-size:12px;color:var(--g600);padding:9px 40px 9px 26px;text-align:center;position:fixed;left:0;right:0;top:111px;z-index:999}
@media(max-width:980px){.lg-ban{top:63px}}
.lg-ban button{background:none;border:none;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);cursor:pointer;text-decoration:underline;padding:0 4px}
.lg-ban button.x{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:15px;text-decoration:none;color:var(--g400)}
/* Le sélecteur reprend exactement la fonte, la taille et la couleur des
   autres éléments du bandeau : c'est un lien parmi les autres, pas un
   bouton. Seul le chevron signale qu'il se déroule. Un select sans
   couleur explicite retomberait sur le gris par défaut du navigateur,
   illisible sur fond navy — d'où la couleur reprise à la main. */
.tb-lg{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
  background:none;border:none;color:rgba(255,255,255,.55);cursor:pointer;
  padding:0 15px 0 0;-webkit-appearance:none;appearance:none;transition:color .15s;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right center}
.tb-lg:hover{color:#fff}
.tb-lg:focus{outline:none;color:#fff}
.tb-lg option{color:#0B2440;background:#fff}
.tb-sep{color:rgba(255,255,255,.16);font-size:10px;margin:0 3px}
.tb-cta{background:var(--accent);color:#fff!important;padding:5px 15px;font-family:var(--mono);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;border:none;cursor:pointer;transition:background .15s}
.tb-cta:hover{background:var(--accent-dk)}
.tb-user{display:flex;align-items:center;gap:9px;padding:4px 11px;background:rgba(255,255,255,.09);font-family:var(--mono);font-size:10px;color:#fff;letter-spacing:.04em}
@media(max-width:980px){.topbar{display:none}}

/* ─── en-tête ─── */
.hd{position:fixed;top:37px;left:0;right:0;z-index:1000;background:#fff;border-bottom:1px solid var(--g200);transition:box-shadow .3s}
.hd.scrolled{box-shadow:0 1px 16px rgba(13,39,66,.07)}
@media(max-width:980px){.hd{top:3px}}
.hd-in{max-width:var(--max);margin:0 auto;display:flex;align-items:center;height:74px;padding:0 36px}
.hd-logo{display:flex;align-items:center;cursor:pointer;flex-shrink:0;margin-right:40px;background:none;border:none;padding:0}
.hd-logo img{height:25px;width:auto}
.hd-nav{display:flex;align-items:center;height:100%;flex:1;list-style:none}
.hd-nav>li{position:relative;height:100%}
/* LE MENU QUITTE LA CHASSE FIXE. Le mono en petites capitales espacées
   se lit lettre à lettre : c'est une écriture de cartouche, pas de
   navigation. Six entrées de gamme se balayent d'un coup d'œil quand
   elles sont en casse normale, au corps du texte. Le mono reste où il
   sert : cotes, références, intitulés de champ, fils d'Ariane. */
/* Le menu prend l'écriture de titrage du site — celle des bannières de
   gamme et des couvertures. Une barre de navigation est une table des
   matières : elle appartient aux titres, pas au texte courant. */
.hd-nav>li>button{display:flex;align-items:center;height:100%;padding:0 15px;font-family:var(--disp);
  /* Jost paraît plus gras qu'Inter à graisse égale : ses fûts sont plus
     larges et ses contreformes plus rondes. Le menu descend donc au
     romain, là où l'ancienne police demandait un demi-gras. */
  font-size:16px;font-weight:400;color:var(--g700);cursor:pointer;transition:color .15s;border:none;
  border-bottom:2px solid transparent;background:none;text-transform:none;letter-spacing:-.012em;
  white-space:nowrap}
.hd-nav>li>button:hover,.hd-nav>li:hover>button{color:var(--ink);border-bottom-color:var(--accent)}
/* Filet de séparation avant L'entreprise : les six gammes d'un côté,
   la société de l'autre. */
.hd-sep{margin-left:16px;padding-left:17px}
.hd-sep::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:15px;background:var(--g200)}
.hd-mega-s{min-width:210px;padding:14px 20px}
.hd-mega-s ul{list-style:none}
.hd-mega{display:none;position:absolute;top:100%;left:0;background:#fff;min-width:268px;box-shadow:0 16px 44px rgba(13,39,66,.12);border-top:2px solid var(--accent);padding:22px 24px;z-index:100;text-align:left}
.hd-nav>li:hover>.hd-mega{display:block}
.hd-nav>li:nth-last-child(-n+2)>.hd-mega{left:auto;right:0}
.hd-mega h4{font-family:var(--mono);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--g400);margin:16px 0 9px}
.hd-mega h4:first-child{margin-top:0}
.hd-mega ul{list-style:none}
.hd-mega li button{display:block;width:100%;text-align:left;padding:5px 0;font-size:13.5px;color:var(--g700);background:none;border:none;cursor:pointer;transition:color .12s}
.hd-mega li button:hover{color:var(--accent)}
/* Menu à deux colonnes : au-delà de trois groupes, une seule colonne
   descendrait sous la ligne de flottaison. */
/* Les accessoires ne se déplient pas dans le menu : une entrée, une
   page. Lister quatre familles de visserie sous une gamme, c'est faire
   choisir le client avant qu'il ait vu ce qu'il y a. */
.mg-acc{margin-top:17px;padding-top:13px;border-top:1px solid var(--g200)}
.mg-acc button{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;background:none;border:none;cursor:pointer;padding:0;font-family:var(--mono);font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--ink);transition:color .12s}
.mg-acc button:hover{color:var(--accent)}
.mg-acc em{font-style:normal;font-size:12px;letter-spacing:0;color:var(--accent)}
.hd-mega-2{display:grid;grid-template-columns:1fr 1fr;gap:0 42px}
.hd-mega-2 h4:first-child{margin-top:0}
.hd-mega-w{min-width:470px}
.hd-r{display:flex;align-items:center;gap:9px;margin-left:auto}
.hd-icon{width:35px;height:35px;border:1px solid var(--g200);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;position:relative;flex-shrink:0}
.hd-icon:hover{border-color:var(--ink)}
.hd-badge{position:absolute;top:-7px;right:-7px;background:var(--accent);color:#fff;font-family:var(--mono);font-size:9.5px;font-weight:700;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 5px}
/* Le trait du bouton héritait du bleu par défaut du navigateur, qui
   n'existe nulle part dans la charte : ni le bleu du logo, ni le marine.
   Il prend l'encre du site, comme les autres commandes de l'en-tête. */
.hd-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--navy)}
.hd-toggle:hover{color:var(--accent)}
@media(max-width:980px){
  .hd-in{padding:0 18px;height:60px}.hd-toggle{display:block}
  .hd-nav{display:none;position:fixed;top:63px;left:0;right:0;bottom:0;background:#fff;flex-direction:column;padding:18px;overflow-y:auto;height:auto;border-top:1px solid var(--g200);align-items:stretch}
  .hd-nav.open{display:flex}
  .hd-nav>li{height:auto}
  .hd-nav>li>button{height:auto;padding:13px 0;border:none;width:100%;font-size:11px}
  .hd-nav>li:hover>.hd-mega{display:none}
  .hd-nav>li.open>.hd-mega{display:block!important;position:static;box-shadow:none;border-top:none;padding:0 0 10px 14px;min-width:0}
  /* Sur mobile le menu est déjà déplié dans la colonne : deux colonnes
     n'auraient plus de sens. */
  .hd-mega-w{min-width:0}
  .hd-mega-2{grid-template-columns:1fr;gap:0}
  .hd-logo{margin-right:auto}
}

/* ─── pages ─── */
.pg{display:none;padding-top:calc(111px + var(--lgb,0px));min-height:60vh}
.pg.on{display:block}
@media(max-width:980px){.pg{padding-top:calc(63px + var(--lgb,0px))}}
.wrap{max-width:var(--max);margin:0 auto;padding:0 36px}
@media(max-width:768px){.wrap{padding:0 18px}}

/* ─── héros, d'après la couverture du catalogue ─── */
.hero{background:var(--navy);position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 90% at 82% 40%,rgba(72,168,204,.10) 0%,transparent 68%)}
/* L'accueil s'ouvre plus haut et plus large : c'est le seul écran que
   tout le monde voit, il a le droit de prendre de la place. */
.hero-in{position:relative;z-index:1;max-width:var(--max);margin:0 auto;
  padding:clamp(72px,10vw,132px) 36px clamp(56px,7vw,92px)}
.hero-ey-court,.hero-sub-court{display:none}
/* Sur téléphone, l'ouverture se resserre : les chiffres-clés doivent
   tenir dans l'écran, pas se couper en deux. */
@media(max-width:700px){
  .hero-in{padding:44px 20px 34px}
  .hero .hero-ey,.hero-sub{display:none}
  .hero .hero-ey-court,.hero-sub-court{display:block}
  .hero-sub-court{margin-bottom:26px}
  .hero .hero-stats{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:0 10px}
  .hst{padding:18px 0 0;margin-right:0}
  .hst-v{font-size:30px}
}
.hero .eyebrow{margin-bottom:26px;display:block}
.hero .hero-ey-court{display:none}
.hero h1{font-family:var(--disp);font-size:clamp(30px,3.8vw,46px);font-weight:600;text-transform:uppercase;color:#fff;line-height:.98;letter-spacing:-.025em;margin-bottom:26px}
.hero h1 em{font-style:normal;color:var(--accent);display:block}
.hero-sub{font-size:15px;color:rgba(255,255,255,.62);max-width:540px;line-height:1.75}
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.hero-stats{display:flex;gap:0;margin-top:58px;border-top:1px solid rgba(255,255,255,.14);flex-wrap:wrap}
.hst{padding:24px 34px 0 0;margin-right:34px;flex:0 0 auto}
.hst-v{font-family:var(--disp);font-size:clamp(34px,3.6vw,46px);font-weight:600;color:#fff;letter-spacing:-.03em;line-height:1}
.hst-v span{font-size:16px;color:var(--accent)}
/* Valeur en lettres (nom du groupe) : deux lignes qui occupent la
   hauteur d'un chiffre, sans en imiter la taille. */
.hst-t{font-size:clamp(17px,1.75vw,22px);line-height:1.05;letter-spacing:-.01em;padding-top:2px}
.hst-l{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.62);text-transform:uppercase;letter-spacing:.16em;margin-top:9px;line-height:1.7}
@media(max-width:768px){.hero-in{padding:52px 18px 44px}.hst{padding-right:22px;margin-right:22px}}

.cta{padding:15px 30px;font-family:var(--mono);font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;cursor:pointer;transition:transform .12s,background .18s,border-color .18s;
  border:1px solid transparent}
.cta:active{transform:translateY(1px)}
.cta-1{background:var(--accent);color:#fff}
.cta-1:hover{background:var(--accent-dk)}
.cta-2{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.cta-2:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.cta-3{background:var(--accent);color:#fff}
.cta-3:hover{background:var(--accent-dk)}
.cta-ghost{background:none;border-color:var(--g300);color:var(--g700)}
.cta-ghost:hover{border-color:var(--ink);color:var(--ink)}

/* ─── grille des six gammes, reprise de la couverture ─── */
.gam-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
@media(max-width:880px){.gam-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gam-grid{grid-template-columns:1fr}}
.gam{position:relative;cursor:pointer;border:none;padding:0;display:block;width:100%;font-family:inherit;overflow:hidden;background:var(--navy);aspect-ratio:4/3}
.gam img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1);filter:saturate(.92)}
.gam:hover img{transform:scale(1.045)}
.gam-sc{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,28,49,.94) 0%,rgba(8,28,49,.55) 32%,rgba(8,28,49,.06) 62%,rgba(8,28,49,.18) 100%);transition:background .3s}
.gam:hover .gam-sc{background:linear-gradient(to top,rgba(8,28,49,.96) 0%,rgba(8,28,49,.62) 38%,rgba(8,28,49,.12) 70%,rgba(8,28,49,.2) 100%)}
.gam-c{position:absolute;left:0;right:0;bottom:0;padding:clamp(22px,2.4vw,30px) clamp(24px,2.6vw,32px);text-align:left}
.gam-n{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--accent);letter-spacing:.2em;display:block;margin-bottom:7px}
/* Le nom d'une gamme n'a pas à crier en capitales : à cette taille, la
   casse normale se lit mieux et pose la même autorité. */
.gam-c h3{font-family:var(--disp);font-size:clamp(19px,1.9vw,25px);font-weight:600;color:#fff;
  text-transform:none;letter-spacing:-.02em;line-height:1.1;margin-bottom:7px}
.gam-c p{font-size:13px;color:rgba(255,255,255,.68);line-height:1.5;max-width:34ch}
.gam-c .lk{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.18em;color:#fff;opacity:0;transform:translateY(6px);transition:all .3s;display:block;margin-top:11px}
.gam:hover .gam-c .lk{opacity:.9;transform:none}
@media(max-width:560px){.gam-c .lk{opacity:.8;transform:none}}

/* ─── sections ─── */
.sec{padding:clamp(56px,7.5vw,110px) 0}
.sec.soft{background:var(--soft)}
.sec-hd{margin-bottom:44px;max-width:660px}
.sec-hd .eyebrow{display:block;margin-bottom:14px}
.sec-hd h2{font-size:clamp(26px,3.4vw,40px);text-transform:uppercase;line-height:1.06;letter-spacing:-.02em}
.sec-hd h2 em{font-style:normal;color:var(--accent)}
.sec-hd p{font-size:14.5px;color:var(--g600);margin-top:16px}
@media(max-width:768px){.sec{padding:52px 0}}

/* preuves : quatre repères, comme le bandeau du catalogue */
.trust{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--g200)}
.trust>.tr:nth-child(-n+3){border-bottom:1px solid var(--g200)}
.trust>.tr:nth-child(3n){border-right:none}
@media(max-width:900px){.trust{grid-template-columns:repeat(2,1fr)}
  .trust>.tr:nth-child(3n){border-right:1px solid var(--g200)}
  .trust>.tr:nth-child(2n){border-right:none}
  .trust>.tr:nth-child(-n+4){border-bottom:1px solid var(--g200)}}
@media(max-width:560px){.trust{grid-template-columns:1fr}
  .trust>.tr{border-right:none;border-bottom:1px solid var(--g200)}
  .trust>.tr:last-child{border-bottom:none}}
.tr{padding:32px 30px 34px 0;border-right:1px solid var(--g200)}
.tr:last-child{border-right:none}
@media(max-width:768px){.tr:nth-child(2n){border-right:none}.tr{padding:24px 18px 24px 0}}
.tr-v{font-family:var(--disp);font-size:clamp(30px,3.4vw,42px);font-weight:600;color:var(--ink);
  letter-spacing:-.03em;line-height:1}
.tr-v span{color:var(--accent)}
.tr-g{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--g400);margin-bottom:14px}
.tr-k{font-family:var(--body);font-size:14px;font-weight:600;color:var(--ink);margin-top:12px;line-height:1.35}
.tr-p{font-size:13px;color:var(--g600);line-height:1.6;margin-top:8px;max-width:30ch}

/* bandeau d'appel */
.band{background:var(--navy);padding:78px 36px;text-align:center;position:relative;overflow:hidden}
.band::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 100% at 50% 0%,rgba(224,113,31,.13) 0%,transparent 70%)}
.band>*{position:relative;z-index:1}
.band .eyebrow{display:block;margin-bottom:16px}
.band h2{font-size:clamp(24px,3.2vw,36px);color:#fff;text-transform:uppercase;margin-bottom:14px;letter-spacing:-.02em}
.band h2 em{font-style:normal;color:var(--accent)}
.band p{font-size:14.5px;color:rgba(255,255,255,.55);margin:0 auto 32px;max-width:480px}
.band-b{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media(max-width:768px){.band{padding:54px 18px}}

/* ─── pied de page ─── */
.ft{background:var(--navy);color:rgba(255,255,255,.5);padding:56px 36px 26px;font-size:13px}
.ft-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;align-items:start}
@media(max-width:768px){.ft-in{grid-template-columns:1fr 1fr;gap:30px}.ft{padding:42px 18px 22px}}
@media(max-width:480px){.ft-in{grid-template-columns:1fr}}
.ft img{height:23px;margin-bottom:18px}
.ft-brand p{font-size:12.5px;line-height:1.75;max-width:280px;color:rgba(255,255,255,.45)}
.ft-sig{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:var(--accent);margin-top:18px}
.ft h4{font-family:var(--mono);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.32);margin-bottom:16px}
.ft ul{list-style:none}
.ft li{margin-bottom:9px}
.ft li button{font-size:13px;color:rgba(255,255,255,.52);background:none;border:none;cursor:pointer;padding:0;text-align:left;transition:color .15s;font-family:inherit}
.ft li button:hover{color:#fff}
.ft-bt{max-width:var(--max);margin:36px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.28);flex-wrap:wrap}

/* ─── bandeau de gamme, d'après les pages de garde ─── */
.gbanner{position:relative;background:var(--navy);min-height:330px;display:flex;align-items:flex-end;overflow:hidden}
.gbanner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gbanner::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,rgba(8,28,49,.96) 0%,rgba(8,28,49,.88) 34%,rgba(8,28,49,.5) 68%,rgba(8,28,49,.3) 100%)}
.gbanner-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:56px 36px 44px;width:100%}
.gbanner .eyebrow{display:block;margin-bottom:18px}
.gbanner h1{font-family:var(--disp);font-size:clamp(30px,4.6vw,52px);font-weight:600;text-transform:uppercase;color:#fff;line-height:1;letter-spacing:-.025em;max-width:620px}
.gbanner h1 em{font-style:normal;color:var(--accent);display:block}
.gbanner p{font-size:14px;color:rgba(255,255,255,.66);max-width:470px;margin-top:20px;line-height:1.75}
.gbanner-n{position:absolute;top:26px;right:36px;font-family:var(--disp);font-size:clamp(70px,11vw,140px);font-weight:600;color:rgba(255,255,255,.09);line-height:.8;letter-spacing:-.04em;z-index:2}
@media(max-width:768px){.gbanner-in{padding:40px 18px 32px}.gbanner-n{right:18px;top:16px}}
.gmeta{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--g200);border-bottom:1px solid var(--g200);margin-bottom:44px}
.gmeta div{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.15em;color:var(--g600);padding:15px 26px 15px 0;margin-right:26px;border-right:1px solid var(--g200)}
.gmeta div:last-child{border-right:none;margin-right:0}

/* ─── fil et en-tête de page intérieure ─── */
.bc{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.15em;color:var(--g400);padding:24px 0 0}
.bc button{background:none;border:none;color:var(--accent);cursor:pointer;font:inherit;padding:0}
.bc button:hover{text-decoration:underline}
.bc span{margin:0 8px;color:var(--g300)}
/* ═══ EN-TÊTE DE PAGE ═══
   Une fiche produit, une gamme et une page d'outil s'ouvrent maintenant
   de la même façon : un bandeau de norme, un titre qui occupe l'écran,
   une phrase. Le numéro de gamme reste en filigrane, il donne la
   profondeur sans ajouter d'encre. */
.ph{padding:clamp(22px,3vw,44px) 0 clamp(26px,3.4vw,42px);position:relative}
.ph .eyebrow{display:block;margin-bottom:16px;color:var(--accent)}
.ph h1{font-size:clamp(32px,5.2vw,60px);text-transform:none;letter-spacing:-.032em;line-height:1;
  max-width:17ch}
.ph p{font-size:clamp(15px,1.5vw,18px);color:var(--g600);margin-top:16px;max-width:52ch;line-height:1.55}
.ph-n{position:absolute;top:18px;right:0;font-family:var(--disp);font-size:clamp(64px,9vw,132px);font-weight:600;
  color:var(--ghost);line-height:.78;letter-spacing:-.05em;pointer-events:none;user-select:none;opacity:.55}
@media(max-width:640px){.ph-n{display:none}}
.chip{display:inline-flex;align-items:center;font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--g600);border:1px solid var(--g200);padding:6px 12px}

/* ─── liste de produits d'une gamme ─── */
.grp{margin-bottom:44px}
.grp-t{font-family:var(--mono);font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.24em;color:var(--accent);margin-bottom:0;padding-bottom:12px;border-bottom:1px solid var(--ink);display:block}
/* Trois colonnes, toujours. Pas de grille élastique : une section de deux
   fiches en occupe deux et laisse la troisième vide, une section de six
   fait deux rangées de trois. La largeur d'une fiche est donc la même
   d'une section à l'autre et d'une gamme à l'autre. */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-left:1px solid var(--g200)}
@media(max-width:900px){.pcards{grid-template-columns:repeat(2,1fr)}}
.pcard-img img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;margin-bottom:16px;padding:0}
.pcard-noimg{display:block;width:100%;aspect-ratio:4/3;background:var(--soft);margin-bottom:16px}
.pcard-go{display:block;margin-top:14px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
@media(max-width:600px){.pcards{grid-template-columns:1fr}}
/* Une carte de produit se soulève au survol au lieu de changer de fond :
   le fond qui s'assombrit fait clignoter la grille entière quand on la
   parcourt à la souris. */
.pcard{border-right:1px solid var(--g200);border-bottom:1px solid var(--g200);padding:clamp(22px,2.4vw,30px) 24px 26px;
  cursor:pointer;transition:box-shadow .22s,transform .22s;background:#fff;text-align:left;font-family:inherit;
  display:block;width:100%;position:relative;z-index:0}
.pcard:hover{box-shadow:0 16px 38px rgba(13,39,66,.09);transform:translateY(-2px);z-index:1}
/* La case des accessoires tient la largeur : ce n'est pas un produit de
   plus dans la grille, c'est l'entrée d'une page. */
.pcard-acc{grid-column:1/-1}
.pcard-acc p{max-width:640px}
.pcard::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .25s}
.pcard:hover::before{transform:scaleY(1)}
.pcard h4{font-family:var(--disp);font-size:17.5px;font-weight:600;color:var(--ink);margin-bottom:8px;
  line-height:1.18;letter-spacing:-.015em}
.pcard p{font-size:13px;color:var(--g600);line-height:1.55}
.pcard .nm{font-family:var(--mono);font-size:9px;color:var(--g400);letter-spacing:.15em;text-transform:uppercase;margin-top:13px;display:block}

/* ─── fiche produit ─── */
/* La description tient en deux lignes, le visuel en fait deux cent
   soixante-dix : centrée, elle regarde la photo au lieu de flotter en
   haut d'une colonne vide. */
.pinfo{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;margin-bottom:30px;align-items:center}
.pinfo .pdesc{font-size:17px;line-height:1.7;margin-bottom:0}
@media(max-width:900px){.pinfo{grid-template-columns:1fr;gap:30px}}
.slab{font-family:var(--mono);font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.24em;color:var(--g400);margin-bottom:11px;display:block}
/* La description est le seul texte suivi de la fiche : elle a droit au
   corps d'un chapô, pas à celui d'une légende. */
.pdesc{font-size:clamp(15.5px,1.45vw,18px);line-height:1.7;color:var(--g700);margin-bottom:30px;max-width:62ch}
.pplus{list-style:none;display:flex;flex-direction:column;gap:0;margin-bottom:26px}
.pplus li{font-size:13.5px;color:var(--g700);line-height:1.55;padding:9px 0;border-bottom:1px solid var(--g200)}
.pplus li:first-child{border-top:1px solid var(--g200)}
.pplus b{font-family:var(--disp);font-weight:600;color:var(--ink);text-transform:uppercase;font-size:13px;letter-spacing:.02em}
.papps{list-style:none;border-left:2px solid var(--accent);padding-left:18px}
.papps li{font-size:13.5px;color:var(--g700);padding:5px 0}
/* Le visuel faisait trois cent cinquante pixels face à deux lignes de
   texte : l'en-tête était creux aux trois quarts. Ramené à la hauteur de
   ce qu'il accompagne. */
/* Le profil est le sujet de la page : il grandit, sur un fond très
   légèrement teinté qui le détache du blanc sans l'encadrer. */
.pfig{background:linear-gradient(180deg,#fff 0%,var(--g50) 100%);border:1px solid var(--g200);
  padding:26px 22px;position:relative;display:flex;align-items:center;justify-content:center;
  min-height:210px;margin-bottom:0}
.pfig img{max-width:100%;max-height:216px;width:auto;object-fit:contain}
/* Les pannes C/Z portent une photo ET un schéma coté empilés. Le schéma
   est une image vectorielle : sans hauteur imposée, il occupait deux
   cent soixante pixels à lui seul et rallongeait l'en-tête d'autant. */
.pfig .psvg{width:100%;display:flex;justify-content:center}
.psvg svg,.psvg img{width:100%;height:auto;max-height:236px;object-fit:contain;display:block}
/* Dans l'en-tête, le schéma suit la même hauteur que la photo. Certains
   schémas sont des SVG, d'autres des images matricielles — les pannes
   C/Z par exemple : les deux cas sont visés, sinon max-height:236px
   l'emporte et l'en-tête repart à quatre cent trente pixels. */
.pfig .psvg svg,.pfig .psvg img{max-height:206px;width:auto}
/* Miniature du schéma coté, posée juste avant le tableau qu'elle
   légende. Largeur limitée : au-delà, elle redevient une illustration
   d'en-tête et reprend la place qu'on vient de lui retirer. */
/* Alignée à droite, au-dessus du tableau : la coupe cotée se lit dans le
   même mouvement que les colonnes h, b, c et t qu'elle légende. */
.pmini{display:flex;justify-content:flex-end;max-width:300px;margin:0 0 14px auto}
.pmini .psvg{width:auto}
.pmini .psvg svg,.pmini .psvg img{max-height:126px;width:auto}
.tk{position:absolute;width:10px;height:10px;border:1px solid var(--g300)}
.tk.tl{top:7px;left:7px;border-right:none;border-bottom:none}
.tk.tr{top:7px;right:7px;border-left:none;border-bottom:none}
.tk.bl{bottom:7px;left:7px;border-right:none;border-top:none}
.tk.br{bottom:7px;right:7px;border-left:none;border-top:none}
.pfig+.cap{margin-bottom:22px}
.pcard-ft{position:absolute;top:22px;right:22px;opacity:0;transition:opacity .2s}
.pcard:hover .pcard-ft{opacity:1}
/* ═══ BANDEAU DES TROIS COLONNES ═══
   Ce qu'il est, pourquoi le prendre, où l'employer. Trois colonnes de
   même largeur, trois lignes de même hauteur, un filet vertical entre
   elles : la page est la même d'un produit à l'autre, et l'œil compare
   au lieu de lire. */
/* Les trois colonnes partagent la même grille de rangées : le libellé de
   section, puis trois lignes. Une valeur qui passe sur deux lignes
   agrandit sa rangée dans les trois colonnes à la fois, et les filets
   restent en face les uns des autres. */
/* Les trois colonnes ne portent pas la même charge de texte : les
   avantages sont des phrases, les applications trois mots, les
   caractéristiques un libellé et sa valeur. Des colonnes égales
   faisaient replier les avantages pendant que les applications
   laissaient un tiers de blanc. Réparties selon ce qu'elles portent,
   soixante-douze lignes repliées tombent à vingt-quatre. */
/* Spécifications, avantages, applications : trois colonnes, un seul
   interligne, et de l'air au-dessus pour les détacher du texte suivi. */
.ptri{margin-top:clamp(26px,3vw,44px);display:grid;grid-template-columns:0.95fr 1.25fr 0.8fr;grid-template-rows:auto auto auto auto;
  border-top:2px solid var(--ink);margin-bottom:38px;font-size:12.5px}
.ptc{display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start;
  padding:22px 22px 4px;border-right:1px solid var(--g200);min-width:0}
.ptc:first-child{padding-left:0}
.ptc:last-child{border-right:none;padding-right:0}
.ptc .slab{margin-bottom:12px}
/* Les li deviennent des rangées de la sous-grille, pas des enfants du ul. */
.ptc ul{list-style:none;display:contents}
.ptc li{font-size:inherit;color:var(--g700);line-height:1.55;padding:13px 0;
  border-bottom:1px solid var(--g200);display:flex;align-items:center}
.ptc li:last-child{border-bottom:none}
/* Libellé et valeur sur la même ligne, comme une phrase d'avantage :
   les trois colonnes ont alors le même nombre de lignes. */
.ptc-k li{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.ptc-k .pt-v{text-align:right}
.ptc li:last-child{border-bottom:none}
.ptc li b{color:var(--ink);font-weight:600}
/* Caractéristiques : le libellé à gauche, la valeur alignée à droite. */
/* Une seule échelle typographique dans les trois colonnes : même corps,
   même famille, même couleur. Le gras marque le terme de tête — le
   libellé d'une caractéristique, le mot d'accroche d'un avantage — et
   rien d'autre. Avant, le bandeau mélangeait du mono en petites
   capitales grises, du gras à quatorze et du romain à treize, ce qui
   faisait lire trois tableaux différents côte à côte. */
.pt-k{font-weight:600;color:var(--ink);flex-shrink:0;white-space:nowrap}
.pt-v{color:var(--g700);text-align:right}
@media(max-width:900px){
  .ptri{grid-template-columns:1fr;border-top-width:2px}
  .ptc{padding:20px 0 4px;border-right:none;border-bottom:1px solid var(--g200)}
  .ptc:last-child{border-bottom:none}
}
.psp dt{color:var(--g500);flex-shrink:0;font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.12em;padding-top:3px}
.psp dd{color:var(--ink);font-weight:600;text-align:right;font-size:14px}

/* Une ligne d'appel dans une fiche produit ne doit pas ressembler à un
   avertissement : liseré orange à gauche, fond très clair, et le texte
   au corps du site. */
.note-cmd,.pnote{border-left:3px solid var(--accent);background:var(--g50);padding:18px 22px;
  font-size:14px;line-height:1.6;color:var(--g700)}

/* La fiche technique en calque : plein écran, barre en tête, le document
   dessous. Le cadre porte ses propres styles, rien ne déborde. */
#ftCalque{position:fixed;inset:0;z-index:2000;background:#fff;display:flex;flex-direction:column}
.ftc-bar{display:flex;align-items:center;gap:14px;padding:10px 14px;background:var(--navy);color:#fff;
  flex:0 0 auto}
.ftc-bar span{flex:1;font-family:var(--disp);font-size:15px;color:#fff;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.ftc-x{background:none;border:none;color:#fff;font-size:19px;line-height:1;cursor:pointer;padding:6px 8px}
.ftc-p{background:var(--accent);border:none;color:#fff;cursor:pointer;padding:10px 16px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.ftc-s{background:none;border:1px solid rgba(255,255,255,.35);color:#fff;cursor:pointer;padding:9px 14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.ftc-s:hover{border-color:#fff}
.ftc-f{flex:1;width:100%;border:0;background:#fff}

/* ═══ LES CHIFFRES ═══
   Un catalogue d'acier est une suite de nombres qu'on compare de haut en
   bas. Ils sont donc en chasse fixe partout, avec des chiffres de même
   largeur : une épaisseur de 0,63 et une de 0,75 s'alignent au dixième,
   dans un tableau comme dans une fiche. */
table td,table th,.num,.dt td,.ct td,.psp dd,.pt-v{font-variant-numeric:tabular-nums}

/* ─── tableaux, style catalogue : filets fins, en-têtes mono ─── */
.tw{overflow-x:auto;margin-bottom:14px}
table.dt{width:100%;border-collapse:collapse;font-size:13px;min-width:580px}
/* Colonnes de données centrées, en-tête et valeur sur le même axe. Elles
   étaient alignées à droite, sauf la dernière qui était centrée : sur un
   tableau large, la valeur se retrouvait à cinquante pixels de son
   libellé et la dernière colonne ne suivait pas les autres. */
/* L'en-tête de tableau reste visible quand on descend une liste de
   soixante références : sans lui, on ne sait plus quelle colonne on lit. */
.dt thead th{background:#fff;color:var(--g500);padding:12px 14px 11px;text-align:center;font-family:var(--mono);
  font-weight:500;font-size:9px;text-transform:uppercase;letter-spacing:.15em;white-space:nowrap;
  border-bottom:1px solid var(--ink);position:sticky;top:0;z-index:2}
.dt thead th:first-child{text-align:left;padding-left:0}
.dt thead th:last-child{padding-right:0}
.dt tbody td{padding:11px 14px;border-bottom:1px solid var(--g200);color:var(--g700);text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:12.5px}
.dt tbody td:first-child{text-align:left;padding-left:0;font-weight:600;color:var(--ink);white-space:normal;font-family:var(--disp);font-size:13.5px}
.dt tbody td:last-child{padding-right:0}
.dt tbody tr{transition:background .12s}
.dt tbody tr:hover{background:var(--accent-pale)}
.dt th.k1,.dt td.k1{position:sticky;left:0;z-index:2;background:#fff;
  min-width:132px;max-width:132px;text-align:left;padding-left:0}
.dt th.k2,.dt td.k2{position:sticky;left:132px;z-index:2;background:#fff;
  min-width:112px;max-width:112px;text-align:left;padding-right:18px}
.dt thead th.k1,.dt thead th.k2{background:#fff}
.dt tbody tr:hover td.k1,.dt tbody tr:hover td.k2{background:var(--accent-pale)}
.dt td.k2::after{content:'';position:absolute;top:0;bottom:0;right:0;width:1px;background:var(--g200)}
.dt th.k2::after{content:'';position:absolute;top:0;bottom:11px;right:0;width:1px;background:var(--g200)}
.dt td,.dt th{position:relative}
/* Sur écran étroit le tableau défile en largeur : on le dit, et le bord
   droit s'estompe pour montrer qu'il continue. Les boutons d'ajout
   passent à 40 px de haut, la taille d'un doigt. */
.tw-hint{display:none}
@media(max-width:768px){
  .tw-wrap{position:relative}
  .tw-wrap::after{content:'';position:absolute;top:0;right:0;bottom:14px;width:34px;pointer-events:none;
    background:linear-gradient(to left,#fff 20%,rgba(255,255,255,0))}
  .tw-hint{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--g500);margin:0 0 8px}
  .tw-hint::after{content:'→'}
  .add{min-height:40px;padding:8px 12px;font-size:10px}
}
@media(max-width:520px){
  .dt th.k1,.dt td.k1{min-width:104px;max-width:104px}
  .dt th.k2,.dt td.k2{left:104px;min-width:96px;max-width:96px;padding-right:12px}
  .add{padding:8px 9px;letter-spacing:.08em}
}
.dt .pxc{font-family:var(--mono);font-weight:600;color:var(--ink);font-size:12.5px}
.dt .pxu{font-family:var(--mono);font-size:9px;color:var(--g400)}
.dt .pxna{color:var(--g400);font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em}
.add{background:none;color:var(--g600);border:1px solid var(--g300);padding:6px 13px;font-family:var(--mono);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.13em;cursor:pointer;white-space:nowrap;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.add:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.add svg{stroke:currentColor;fill:none;stroke-width:2.6;width:11px;height:11px}
/* Saisie libre sous une matrice de formats : un bloc discret, aligné sur
   les champs du formulaire de demande. */
.tlb{margin-top:22px;padding:18px 20px;background:var(--g50);border:1px solid var(--g200)}
.tlb-t{display:block;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--logo-b);margin-bottom:8px}
.tlb p{font-size:12px;color:var(--g500);line-height:1.6;margin-bottom:14px;max-width:640px}
.tlb-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:14px;align-items:end}
@media(max-width:700px){.tlb-g{grid-template-columns:1fr 1fr}.tlb-b{grid-column:1/-1}}
.tb-fs{display:flex;gap:8px;flex-wrap:wrap}
.tb-f{padding:9px 16px;border:1px solid var(--g200);background:#fff;font-family:var(--mono);
  font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--g500)}
.tb-f:hover{border-color:var(--logo-b);color:var(--logo-b)}
.tb-f.on{background:var(--logo-b);border-color:var(--logo-b);color:#fff}
.tb-o{margin-top:14px;font-size:12.5px;color:var(--g600);line-height:1.6}
.tb-o b{color:var(--ink)}
.tlb-b{height:42px;padding:0 18px;font-family:var(--mono);font-size:9px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--logo-b);white-space:nowrap}
.tlb-b:hover{background:var(--dvd,#00417C)}
.tnote{font-size:11.5px;color:var(--g500);line-height:1.7;margin:0 0 40px;max-width:820px}
/* Une section de la page accessoires. L'ancre se cale sous l'en-tête
   collant, sinon le titre visé passe dessous. */
.accs{margin-bottom:56px;scroll-margin-top:104px}
.accs-h{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;margin:18px 0 22px}
.accs-h .pdesc{max-width:760px;margin:0}
.accs-h .cta{flex:0 0 auto;white-space:nowrap}
@media(max-width:700px){.accs-h{display:block}.accs-h .cta{margin-top:14px}}
.mx{color:var(--accent);cursor:pointer;background:none;border:none;padding:4px 8px;transition:all .15s;line-height:1}
.mx svg{width:9px;height:9px;fill:currentColor}
.mx:hover{color:var(--accent);transform:scale(1.5)}
.mx-no{color:var(--g300)}
.aux-t{font-family:var(--mono);font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.24em;color:var(--accent);margin:42px 0 16px;padding-bottom:0;display:block}

/* légende d'image, comme sous les photos produit du catalogue */
.cap{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.18em;color:var(--g400);margin-top:10px;text-align:right}

/* ─── panneau de sélection ─── */
.ov{position:fixed;inset:0;background:rgba(8,28,49,.5);z-index:1100;display:none;backdrop-filter:blur(3px)}
.ov.on{display:block}
.drw{position:fixed;top:50%;left:50%;z-index:1101;background:#fff;border-top:3px solid var(--accent);
  width:min(1420px,calc(100vw - 28px));max-height:88vh;display:flex;flex-direction:column;
  box-shadow:0 24px 70px rgba(8,28,49,.3);opacity:0;pointer-events:none;
  transform:translate(-50%,-50%) scale(.97);transition:opacity .2s,transform .2s}
.drw.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
@media(max-width:640px){.drw{width:calc(100vw - 16px);max-height:92vh}}
.drw-h{padding:20px 24px;display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--g200);flex-shrink:0}
.drw-h h3{font-size:17px;text-transform:uppercase;letter-spacing:-.01em}
.drw-h .sub{font-family:var(--mono);font-size:9.5px;color:var(--g400);margin-top:4px;text-transform:uppercase;letter-spacing:.15em}
.xbtn{background:none;border:none;font-size:22px;line-height:1;cursor:pointer;color:var(--g400);padding:0 4px}
.xbtn:hover{color:var(--ink)}
.drw-b{flex:1;overflow-y:auto;padding:0 20px;background:#fff}
.drw-f{padding:16px 24px;border-top:1px solid var(--g200);flex-shrink:0;background:var(--soft)}
.drw-rep{font-size:12px;color:var(--g600);background:var(--g50);border-left:3px solid var(--accent);padding:11px 14px;margin-bottom:18px;line-height:1.6}
.drw-rep button{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:none;border:none;padding:0;cursor:pointer;text-decoration:underline}
.drw-tot{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:var(--g500)}
.drw-tot b{font-family:var(--disp);font-size:22px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.drw-f .row{display:flex;gap:8px}
.drw-f .row .cta{flex:1;text-align:center;justify-content:center}

.lgrp{margin-bottom:22px}
.lgrp-t{font-family:var(--mono);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.2em;
  color:var(--accent);padding-bottom:9px;border-bottom:1px solid var(--ink);margin-bottom:2px}
.lgrp-c{display:block;font-style:normal;font-size:9px;letter-spacing:.06em;text-transform:none;color:var(--g500);margin-top:5px;font-weight:400}
/* Le défilement horizontal n'a plus lieu d'être : une ligne se replie
   au lieu de pousser la fenêtre vers la droite. */
.lrows{overflow-x:visible}
.lrow{display:flex;align-items:center;gap:7px;padding:7px 0;border-bottom:1px solid var(--g100)}
.lrow:last-child{border-bottom:none}
.lrow:hover{background:var(--soft)}
.lhead{border-bottom:1px solid var(--g200);padding:8px 0 7px}
.lhead:hover{background:none}
.lhead span{font-family:var(--mono);font-size:8px;font-weight:500;text-transform:uppercase;
  letter-spacing:.14em;color:var(--g400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc{flex:0 0 118px;min-width:0}
.lc-duo{flex:0 0 186px}
.lc-w{flex:0 0 150px}
.rk{border:1px solid var(--g100);border-top:3px solid var(--accent);padding:26px 28px 24px;margin-bottom:38px;background:var(--g50)}
.rk-t{font-family:var(--disp);font-size:19px;color:var(--navy);margin-bottom:6px}
.rk-d{font-size:13.5px;color:var(--g500);margin-bottom:20px;max-width:62ch}
.rk-g{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:22px}
.rk-2{display:flex;gap:30px;align-items:flex-start;margin-bottom:8px}
.rk-co{flex:0 0 41%;min-width:0}
.rk-vu{flex:1 1 0;min-width:0;align-self:stretch}
.rk-vs{position:sticky;top:24px}
@media(max-width:900px){.rk-2{display:block}.rk-vs{position:static}.rk-vu{margin-top:22px}}
.rk-s{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:4px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--g100)}
.rk-q{margin-bottom:18px}
.rk-l{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--g400);margin-bottom:8px}
.pl{display:block;margin:0 0 8px}
.pl button{display:inline-block;font-family:var(--body);font-size:13px;padding:8px 14px;margin:0 6px 6px 0;border:1px solid var(--g200);background:#fff;color:var(--g600);cursor:pointer;transition:.12s}
.pl button:hover{border-color:var(--g400)}
.pl button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.rk-x{display:flex;flex-wrap:wrap;gap:18px 26px;margin-bottom:22px}
.sl{flex:1 1 210px;min-width:0}
.sl-h{margin-bottom:5px;min-height:30px}
.sl-h span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--g400);line-height:1.35}
.sl-h b{display:block;font-family:var(--mono);font-size:14px;color:var(--navy);line-height:1.25}
.sl input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}
.nu-w{margin-top:12px}
.nu-w>span{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--g400);width:78px;vertical-align:top;padding-top:12px}
.nu-w>.nu{display:inline-block;vertical-align:top}
.nu{display:block}
.nu button{display:inline-block;padding:0;margin:0 6px 0 0;border:1px solid var(--g200);background:#fff;cursor:pointer;width:44px;text-align:center;vertical-align:top}
.nu button.on{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.nu i{display:block;width:100%;height:22px}
.nu em{font-style:normal;font-family:var(--mono);font-size:9px;color:var(--g500);padding:2px 0}
.rk-vi{font-family:var(--body);font-size:13.5px;padding:9px 10px;border:1px solid var(--g200);background:#fff;color:var(--ink);min-width:220px}
.rk-e{display:block;width:100%;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--g500);background:none;border:1px dashed var(--g200);padding:11px;cursor:pointer;margin-bottom:18px}
.rk-e:hover{border-color:var(--g400);color:var(--ink)}
.rk-c{display:flex;flex-wrap:wrap;gap:10px 24px;padding:14px 16px;margin-bottom:20px;background:#fff;border:1px solid var(--g100)}
.rk-c span{font-size:12.5px;color:var(--g500);white-space:nowrap}
.rk-c strong{font-family:var(--mono);font-size:13.5px;color:var(--navy);font-weight:600}
.rk-p{display:flex;align-items:flex-end;gap:5px;padding-bottom:9px}
.rk-p i{width:26px;height:26px;border:1px solid var(--g200);display:block}
.rk-svg{width:100%;height:auto;display:block;margin:0 0 26px}
.bg{display:flex;flex-wrap:wrap;gap:18px 32px;margin-bottom:20px}
.bg-j{flex:1 1 240px;min-width:0}
.bg-jl{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--g600);margin-bottom:6px}
.bg-jl b{font-family:var(--mono);font-size:13px;color:var(--navy)}
.bg-jb{height:5px;background:var(--g100);position:relative}
.bg-jb i{display:block;height:100%;background:var(--accent)}
.bg-jb i.ser{background:#C9761F}
.bg-jb i.lim{background:#A33B2D}
.bg-jd{font-size:11px;color:var(--g400);margin-top:5px;font-family:var(--mono)}
.bg-g{display:flex;flex-wrap:wrap;gap:10px 28px;padding:14px 16px;margin-bottom:22px;background:#fff;border:1px solid var(--g100)}
.bg-g span{font-size:12px;color:var(--g500)}
.bg-g b{font-family:var(--mono);font-size:14px;color:var(--navy);font-weight:600}

.rk-f{flex:1 1 150px;min-width:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--g500)}
.rk-f>span{display:block;margin-bottom:5px;line-height:1.35;min-height:26px}
.rk-f select,.rk-f input{display:block;width:100%;font-family:var(--body);font-size:13.5px;padding:8px 9px;border:1px solid var(--g200);background:#fff;color:var(--ink);text-transform:none;letter-spacing:0}
.rk-f em{display:block;font-style:normal;font-size:9.5px;color:var(--g400);margin-top:3px}
.rk-r{border-top:1px solid var(--g100);padding-top:20px}
.rk-n{width:100%;border-collapse:collapse;font-size:13.5px}
.rk-n td{padding:7px 0;border-bottom:1px solid var(--g100);color:var(--g600)}
.rk-n td.n{text-align:right;font-family:var(--mono);font-size:12.5px;color:var(--ink);white-space:nowrap;width:90px}
.rk-n td.q{text-align:right;font-family:var(--mono);font-size:12.5px;color:var(--g500);width:64px}
.rk-n td.u{text-align:center;font-family:var(--mono);font-size:11px;color:var(--g400);width:52px}
.rk-n td.p{text-align:right;font-family:var(--mono);font-size:12.5px;color:var(--g500);width:80px;white-space:nowrap}
.rk-n thead th{padding:0 0 7px;border-bottom:1px solid var(--g200);font-family:var(--mono);font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--g400);font-weight:400;text-align:left}
.rk-n thead th.q,.rk-n thead th.p,.rk-n thead th.n{text-align:right}
.rk-n thead th.u{text-align:center}
.rk-gate{border-top:2px solid var(--navy);padding:16px 0 18px;font-size:13px;color:var(--g600);line-height:1.65}
.rk-gate b{color:var(--navy)}
.rk-gate .lk{display:block;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:none;border:none;padding:0;cursor:pointer;text-decoration:underline}
.rk-act{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;margin-bottom:6px}
.rk-act>button{height:48px;padding:0 14px;display:flex;align-items:center;justify-content:center;
  text-align:center;box-sizing:border-box}
.rk-act .rk-b{width:auto}
.rk-nt{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--navy);background:none;border:1px solid var(--navy);cursor:pointer}
.rk-nt:hover{background:var(--navy);color:#fff}
.rk-lk{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--g500);background:none;border:1px solid var(--g200);cursor:pointer}
.rk-lk:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:760px){.rk-act{grid-template-columns:1fr}}
.rk-n tr.sep td{padding-top:14px;color:var(--ink)}
.rk-n tr.tot td{border-bottom:none;padding-top:12px;font-weight:600;color:var(--navy)}
.rk-k{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0 18px;border-top:2px solid var(--navy);margin-top:4px}
.rk-k span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--g500)}
.rk-k strong{font-family:var(--disp);font-size:20px;color:var(--accent)}
.rk-b{width:100%}
.rk-w{font-size:11.5px;color:var(--g400);margin-top:14px;line-height:1.6}
.rk-pj{font-size:12.5px;color:var(--g600);line-height:1.65;background:var(--bg-accent,#FAF4EE);border-left:3px solid var(--accent);padding:12px 14px;margin:0 0 20px}
.rk-pj b{color:var(--navy)}
.rk-ex{font-size:12px;color:var(--g500);line-height:1.65;border-top:1px solid var(--g100);padding-top:14px;margin-top:16px}
.rk-ex b{color:var(--navy)}
.ind{color:var(--accent);font-size:8px;font-weight:700;margin-left:2px}
.rk-tr{font-size:11.5px;color:var(--g500);line-height:1.6;margin:0 0 16px;font-family:var(--mono)}
.rk-no{border-top:1px solid var(--g100);padding-top:18px;font-size:13.5px;color:var(--g500)}
@media(max-width:640px){.rk{padding:20px 18px}.rk-f select,.rk-f input{min-width:0;width:100%}.rk-f{flex:1 1 140px}}
.duo{display:flex;align-items:center;gap:5px}
.duo>*{flex:1 1 0;min-width:0}
.duo select{padding-left:6px;padding-right:2px}
.duo-s{flex:0 0 auto;font-family:var(--mono);font-size:11px;color:var(--g400)}
@media(max-width:640px){.lc-duo{flex:0 0 168px}}
.lc-n{flex:0 0 22px;text-align:center;font-family:var(--mono);font-size:9px;color:var(--g400)}
.lc-d{flex:1 1 170px;min-width:140px}
.lc-q{flex:0 0 74px}
.lc-u{flex:0 0 78px}
.lc-x{flex:0 0 26px;text-align:right}
.lrow .nom{font-family:var(--disp);font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .sp{font-family:var(--mono);font-size:8.5px;color:var(--g400);text-transform:uppercase;letter-spacing:.08em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.lrow select,.lrow input{font-family:var(--body);font-size:11.5px;padding:6px 5px;border:1px solid var(--g200);
  background:#fff;color:var(--ink);outline:none;width:100%;border-radius:0;transition:border-color .15s}
.lrow select:focus,.lrow input:focus{border-color:var(--accent)}
.lrow input{text-align:right;font-variant-numeric:tabular-nums}
.lrow .vide{font-family:var(--mono);font-size:10px;color:var(--g300);text-align:center;display:block}
.lsum{font-family:var(--mono);font-size:9px;color:var(--g500);text-transform:uppercase;letter-spacing:.1em;
  padding:7px 0 0;text-align:right}
.lsum b{color:var(--accent)}
.empty{text-align:center;padding:64px 20px}
.empty svg{stroke:var(--g300);fill:none;stroke-width:1.2;margin-bottom:18px}
.empty p{font-family:var(--disp);font-size:16px;margin-bottom:7px;color:var(--ink);text-transform:uppercase}
.empty small{font-size:12.5px;color:var(--g500);display:block;max-width:290px;margin:0 auto;line-height:1.6}



.alb{border-top:2px solid var(--ink);padding:15px 0 4px;margin-top:10px}
.alb-s{display:flex;align-items:center;gap:10px;border:1px solid var(--g300);padding:2px 12px;background:#fff;transition:border-color .15s}
.alb-s:focus-within{border-color:var(--accent)}
.alb-s input{flex:1;border:none;outline:none;font-family:var(--body);font-size:13.5px;padding:11px 0;background:transparent;color:var(--ink)}
.alb-s input::placeholder{color:var(--g400)}
.alb-x{border:none;background:none;color:var(--g300);font-size:17px;line-height:1;cursor:pointer;padding:0 2px}
.alb-x:hover{color:var(--ink)}
.alb-r{max-height:212px;overflow-y:auto;border:1px solid var(--g200);border-top:none}
.alb-r:empty{display:none}
.alr{display:flex;align-items:center;gap:12px;width:100%;padding:9px 12px;background:#fff;border:none;
  border-bottom:1px solid var(--g100);cursor:pointer;text-align:left;font-family:inherit;transition:background .12s}
.alr:last-child{border-bottom:none}
.alr:hover{background:var(--accent-pale)}
.alr-t{font-family:var(--disp);font-size:13.5px;font-weight:600;color:var(--ink);flex:0 0 auto}
.alr-s{font-size:11.5px;color:var(--g500);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alr-g{font-family:var(--mono);font-size:9px;color:var(--accent);letter-spacing:.14em;flex:0 0 auto}
.alr-no{padding:14px 12px;font-size:12.5px;color:var(--g400)}
/* Zone de dépôt : elle doit se voir sans crier, et réagir au survol
   d'un fichier pour qu'on sache qu'on peut lâcher. */
.pj-z{display:flex;align-items:center;justify-content:center;gap:9px;
  border:1px dashed var(--g300);background:var(--g50);padding:16px 14px;
  font-size:12px;color:var(--g500);transition:border-color .18s,background .18s}
.pj-z.on{border-color:var(--logo-b);background:#F2F7FC}
.pj-z button{font:inherit;color:var(--logo-b);text-decoration:underline;text-underline-offset:2px}
.pj-l{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.pj-i{display:flex;align-items:center;gap:10px;padding:7px 10px;background:#fff;border:1px solid var(--g200)}
.pj-k{font-family:var(--mono);font-size:8px;font-weight:600;letter-spacing:.1em;
  color:var(--logo-b);border:1px solid var(--g200);padding:3px 5px}
.pj-n{flex:1;font-size:12px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-s{font-family:var(--mono);font-size:9.5px;color:var(--g400)}
.pj-i button{font-size:17px;line-height:1;color:var(--g400);padding:0 2px}
.pj-i button:hover{color:var(--err)}
.pj-ok{margin-top:10px;padding:11px 13px;background:#EAF2FA;border-left:2px solid var(--logo-b);
  font-size:12px;line-height:1.6;color:var(--ink)}
.pj-nc{margin-top:10px;padding:11px 13px;background:var(--g50);border-left:2px solid var(--g300);
  font-size:11.5px;line-height:1.6;color:var(--g600)}
.pj-nc b{display:block;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.pj-nc ul{list-style:none;margin:0 0 7px}
.pj-nc li{padding:2px 0}
.pj-nc i{color:var(--g500);font-style:normal}
.pj-ok button{display:block;margin-top:9px;font-family:var(--mono);font-size:9px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--logo-b);padding:8px 14px}
.pj-e{font-family:var(--mono);font-size:9px;color:var(--logo-b);letter-spacing:.06em;white-space:nowrap}
.pj-w{display:block;margin-top:7px;font-size:11px;color:var(--g600);line-height:1.5}
.alb-h{font-family:var(--mono);font-size:8.5px;color:var(--g400);text-transform:uppercase;letter-spacing:.12em;margin-top:9px}
.alb-h button{background:none;border:none;color:var(--accent);cursor:pointer;font:inherit;text-decoration:underline;padding:0}
.vide-h{padding:26px 0 6px}
.vide-h p{font-family:var(--disp);font-size:18px;font-weight:600;color:var(--ink);text-transform:uppercase;margin-bottom:7px}
.vide-h small{font-size:12.5px;color:var(--g500);line-height:1.65;display:block;max-width:520px}
.vider{background:none;border:none;font-family:var(--mono);font-size:9px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--g400);cursor:pointer;padding:4px 0}
.vider:hover{color:var(--err)}
.lrow.manque{box-shadow:inset 2px 0 0 var(--accent)}
.lrow.manque .lc-q input{border-color:var(--accent)}
.li-x{width:24px;height:24px;border:none;background:none;cursor:pointer;color:var(--g300);font-size:17px;line-height:1;transition:all .15s;border-radius:2px}
.li-x:hover{color:var(--err);background:#FDEDEA}
.alb-t{font-family:var(--mono);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--accent);display:block;margin-bottom:11px}

/* ─── recherche ─── */
.so{position:fixed;inset:0;z-index:1200;background:rgba(8,28,49,.6);backdrop-filter:blur(4px);display:none;justify-content:center;align-items:flex-start;padding:108px 20px 20px}
.so.on{display:flex}
.sbox{width:100%;max-width:620px}
.sbar{display:flex;align-items:center;gap:14px;background:#fff;padding:6px 20px;box-shadow:0 20px 60px rgba(8,28,49,.3)}
.sbar input{flex:1;border:none;outline:none;font-family:var(--body);font-size:16px;color:var(--ink);padding:15px 0;background:transparent}
.sres{margin-top:4px;background:#fff;box-shadow:0 10px 40px rgba(8,28,49,.18);max-height:340px;overflow-y:auto;display:none}
.sres.on{display:block}
.sres .sh{padding:13px 20px 7px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--g400);background:var(--g50);border-bottom:1px solid var(--g100)}
.schips{display:flex;flex-wrap:wrap;gap:7px;padding:13px 20px}
.schip{background:#fff;border:1px solid var(--g200);padding:7px 11px;font-size:12.5px;color:var(--ink);
  cursor:pointer;font-family:inherit}
.schip:hover{border-color:var(--accent);color:var(--accent)}
.svide{padding:18px 20px;color:var(--g500);font-size:13px;border-bottom:1px solid var(--g100)}
.sr{display:flex;align-items:center;gap:12px;padding:13px 20px;cursor:pointer;border-bottom:1px solid var(--g100);width:100%;background:none;border-left:none;border-right:none;border-top:none;text-align:left;font-family:inherit}
.sr:last-child{border-bottom:none}
.sr:hover{background:var(--accent-pale)}
.sr-n{font-family:var(--disp);font-size:14.5px;font-weight:600;color:var(--ink)}
.sr-d{font-size:11.5px;color:var(--g500)}
.sr-f{font-family:var(--mono);font-size:8.5px;color:var(--g400);margin-left:auto;text-transform:uppercase;letter-spacing:.15em;white-space:nowrap}

/* ─── formulaires ─── */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.fgrid{grid-template-columns:1fr}}
.fd{display:flex;flex-direction:column;gap:6px}
.fd.w{grid-column:1/-1}
/* Une note de bas de bloc, sur toute la largeur : posée sous un seul
   champ, elle déséquilibrerait la ligne, et posée hors flux elle
   recouvrirait la ligne suivante. */
/* Un intertitre dans le formulaire : il occupe toute la largeur et pose
   un filet, pour qu'on voie du premier coup d'œil les trois temps de la
   saisie — qui vous êtes, le projet, la livraison. */
.fgrp{grid-column:1/-1;margin-top:14px;padding-bottom:7px;border-bottom:1px solid var(--g200);
  font-family:var(--mono);font-size:9px;font-weight:600;color:var(--logo-b);
  text-transform:uppercase;letter-spacing:.2em}
.fgrp.first{margin-top:0}
.sr-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Valeur imposée par le produit : elle se lit comme une donnée, pas
   comme un champ qu'on aurait oublié d'activer. */
.fig{font-size:12.5px;color:var(--g600)}
.fd-note{grid-column:1/-1;margin-top:-4px;
  font-family:var(--mono);font-size:9px;color:var(--g400);
  letter-spacing:.04em;line-height:1.5}
.fd label{font-family:var(--mono);font-size:9px;font-weight:500;color:var(--g500);text-transform:uppercase;letter-spacing:.16em}
/* Un select rend deux pixels de plus qu'un input à réglages égaux : le
   navigateur lui ajoute sa propre décoration. On la coupe et on redessine
   le chevron, pour que toutes les cellules d'une même ligne fassent
   exactement la même hauteur. */
.fd input,.fd textarea,.fd select{padding:12px 14px;border:1px solid var(--g200);font-size:14px;
  font-family:var(--body);background:#fff;transition:border-color .18s;resize:vertical;
  color:var(--ink);border-radius:0;line-height:1.2;box-sizing:border-box}
.fd input,.fd select{height:42px}
.fd select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237C8794' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center}
.fd input:focus,.fd textarea:focus,.fd select:focus{outline:none;border-color:var(--accent)}
.fd input::placeholder,.fd textarea::placeholder{color:var(--g300)}
.card{background:#fff;border:1px solid var(--g200);padding:clamp(24px,3vw,34px);
  transition:border-color .18s,box-shadow .18s}
.card.dark-top{border-top:2px solid var(--ink)}
.card h3{font-size:17px;text-transform:uppercase;margin-bottom:20px;letter-spacing:-.01em}

/* ─── document de devis · palette du logo ────────────────────────
   Le devis est le seul document qui porte le logo en pleine taille,
   en haut à gauche. Sa palette est donc construite sur lui, et non
   sur celle des pages : le bleu #005EB5 pour les repères, un bleu
   plus dense pour les aplats et les titres, le gris pour tout le
   secondaire. L'orange des pages n'y entre pas — deux accents dans
   un même document, c'est un accent de trop.
   Le gris du logo, #A7A9AF, est trop clair pour du texte sur blanc :
   on prend celui de l'échelle, un cran plus dense.
   ──────────────────────────────────────────────────────────────── */
.dv{
  --dvb:#005EB5;         /* bleu du logo : repères, références, libellés */
  --dvd:#00417C;         /* même teinte, assombrie : aplats et titres */
  --dvp:#EAF2FA;         /* le même bleu très dilué : bandes de groupe */
  --dvf:#CFE0F1;         /* filet sur fond dilué */
  --dvg:var(--g500);
}
.dv{background:#fff;border:1px solid var(--g200);position:relative;padding:0}
.dv-in{padding:34px 36px 26px}
@media(max-width:640px){.dv-in{padding:22px 16px}}
.dv,.dv *{color:#333}
.dv-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:34px}
.dv-hd img{height:34px;width:auto;margin-top:4px}
.dv-ti{text-align:right}
/* « DEMANDE DE PRIX » très espacé occupait presque toute la largeur de
   l'en-tête et poussait le numéro de pièce sous le logo. Titre réduit,
   interlettrage resserré : il reste dominant sans écraser le reste. */
.dv-t{font-family:var(--disp);font-size:19px;font-weight:600;color:var(--dvd);letter-spacing:.26em;line-height:1}
.dv-n{font-family:var(--disp);font-size:14px;font-weight:600;color:var(--dvd);margin-top:9px;letter-spacing:.02em}
.dv-m{font-size:11px;color:var(--g500);line-height:1.9;margin-top:12px}
.dv-px{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px}
@media(max-width:640px){.dv-px{grid-template-columns:1fr}}
.dv-b{border:1px solid var(--g200);border-top:2px solid var(--dvd);padding:15px 18px 16px}
.dv-bl{font-family:var(--mono);font-size:8.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;color:var(--dvb)}
.dv-bn{font-family:var(--disp);font-size:16px;font-weight:600;color:var(--dvd);margin:9px 0 7px}
.dv-bt{font-size:11.5px;line-height:1.75;color:#444}
.dv-bs{font-size:10px;color:var(--g400);margin-top:8px}
.dv-ob{font-size:11.5px;line-height:1.7;margin-bottom:20px;color:#444}
.dv-ob b{color:var(--dvd)}
.dv-l{width:100%;border-collapse:collapse;font-size:11px}
.dv-l thead th{background:var(--dvd);color:#fff;padding:9px 8px;text-align:left;
  font-family:var(--mono);font-size:8px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;white-space:nowrap}
.dv-l thead th.n{text-align:right}
.dv-l thead th.u{text-align:left}
.dv-l thead th:first-child{padding-left:14px}
.dv-l tbody td{padding:8px;border-bottom:1px solid #EDEFF2;vertical-align:top}
.dv-l tbody tr:nth-child(even) td{background:#F7FAFD}
.dv-l tbody td.r{font-family:var(--mono);font-size:10.5px;color:var(--dvb);white-space:nowrap;padding-left:14px}
.dv-l tbody td.d{color:#333}
.dv-l tbody td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dv-l tbody td.m{font-weight:700;color:var(--dvd)}
.dv-l tbody td.u{font-size:9.5px;color:var(--g400)}
.dv-l tbody td.att{text-align:right;font-family:var(--mono);font-size:8.5px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--g400)}
.dv-att{margin-top:22px;border:1px dashed var(--g300);padding:16px 18px;text-align:center;
  font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.15em;color:var(--g500)}
.dv-l tbody td.dem{text-align:right;font-family:var(--mono);font-size:8.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--dvb)}
.dv-l .man{color:var(--err);font-size:10px}
.dv-l tr.grp td{background:var(--dvp)!important;font-family:var(--mono);font-size:8px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dvd);padding:7px 14px;border-bottom:1px solid var(--dvf)}
.dv-fx{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:22px;align-items:start}
@media(max-width:640px){.dv-fx{grid-template-columns:1fr}}
.dv-som{border:1px solid var(--g200);padding:14px 17px}
.dv-somt{font-size:11.5px;line-height:1.7;color:#444;margin-top:8px}
.dv-nc{font-size:10px;color:var(--g400);margin-top:9px;font-style:italic}
.dv-tt{width:100%;border-collapse:collapse;font-size:12px}
.dv-tt td{padding:6px 0}
.dv-tt td.n{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:#333}

.ent-p{display:none}
.ent-p.on{display:block}
.dl-hero{background:var(--navy);color:#fff;padding:38px 40px;margin-bottom:44px}
.dl-hero h2{font-family:var(--disp);font-size:28px;font-weight:600;margin:9px 0 12px;color:#fff}
.dl-hero p{font-size:14px;line-height:1.75;color:rgba(255,255,255,.72);max-width:60ch;margin-bottom:16px}
.dl-k{font-family:var(--mono);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--accent)}
.dl-meta{font-family:var(--mono);font-size:10px;letter-spacing:.09em;color:rgba(255,255,255,.5);margin-bottom:20px}
.dl-s{font-family:var(--mono);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--accent);padding-bottom:9px;border-bottom:1px solid var(--ink);margin:44px 0 14px}
.dl-sd{font-size:13.5px;line-height:1.7;color:var(--g600);max-width:70ch;margin-bottom:20px}
/* Six brochures : trois par ligne tombent juste, en deux rangées
   pleines. Une grille auto-remplie laissait une case vide. */
.dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--g200);border:1px solid var(--g200)}
@media(max-width:900px){.dl-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.dl-grid{grid-template-columns:1fr}}
.dl-c{display:block;background:#fff;padding:20px 22px;text-decoration:none;transition:background .15s}
.dl-c:hover{background:var(--soft)}
.dl-c h4{font-family:var(--disp);font-size:15px;font-weight:600;color:var(--ink);margin:6px 0 5px}
.dl-c p{font-size:12.5px;line-height:1.6;color:var(--g600);margin-bottom:12px}
.dl-n{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.14em;color:var(--accent)}
.dl-f{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;color:var(--g400);text-transform:uppercase}
.dl-fam{border:1px solid var(--g200);margin-bottom:1px}
.dl-fam-h{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-size:14px;font-weight:600;color:var(--ink);padding:13px 18px;background:var(--soft);border-bottom:1px solid var(--g200)}
.dl-fam-h em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;color:var(--g400);text-transform:uppercase}
/* Quatre fiches par ligne : les colonnes restent alignées d'une famille
   à l'autre, au lieu de s'étirer selon la longueur des libellés. */
.dl-ft{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--g100)}
@media(max-width:900px){.dl-ft{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.dl-ft{grid-template-columns:1fr}}
.dl-ft button{background:#fff;border:none;padding:12px 15px;text-align:left;font-family:var(--body);font-size:12.5px;line-height:1.4;color:var(--g700);cursor:pointer}
.dl-ft button:hover{background:var(--soft);color:var(--accent)}
.dv-tt tr.sub td{font-size:11px;color:var(--g500);padding-top:3px;padding-bottom:3px}
.dv-tt tr.net td{font-family:var(--disp);font-size:17px;font-weight:600;color:var(--dvb);padding:10px 0}
.dv-tt tr.net td.n{color:var(--dvb);font-size:17px}
.dv-tt tr.ttc td{border-top:1px solid var(--g300);font-weight:700;color:var(--dvd);font-size:13px;padding-top:9px}
.dv-cd{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:11px;font-size:10.5px;color:#444}
@media(max-width:640px){.dv-cd{grid-template-columns:1fr;gap:0}}
.dv-cd ul{list-style:none}
.dv-cd li{padding:4px 0 4px 15px;position:relative;line-height:1.65}
.dv-cd li::before{content:'';position:absolute;left:1px;top:10px;width:5px;height:5px;
  background:var(--dvb);transform:rotate(45deg)}
.dv-sg{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.dv-sg div{border:1px solid var(--g200);height:30mm;padding:11px 14px;
  font-family:var(--mono);font-size:8px;text-transform:uppercase;letter-spacing:.16em;color:var(--g400)}
.dv-mention{margin-top:16px;padding:9px 12px;background:var(--dvp);border-left:2px solid var(--dvb);
  font-size:10.5px;color:var(--dvd);line-height:1.6}
.dv-pd{margin-top:26px;padding-top:11px;border-top:1px solid var(--g200);
  font-size:8.5px;color:var(--g500);line-height:1.9;text-align:center}
.dv-pd b{color:var(--dvd)}

.ct-cv td{vertical-align:middle}
.jauge{display:inline-block;width:74px;height:5px;background:var(--g100);vertical-align:middle;margin-right:9px}
.jauge span{display:block;height:100%}
.jauge-v{font-family:var(--mono);font-size:10px;color:var(--g500);vertical-align:middle}

/* ─── espace client ─── */
.lay{display:flex;align-items:stretch;min-height:calc(100vh - 260px)}
.side{width:232px;flex-shrink:0;background:#fff;border-right:1px solid var(--g200);padding:26px 0}
.side-h{padding:0 24px 18px;border-bottom:1px solid var(--g200);margin-bottom:10px}
.side-h h3{font-size:15px;line-height:1.25;text-transform:uppercase}
.side-h p{font-family:var(--mono);font-size:9px;color:var(--g400);margin-top:6px;text-transform:uppercase;letter-spacing:.14em}
.side nav{list-style:none}
.side nav button{display:flex;align-items:center;gap:11px;padding:11px 24px;font-family:var(--mono);font-size:10px;font-weight:500;color:var(--g600);cursor:pointer;transition:all .15s;border:none;border-left:2px solid transparent;background:none;width:100%;text-align:left;text-transform:uppercase;letter-spacing:.13em}
.side nav button:hover{background:var(--soft);color:var(--ink)}
.side nav button.on{background:var(--accent-pale);color:var(--accent);border-left-color:var(--accent);font-weight:600}
.side nav svg{flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.7;width:14px;height:14px;opacity:.75}
.side-out{padding:16px 24px;border-top:1px solid var(--g200);margin-top:14px}
.side-out button{font-family:var(--mono);font-size:9px;color:var(--g400);cursor:pointer;background:none;border:none;padding:0;text-transform:uppercase;letter-spacing:.15em}
.side-out button:hover{color:var(--err)}
.main{flex:1;min-width:0;padding:34px 40px;background:var(--soft)}
@media(max-width:820px){
  .lay{flex-direction:column}
  .side{width:100%;border-right:none;border-bottom:1px solid var(--g200);padding:8px 0}
  .side-h{display:none}
  .side nav{display:flex;overflow-x:auto;padding:0 12px}
  .side nav button{padding:11px 15px;white-space:nowrap;border-left:none;border-bottom:2px solid transparent}
  .side nav button.on{border-left:none;border-bottom-color:var(--accent);background:none}
  .side-out{margin-top:0;border-top:none;padding:8px 24px}
  .main{padding:20px 18px}
}
.tab{display:none}
.tab.on{display:block}
.mh{font-family:var(--disp);font-size:24px;font-weight:600;color:var(--ink);text-transform:uppercase;letter-spacing:-.02em;margin-bottom:5px}
.mh+p{font-family:var(--mono);font-size:9.5px;color:var(--g500);margin-bottom:28px;text-transform:uppercase;letter-spacing:.13em}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:0;margin-bottom:28px;background:#fff;border:1px solid var(--g200)}
.stat{padding:22px 24px;border-right:1px solid var(--g200)}
.stat:last-child{border-right:none}
@media(max-width:820px){.stat{border-right:none;border-bottom:1px solid var(--g200)}}
.stat-l{font-family:var(--mono);font-size:8.5px;color:var(--g500);text-transform:uppercase;letter-spacing:.18em;margin-bottom:12px}
.stat-v{font-family:var(--disp);font-size:30px;font-weight:600;color:var(--ink);line-height:1;letter-spacing:-.025em}
.stat-s{font-family:var(--mono);font-size:9px;color:var(--g400);margin-top:9px;text-transform:uppercase;letter-spacing:.1em}
.bdg{display:inline-block;padding:4px 10px;font-family:var(--mono);font-size:8.5px;font-weight:600;text-transform:uppercase;letter-spacing:.14em}
.bdg.env{background:var(--accent-pale);color:var(--accent-dk)}
.ct{width:100%;border-collapse:collapse;font-size:12.5px;background:#fff}
.ct th{background:none;color:var(--g500);padding:0 14px 10px 0;text-align:left;font-family:var(--mono);font-size:8.5px;text-transform:uppercase;letter-spacing:.15em;font-weight:500;white-space:nowrap;border-bottom:1px solid var(--ink)}
.ct td{padding:13px 14px 13px 0;border-bottom:1px solid var(--g100);color:var(--g700)}
.ct tbody tr:last-child td{border-bottom:none}
.ct .num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:11.5px}
.ct th.num{text-align:right}
.ct tbody tr:hover{background:var(--soft)}
.tw2{overflow-x:auto;border:1px solid var(--g200);background:#fff;padding:20px 22px}
.login{max-width:440px;margin:56px auto 80px;background:#fff;border:1px solid var(--g200);border-top:3px solid var(--accent);padding:44px}
.login h2{font-size:27px;text-transform:uppercase;margin-bottom:10px;letter-spacing:-.02em}
.login>p{font-size:13.5px;color:var(--g600);margin-bottom:26px}
.demo{margin-top:22px;padding:18px;background:var(--soft);border:1px solid var(--g200)}
.demo h4{font-family:var(--mono);font-size:8.5px;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--g400);margin-bottom:11px}
.demo button{display:block;width:100%;text-align:left;background:none;border:none;padding:9px 0;font-family:var(--mono);font-size:11px;color:var(--g600);cursor:pointer;border-top:1px solid var(--g200)}
.demo button:first-of-type{border-top:none}
.demo button em{display:block;font-style:normal;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
.demo button:hover{color:var(--accent)}
.err{background:#FDEDEA;border-left:2px solid var(--err);color:#8C2A1E;padding:12px 15px;font-size:12.5px;margin-bottom:16px;display:none}
.err.on{display:block}
.note{background:var(--soft);border-left:2px solid var(--accent);padding:15px 20px;font-size:12.5px;line-height:1.7;color:var(--g700);margin-bottom:26px}
.note b{font-family:var(--disp);color:var(--ink);text-transform:uppercase;font-size:12.5px;letter-spacing:.02em}
.note button{background:none;border:none;color:var(--accent);font-weight:600;cursor:pointer;font-family:var(--body);font-size:12.5px;padding:0;text-decoration:underline}

/* ─── page contact ─── */
.ct-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:start;padding-bottom:70px}
@media(max-width:900px){.ct-grid{grid-template-columns:1fr;gap:38px;padding-bottom:44px}}
.ct-dl{border-top:1px solid var(--g200)}
.ct-dl>div{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--g200)}
@media(max-width:520px){.ct-dl>div{grid-template-columns:1fr;gap:5px}}
.ct-dl dt{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.16em;color:var(--g400);padding-top:3px}
.ct-dl dd{font-size:14px;color:var(--ink);line-height:1.7}
.ct-dl a{color:var(--accent)}
.ct-dl a:hover{text-decoration:underline}
.ct-rgpd{font-family:var(--mono);font-size:9px;color:var(--g400);margin-top:14px;text-align:center;text-transform:uppercase;letter-spacing:.13em}
.ct-map{background:var(--soft);border-top:1px solid var(--g200)}
.ct-map-hd{max-width:var(--max);margin:0 auto;padding:56px 36px 34px;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.ct-map-hd .eyebrow{display:block;margin-bottom:13px}
.ct-map-hd h2{font-size:clamp(24px,3vw,36px);text-transform:uppercase;letter-spacing:-.02em;line-height:1.06}
.ct-map-hd h2 em{font-style:normal;color:var(--accent)}
.ct-map-hd p{font-size:14px;color:var(--g600);margin-top:14px;max-width:460px}
@media(max-width:768px){.ct-map-hd{padding:40px 18px 26px}}
.ct-map-fr{height:440px;background:var(--g100);border-top:2px solid var(--ink)}
.ct-map-fr iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.25) contrast(1.03)}
@media(max-width:768px){.ct-map-fr{height:320px}}

/* ─── agent de démonstration ─── */
.ag-bubble{position:fixed;right:24px;bottom:24px;z-index:1050;display:inline-flex;align-items:center;gap:9px;
  padding:13px 20px;background:var(--navy);color:#fff;border:none;cursor:pointer;
  font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.16em;
  box-shadow:0 10px 30px rgba(8,28,49,.28);transition:all .2s}
.ag-bubble:hover{background:var(--accent)}
.ag-bubble.off{opacity:0;pointer-events:none;transform:translateY(10px)}
.ag-bubble svg{stroke:var(--accent)}
.ag-bubble:hover svg{stroke:#fff}
@media(max-width:600px){.ag-bubble{right:14px;bottom:14px;padding:11px 15px}.ag-bubble span{display:none}}
/* Sur téléphone, le tableau de sélection arrive après deux écrans de
   fiche : une barre collante y mène tant qu'il n'est pas en vue. */
.pr-sticky{display:none}
@media(max-width:768px){
  .pr-sticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:1040;padding:10px 14px;padding-right:76px;
    background:rgba(255,255,255,.96);border-top:1px solid var(--g200);backdrop-filter:blur(6px);
    transform:translateY(0);transition:transform .25s}
  .pr-sticky .cta{width:100%;justify-content:center}
  .pr-sticky.off{transform:translateY(110%)}
  body.pr-sticky-on .ag-bubble{bottom:70px}
}
.ag-panel{position:fixed;right:24px;bottom:24px;width:396px;max-width:calc(100vw - 28px);height:568px;max-height:calc(100vh - 90px);
  background:#fff;z-index:1051;display:none;flex-direction:column;box-shadow:0 18px 60px rgba(8,28,49,.3);
  border-top:3px solid var(--accent)}
.ag-panel.on{display:flex}
/* La fenêtre est ancrée en bas à droite : elle s'agrandit donc par son
   coin haut-gauche, le seul qui soit libre. La poignée reste discrète et
   s'éclaire au survol. */
.ag-rz{position:absolute;top:0;left:0;width:20px;height:20px;cursor:nwse-resize;z-index:2;
  background:linear-gradient(135deg,var(--g300) 0 2px,transparent 2px 5px,var(--g300) 5px 7px,transparent 7px);
  opacity:.7;transition:opacity .15s}
.ag-rz:hover{opacity:1;background:linear-gradient(135deg,var(--accent) 0 2px,transparent 2px 5px,var(--accent) 5px 7px,transparent 7px)}
body.ag-rzing{user-select:none;cursor:nwse-resize}
@media(max-width:600px){.ag-panel{right:14px;bottom:14px;height:calc(100vh - 100px)}.ag-rz{display:none}}
.ag-h{padding:16px 18px;display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--g200);flex-shrink:0}
.ag-h h3{font-size:15px;text-transform:uppercase;letter-spacing:-.01em}
.ag-s{font-family:var(--mono);font-size:8.5px;color:var(--g400);text-transform:uppercase;letter-spacing:.15em;margin-top:4px}
.ag-body{flex:1;overflow-y:auto;padding:16px 18px;background:var(--soft);display:flex;flex-direction:column;gap:9px}
.ag-m{font-size:13px;line-height:1.6;padding:10px 13px;max-width:88%}
.ag-a{background:#fff;border:1px solid var(--g200);color:var(--g800);align-self:flex-start}
.ag-u{background:var(--navy);color:#fff;align-self:flex-end}
.ag-m b{font-weight:600;color:var(--navy)}
.ag-u b{color:#fff}
.ag-k{font-family:var(--mono);font-size:12px;color:var(--accent);font-weight:600}
.ag-opts{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px;background:var(--soft)}
.ag-opts:not(:empty){padding:12px 18px}
.ag-o{border:1px solid var(--g300);background:#fff;color:var(--g700);padding:8px 13px;cursor:pointer;
  font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;transition:all .15s}
.ag-o:hover{border-color:var(--accent);background:var(--accent);color:#fff}
/* Ruban de propositions : la cote se compose en deux touches — la
   section, puis l'épaisseur — plutôt qu'en se rappelant la syntaxe. */
.ag-sg{display:flex;gap:6px;padding:0 18px;background:var(--soft);overflow-x:auto;scrollbar-width:thin}
.ag-sg:not(:empty){padding:10px 18px 0}
.ag-sg button{flex:0 0 auto;border:1px solid var(--g200);background:#fff;color:var(--g700);
  padding:6px 11px;cursor:pointer;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  white-space:nowrap;transition:all .15s}
.ag-sg button:hover{border-color:var(--accent);color:var(--accent)}
.ag-input{display:flex;gap:6px;padding:12px 18px;background:var(--soft);border-top:1px solid var(--g200)}
.ag-input input{flex:1;border:1px solid var(--g200);padding:10px 12px;font-family:var(--body);font-size:13px;outline:none;background:#fff}
.ag-input input:focus{border-color:var(--accent)}
.ag-input button{border:none;background:var(--accent);color:#fff;width:40px;cursor:pointer;font-size:16px}
.ag-input button:hover{background:var(--accent-dk)}
.ag-f{padding:10px 18px;border-top:1px solid var(--g200);font-family:var(--mono);font-size:8px;
  color:var(--g400);text-transform:uppercase;letter-spacing:.12em;line-height:1.7;flex-shrink:0}
@media print{.ag-bubble,.ag-panel{display:none!important}}


/* ─── atelier de configuration ─── */
.ac{border:1px solid var(--g200);background:#fff;margin-bottom:26px}
.ac-hd{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 18px;border-bottom:1px solid var(--g200);background:var(--g50)}
.ac-ti b{display:block;font-family:var(--disp);font-size:17px;color:var(--navy)}
.ac-ti span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--g400)}
.ac-hb{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ac-hb>*{margin:0}
.ac-hd .pl{display:flex;gap:6px;margin:0}
.ac-hd .pl button,.ac-pr,.ac-vb{height:38px;margin:0;box-sizing:border-box;line-height:1}
.ac-hd .pl button{display:inline-flex;align-items:center;padding:0 18px}
.ac-hd .pl button b{font-size:13.5px;line-height:1}
.ac-pr{font-family:var(--body);font-size:12.5px;padding:0 26px 0 11px;border:1px solid var(--g200);
  background:#fff;color:var(--ink)}
.ac-vb{display:inline-flex;align-items:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:0 14px;border:1px solid var(--g300);background:#fff;color:var(--g600);cursor:pointer}
.ac-vb:hover,.ac-vb.on{border-color:var(--accent);color:#fff;background:var(--accent)}
.ac-bd{display:flex;align-items:stretch;min-height:520px}
.ac-in{flex:0 0 320px;border-right:1px solid var(--g200);display:flex;flex-direction:column;min-width:0}
.ac-tb{display:flex;border-bottom:1px solid var(--g200)}
.ac-tb button{flex:1;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  padding:11px 4px;border:none;border-right:1px solid var(--g100);background:var(--g50);color:var(--g500);cursor:pointer}
.ac-tb button:last-child{border-right:none}
.ac-tb button.on{background:#fff;color:var(--navy);box-shadow:inset 0 -2px 0 var(--accent)}
.ac-pn{padding:16px;overflow-y:auto;flex:1}
.ac-dm{font-family:var(--mono);font-size:10.5px;color:var(--g400);margin-top:7px}
.ac-dd{border:1px dashed var(--g200);padding:11px 12px;margin-bottom:16px}
.ac-dd span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--g400)}
.ac-dd b{display:block;font-family:var(--mono);font-size:16px;color:var(--navy);margin:3px 0 2px}
.ac-dd em{font-style:normal;font-size:11px;color:var(--g400)}
.nf{margin-bottom:16px}
.nf-l{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--g400);margin-bottom:6px}
.nf-i{width:13px;height:13px;border:1px solid var(--g300);border-radius:50%;font-style:normal;font-size:9px;
  line-height:12px;text-align:center;color:var(--g400);cursor:help}
.nf-r{display:flex;align-items:stretch;border:1px solid var(--g200);background:#fff}
.nf-r input{flex:1;min-width:0;border:none;outline:none;font-family:var(--mono);font-size:15px;
  color:var(--navy);padding:8px 6px;text-align:right;background:none;-moz-appearance:textfield}
.nf-r input::-webkit-outer-spin-button,.nf-r input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.nf-r em{align-self:center;font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--g400);padding:0 8px 0 3px}
.nf-s{width:30px;border:none;background:var(--g50);color:var(--g500);font-size:15px;cursor:pointer}
.nf-s:hover{background:var(--navy);color:#fff}
.nf-g{display:block;width:100%;margin-top:6px}
.ac-vp{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.ac-vt{display:flex;gap:0;border-bottom:1px solid var(--g200)}
.ac-vt button{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  padding:10px 14px;border:none;border-right:1px solid var(--g100);background:#fff;color:var(--g500);cursor:pointer}
.ac-vt button.on{color:var(--navy);box-shadow:inset 0 -2px 0 var(--accent)}
.ac-cv{padding:16px 18px 4px;flex:1;min-height:0}
.ac-cv .rk-svg{margin-bottom:8px}
.ac-mt{display:flex;flex-wrap:wrap;gap:1px;background:var(--g100);border-top:1px solid var(--g200)}
.ac-mt div{flex:1 1 92px;background:#fff;padding:10px 12px}
.ac-mt b{display:block;font-family:var(--mono);font-size:17px;color:var(--navy)}
.ac-mt span{font-family:var(--mono);font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--g400)}
.ac-ck{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--g100);border-top:1px solid var(--g200)}
@media(max-width:760px){.ac-ck{grid-template-columns:1fr}}
.ck{display:flex;align-items:flex-start;gap:9px;background:#fff;padding:11px 14px;min-width:0}
.ck>div{flex:1;min-width:0;display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:12px}
.ck i{margin-top:5px}
.ck b{grid-column:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck em{grid-column:2;margin:0;justify-self:end}
.ck span{grid-column:1 / -1;margin-top:3px;line-height:1.45}
.ck i{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.ck-ok i{background:#2E7D5B}.ck-att i{background:#D08A1E}.ck-no i{background:#C0392B}
.ck b{display:block;font-size:12px;color:var(--ink);font-weight:600}
.ck span{font-family:var(--mono);font-size:10.5px;color:var(--g500)}
.ck em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--g300);white-space:nowrap}
.ac-va{border-top:1px solid var(--g200);padding:16px 18px 20px}
.ac-vh{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.ac-vh button{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  border:none;background:none;color:var(--g400);cursor:pointer}
.va{width:100%;border-collapse:collapse;font-size:13px}
.va th{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--g400);
  text-align:left;padding:0 10px 8px 0;border-bottom:1px solid var(--g200)}
.va th.n,.va td.n{text-align:right;padding-right:0}
.va td{padding:9px 10px 9px 0;border-bottom:1px solid var(--g100);color:var(--g600)}
.va td.n{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.va tr.on td{background:var(--soft);color:var(--navy)}
.va td em{font-style:normal;font-size:10.5px;margin-left:6px}
.va td em.up{color:#C0392B}.va td em.dn{color:#2E7D5B}
.va-b{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--g200);background:#fff;color:var(--g500);padding:5px 9px;cursor:pointer}
.va-b:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:900px){
  .ac-bd{flex-direction:column}
  .ac-in{flex:none;border-right:none;border-bottom:1px solid var(--g200)}
  .ac-pn{max-height:none}
}


.ac-ex{font-size:12px;color:var(--g500);line-height:1.6;margin-bottom:14px}
.ac-pn .rk-g{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.ac-pn .rk-f{flex:1 1 120px}


/* Les boutons segmentés de l'atelier se rangent en grille : quatre
   palettes ou trois alvéoles occupent la même largeur, et rien ne part
   seul à la ligne. */
/* Toutes les options de l'inspecteur ont la même cellule : une ligne
   pleine largeur, le nom à gauche, ce qu'il veut dire à droite. Rien
   ne part seul à la ligne, rien n'a une taille différente d'autre chose. */
.pl button b{font-family:inherit;font-weight:500}
.ac-pn .pl{display:grid;gap:5px;margin:0}
.ac-pn .pl-1{grid-template-columns:1fr}
.ac-pn .pl-2{grid-template-columns:1fr 1fr}
.ac-pn .pl-3{grid-template-columns:1fr 1fr 1fr}
.ac-pn .pl button{display:block;width:100%;margin:0;padding:8px 10px;text-align:left}
.ac-pn .pl-1 button{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ac-pn .pl-3 button{text-align:center}
.ac-pn .pl button b{display:block;font-family:var(--body);font-size:13px;font-weight:500;line-height:1.3}
.ac-pn .pl button i{display:block;font-style:normal;font-family:var(--mono);font-size:10px;
  color:var(--g400);white-space:nowrap;margin-top:2px}
.ac-pn .pl-1 button i{display:inline;margin:0}
.ac-pn .pl button.on i{color:rgba(255,255,255,.72)}

/* Tout tient dans la hauteur du plan : l'inspecteur défile chez lui,
   le dessin et le prix restent sous les yeux. */
.ac-in{max-height:78vh}
.ac-pn{min-height:0}
.ac-pn .rk-q{margin-bottom:16px;padding-bottom:14px}
.ac-pn .nf{margin-bottom:13px}
.ac-px{margin-top:16px;padding:14px 13px 2px}
.ac-pn .rk-q{margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--g100)}
.ac-pn .rk-q:last-child{border-bottom:none;padding-bottom:0}
.ac-pn .rk-l{margin-bottom:9px}
.ac-pn .rk-vi{min-width:0;width:100%}

/* Curseur : rail fin, poignée carrée, teinte de la maison. Le curseur
   n'est plus l'outil de saisie, il sert à balayer la plage. */
.nf-g{-webkit-appearance:none;appearance:none;height:3px;background:var(--g200);outline:none;padding:0}
.nf-g::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;
  background:#fff;border:2px solid var(--accent);cursor:pointer;margin-top:0}
.nf-g::-moz-range-thumb{width:14px;height:14px;background:#fff;border:2px solid var(--accent);
  border-radius:0;cursor:pointer}
.nf-g::-moz-range-track{height:3px;background:var(--g200)}
.nf{margin-bottom:20px}
.nf-r{border-color:var(--g300)}
.nf-r:focus-within{border-color:var(--accent)}
.nf-r input{font-size:16px;letter-spacing:.01em;padding:9px 4px}
.nf-r em{min-width:34px;text-align:left}
.nf-s{width:34px;font-size:16px;color:var(--g400);border-right:1px solid var(--g100)}
.nf-r .nf-s:last-child{border-right:none;border-left:1px solid var(--g100)}
.nf-s:hover{background:var(--accent);color:#fff}

/* Le nuancier tient sur la largeur de l'inspecteur. */
.ac-pn .nu-w>span{width:auto;display:block;padding:0 0 7px}
.ac-pn .nu{display:grid;grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:5px}
.ac-pn .nu button{width:100%;margin:0}


/* La carte du configurateur ne double plus le cadre de l'atelier : la
   barre du haut touche le bord, le chiffrage se range en dessous. */
.rk{background:#fff;padding:0;border:1px solid var(--g200);border-top:3px solid var(--accent)}
.ac{border:none;margin:0}
.ac-lo{padding:22px 26px 24px}
.ac-lo .rk-s:first-child{margin-top:0}


/* Ce qui fait le prix : même composant que les champs du dessus, sur
   un fond légèrement retiré pour dire que ces valeurs sont déduites. */
.ac-px{margin-top:22px;padding:18px 16px 4px;background:var(--g50);border:1px solid var(--g100)}
.ac-px .rk-l{margin-bottom:6px}
.ac-pn .rk-q>.ac-ex{margin:-2px 0 9px;font-size:11.5px;line-height:1.5;color:var(--g500)}
.ac-px .ac-ex{margin:0 0 16px;font-size:11.5px;line-height:1.5;color:var(--g500)}
.ac-px .nf{margin-bottom:16px}
.ac-px .nf-r{background:#fff}
.nf-f .nf-r{border-color:var(--accent)}
.nf-f .nf-l{color:var(--navy)}
.nf-x{margin-left:8px;padding:0;border:none;background:none;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent);cursor:pointer;text-decoration:underline}
.nf-x:hover{color:var(--navy)}

/* Le lien vers la gamme reprend un gris neutre : dans ce panneau,
   l'orange appartient à l'outil et à lui seul. */
.mg-gam:hover{color:var(--navy) !important}

/* Bandeau de résultat : quatre cellules égales sous le titre, la
   première marquée à l'accent parce que c'est le chiffre qu'on compare. */
.ac-top{position:sticky;top:111px;z-index:6;background:#fff}
.ac-rb{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--g200);background:#fff}
.ac-rb>div{padding:12px 18px;border-left:1px solid var(--g100);min-width:0}
.ac-rb>div:first-child{border-left:none;box-shadow:inset 3px 0 0 var(--accent)}
.ac-rb b{display:block;font-family:var(--disp);font-size:21px;line-height:1.2;color:var(--navy);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-rb .k1 b{color:var(--accent)}
.ac-rb b em{font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:.04em}
.ac-rb b i{font-style:normal;color:var(--g300)}
.ac-rb span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--g400);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:980px){.ac-top{top:77px}}
@media(max-width:760px){.ac-rb{grid-template-columns:1fr 1fr}
  .ac-rb>div:nth-child(3){border-left:none}}
@media(max-width:900px){.ac-top{position:static}.ac-in{max-height:none}}

/* Tableau de bord client : une cellule cliquable mène là où la donnée vit. */
.stat.cliq{cursor:pointer;transition:background .15s}
.stat.cliq:hover{background:var(--g50)}
.stat-v .u{font-size:14px;color:var(--g400);font-family:var(--mono)}
.ct td.mono{font-family:var(--mono);font-size:11.5px;color:var(--navy);font-weight:600}
.ct td .min,.min{font-family:var(--mono);font-size:10px;color:var(--g400);font-weight:400}
.ct tbody tr:hover{background:var(--g50)}
.vide{color:var(--g500);font-size:13px;margin:4px 0 0}
.bdg.ok{background:#E6F5EC;color:#146B3A}
.bdg.dmo{background:var(--g100);color:var(--g500);margin-left:8px;vertical-align:middle}
.lnk{background:none;border:none;padding:0;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);cursor:pointer;text-decoration:underline}
.lnk:hover{color:var(--navy)}
/* Trois jalons : commande, expédition, livraison. */
.etp{display:flex;gap:3px;margin-bottom:3px}
.etp i{display:block;width:22px;height:3px;background:var(--g200)}
.etp i.on{background:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:#fff;border:1px solid var(--g200);padding:9px 12px;cursor:pointer;text-align:left;
  font-size:13px;color:var(--ink)}
.chip span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--g400);margin-top:3px}
.chip:hover{border-color:var(--accent);color:var(--accent)}

/* La sélection : une fiche par ligne, sans défilement horizontal. */
.lrow2{display:flex;align-items:flex-start;flex-wrap:wrap;gap:7px;
  padding:12px 0;border-bottom:1px solid var(--g100)}
.lrow2:last-child{border-bottom:none}
.lrow2.manque{box-shadow:inset 3px 0 0 var(--accent);padding-left:11px}
.l2-n{font-family:var(--mono);font-size:10px;color:var(--g300);min-width:14px;padding-top:19px}
.l2-d{flex:0 1 230px;min-width:150px;padding-top:14px}
.l2-d b{display:block;font-family:var(--disp);font-size:14.5px;color:var(--ink);line-height:1.3}
.l2-d span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--g400);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.l2-q{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:0 0 auto;margin-left:auto}
.l2-ql{font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--g400)}
.l2-qi{display:flex;align-items:center;gap:4px}
.l2-eq{font-family:var(--mono);font-size:10px;color:var(--g400);margin-top:3px;text-align:right;
  width:100%;display:block}
.lrow2 .li-x{height:32px;width:22px;flex:0 0 22px;display:flex;align-items:center;justify-content:center;
  border:none;background:none;color:var(--g300);font-size:17px;cursor:pointer;padding:0}
.lrow2 .li-x:hover{color:var(--accent)}
.l2-q{width:216px}
.l2-qi{width:100%}
.l2-qi input{flex:1 1 auto;min-width:0;text-align:right;font-family:var(--mono);font-size:13px}
.l2-qi select{flex:0 0 76px;width:76px}
/* Toutes les options ont la même largeur : d'une ligne à l'autre les
   champs tombent au même endroit, sans tableau ni colonnes imposées. */
.l2-f{display:flex;flex-direction:column;gap:3px;min-width:0}
.l2-f>span{font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--g400)}
.l2-f select,.l2-f input,.l2-qi input,.l2-qi select{height:32px;box-sizing:border-box;
  font-size:12.5px;padding:0 6px;border:1px solid var(--g200);background:#fff;width:100%;
  font-family:var(--body);color:var(--ink)}
.l2-f>span,.l2-ql{display:block;height:13px;line-height:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l2-duo .duo select{width:100%}
.l2-duo .duo{display:flex;align-items:center;gap:5px}
.l2-duo .duo select{min-width:0}
@media(max-width:640px){
  .l2-d{flex:1 1 100%}
  .l2-f{flex:1 1 calc(50% - 5px) !important}
  .l2-q{margin-left:0;align-items:flex-start}
}

.ac-hd-nu{justify-content:flex-end}

/* La grille d'outils de l'accueil est retirée : seul le résultat de
   recherche garde son repère orange. */
.sr-o .sr-f{color:var(--accent)}
.vt-p{width:100%;height:32px;box-sizing:border-box;font-size:12.5px;padding:0 6px;
  border:1px solid var(--g200);background:#fff;font-family:var(--body);color:var(--ink);margin-top:2px}
.vt-na{display:block;font-family:var(--mono);font-size:9.5px;color:var(--g400);font-style:normal;margin-top:5px}

/* ═══ PAGE D'OUTIL ═══ Une seule construction pour les deux pages. */
.at-h{margin:26px 0 22px;max-width:780px}
.at-h h1{font-family:var(--disp);font-size:clamp(30px,4vw,44px);line-height:1.05;color:var(--navy);margin:10px 0 12px}
.at-h p{font-size:15px;line-height:1.65;color:var(--g600);margin:0}

/* ═══ PAGE D'OUTIL ═══
   Ouverture sombre, produit sur blanc, preuve entre les deux. Le rythme
   est celui de la page : de l'air avant, de l'air après, et une seule
   chose à lire à chaque étage. */

/* Ouverture. Fond marine, trame d'implantation en filigrane — le dessin
   que l'outil produit, posé derrière le titre. */
.ho{background:var(--navy);color:#fff;padding:clamp(56px,9vw,104px) 24px clamp(48px,7vw,82px);
  text-align:center;position:relative;overflow:hidden}
.ho::before{content:'';position:absolute;inset:0;opacity:.16;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 10%,transparent 72%);
  mask-image:radial-gradient(ellipse at 50% 40%,#000 10%,transparent 72%)}
.ho-in{position:relative;max-width:900px;margin:0 auto}
.ho-ey{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent)}
.ho h1{font-family:var(--disp);font-size:clamp(38px,7vw,80px);line-height:.98;letter-spacing:-.03em;
  color:#fff;margin:18px auto 20px;max-width:15ch}
.ho p{font-size:clamp(16px,1.9vw,21px);line-height:1.5;color:rgba(255,255,255,.76);
  margin:0 auto 34px;max-width:38ch}
.ho-a{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap}
.ho-b1{background:var(--accent);color:#fff;border:none;padding:15px 30px;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.ho-b1:hover{background:#B8560F}
.ho-b2{background:none;border:1px solid rgba(255,255,255,.3);color:#fff;padding:15px 24px;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.ho-b2:hover{border-color:#fff}

/* Preuve. Trois faits sur le blanc, séparés par des filets, rien de plus. */
.ho-pr{padding:clamp(30px,4vw,46px) 0;border-bottom:1px solid var(--g100)}
.ho-pr-g{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.ho-pr-g>div{padding:0 26px;border-left:1px solid var(--g200);text-align:center}
.ho-pr-g>div:first-child{border-left:none}
.ho-pr-g b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--navy);margin-bottom:7px}
.ho-pr-g span{font-size:13.5px;line-height:1.55;color:var(--g600)}

/* Le produit. Une étiquette discrète, puis l'outil, seul. */
.ho-lab{margin:clamp(34px,5vw,58px) 0 14px;font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--g400);text-align:center}

/* Ce qui sort, comment ça se passe, ce que ça ne fait pas. */
.tp-p{padding:clamp(50px,7vw,90px) 0 clamp(40px,5vw,64px)}
.tp-tt{text-align:center;margin:0 0 clamp(26px,3.5vw,44px)}
.tp-tt2{margin-top:clamp(56px,7vw,92px)}
.tp-tt .ho-ey{color:var(--accent)}
.tp-tt h2{font-family:var(--disp);font-size:clamp(26px,3.4vw,42px);line-height:1.06;letter-spacing:-.02em;
  color:var(--navy);margin:12px auto 0;max-width:20ch}
.tp-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:20px}
.tp-c{background:#fff;border:1px solid var(--g200);padding:26px 24px 20px;transition:box-shadow .2s,border-color .2s}
.tp-c:hover{border-color:var(--g300);box-shadow:0 12px 30px rgba(13,39,66,.07)}
.tp-c i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--accent)}
.tp-c b{display:block;font-family:var(--disp);font-size:19px;color:var(--navy);line-height:1.22;margin:12px 0 8px}
.tp-c>span{font-size:14px;line-height:1.55;color:var(--g600)}
.tp-c details{margin-top:16px;border-top:1px solid var(--g100);padding-top:12px}
.tp-c summary{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);cursor:pointer;list-style:none}
.tp-c summary::-webkit-details-marker{display:none}
.tp-c summary::after{content:' +';font-family:var(--body)}
.tp-c details[open] summary::after{content:' –'}
.tp-c details p{margin:10px 0 0;font-size:13px;line-height:1.6;color:var(--g600)}
.tp-e{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));
  gap:clamp(22px,3vw,38px)}
.tp-e li{text-align:center}
.tp-e i{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;font-style:normal;
  font-family:var(--disp);font-size:15px;color:var(--navy);border:1px solid var(--g200);margin-bottom:14px}
.tp-e span{display:block;font-size:14px;line-height:1.6;color:var(--g600);max-width:34ch;margin:0 auto}
.tp-lim{margin:clamp(46px,6vw,78px) auto 0;max-width:62ch;text-align:center;font-size:13px;line-height:1.7;
  color:var(--g500);border-top:1px solid var(--g100);padding-top:22px}

/* L'appel. */
.tp-cta{background:var(--navy);padding:clamp(34px,4.5vw,52px) 0}
.tp-cta-in{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.tp-cta-in b{display:block;font-family:var(--disp);font-size:clamp(19px,2.2vw,26px);color:#fff;line-height:1.2;
  letter-spacing:-.015em}
.tp-cta-in span{display:block;font-size:14px;color:rgba(255,255,255,.7);margin-top:7px;max-width:52ch}
@media(max-width:760px){
  .ho-pr-g{grid-template-columns:1fr;gap:22px}
  .ho-pr-g>div{border-left:none;padding:0}
}

/* Bande d'appel sur la page de gamme : l'outil vit ailleurs, mais celui
   qui arrive par le catalogue doit le trouver. */
.bd-o{display:flex;align-items:center;gap:16px;width:100%;text-align:left;cursor:pointer;
  background:var(--accent-pale);border:1px solid rgba(226,113,29,.28);border-top:3px solid var(--accent);
  padding:20px 22px;margin:0 0 30px}
.bd-o:hover{background:#fff}
.bd-o-i{flex:0 0 46px;height:46px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid rgba(226,113,29,.3);color:var(--accent)}
.bd-o-i svg{width:25px;height:25px}
.bd-o-t{flex:1;min-width:0}
.bd-o-t b{display:block;font-family:var(--disp);font-size:19px;color:var(--navy);line-height:1.25}
.bd-o-t em{display:block;font-style:normal;font-size:13.5px;color:var(--g600);margin-top:4px;line-height:1.55}
.bd-o-c{flex:0 0 auto;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap}
@media(max-width:640px){.bd-o{flex-wrap:wrap}.bd-o-c{margin-left:62px}}

/* L'outil en tête de menu : présent comme un produit, distinct comme un
   service. Il occupe toute la largeur du panneau, au-dessus des familles. */
.hd-mega:has(.mg-outil){min-width:352px}
.mg-outil{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:var(--accent-pale);border:1px solid rgba(226,113,29,.28);padding:12px 12px;margin-bottom:8px}
.mg-outil+.mg-outil{margin-top:-2px}
.mg-outil:last-of-type{margin-bottom:16px}
.mg-outil:hover{background:#fff;border-color:var(--accent)}
.mg-o-i{flex:0 0 30px;height:30px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid rgba(226,113,29,.3);color:var(--accent)}
.mg-o-i svg{width:17px;height:17px}
.mg-o-t{flex:1;min-width:0}
.mg-o-t b{display:block;font-family:var(--body);font-size:13.5px;font-weight:600;color:var(--navy);
  line-height:1.3;white-space:nowrap}
.mg-o-t em{display:block;font-style:normal;font-size:11px;color:var(--g500);margin-top:2px;line-height:1.35}
.mg-o-f{color:var(--accent);font-size:14px;flex:0 0 auto}

/* ─── notification ─── */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--ink);color:#fff;padding:14px 26px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;z-index:2000;box-shadow:0 8px 30px rgba(8,28,49,.3);transition:transform .3s;pointer-events:none;max-width:90vw;text-align:center}
.toast.on{transform:translateX(-50%) translateY(0)}

/* ─── impression ─── */
.pr-hd{display:none}
@media print{
  .topline,.topbar,.hd,.ov,.drw,.so,.ft,.band,.toast,.no-pr,.side,.gbanner{display:none!important}
  .pg{padding-top:0!important}
  body{background:#fff}
  .main{padding:0!important;background:#fff}
  .pr-hd{display:flex!important;justify-content:space-between;align-items:flex-end;margin-bottom:24px;padding-bottom:14px;border-bottom:2px solid #0B2440}
  .pr-hd img{height:26px}
  .pr-hd .inf{text-align:right;font-family:'IBM Plex Mono',monospace;font-size:8px;color:#666;line-height:1.8;text-transform:uppercase;letter-spacing:.1em}
  .ct th,.dt thead th{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .card,.tw2{border:none;padding:0}
  .bc,.ph{display:none!important}
  .dv{border:none}
  .dv-in{padding:0}
  .dv-l thead th,.dv-l tr.grp td,.dv-l tbody tr:nth-child(even) td{
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .dv-l tr{break-inside:avoid}
  .dv-sg,.dv-cd,.dv-fx,.dv-px{break-inside:avoid}
}