/* ════════════════════════════════════════════════════════════════
   PalletLab — système visuel du site vitrine
   Direction : neutre. Le fond est un gris à peine chaud, tramé du motif
   « plateau de palette » (planches et pointes, choix de Kevin le
   28/09/2026) ; la seule vraie couleur de la page vient du BOIS des rendus 3D produits
   par le vrai moteur PalletLab. Composition ample, une idée par
   écran, le produit en héros — la méthode d'Apple appliquée à un
   outil industriel, sans en copier la peau.
   ════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Arimo';
  src:url('fonts/arimo-latin-var.woff2') format('woff2');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Neutres purs (chroma 0) : aucune teinte parasite */
  --face:#FFFFFF;
  --face-2:#F4F5F7;
  --fond:#F8F7F5;            /* fond de page : gris à peine chaud, sous le motif */
  --fond-2:rgba(40,30,15,.035); /* bande alternée : le même fond un ton plus bas, motif visible */
  /* Motif « plateau de palette » (28/09/2026, choix de Kevin, dans l'esprit de la grille
     de points de base44.com) : une palette vue de dessus, planches de 48 px et trois
     pointes sur chaque traverse, tous les 120 px. Moins d'un kilo-octet, rien à charger.
     Les cartes restent sur --face (blanc) : elles se détachent du fond. */
  --motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'240'%20height%3D'48'%3E%3Crect%20y%3D'47'%20width%3D'240'%20height%3D'1'%20fill%3D'%23ECE9E4'%2F%3E%3Cg%20fill%3D'%23D4CEC6'%3E%3Crect%20x%3D'24'%20y%3D'11'%20width%3D'1.6'%20height%3D'1.6'%2F%3E%3Crect%20x%3D'24'%20y%3D'23'%20width%3D'1.6'%20height%3D'1.6'%2F%3E%3Crect%20x%3D'24'%20y%3D'35'%20width%3D'1.6'%20height%3D'1.6'%2F%3E%3Crect%20x%3D'144'%20y%3D'11'%20width%3D'1.6'%20height%3D'1.6'%2F%3E%3Crect%20x%3D'144'%20y%3D'23'%20width%3D'1.6'%20height%3D'1.6'%2F%3E%3Crect%20x%3D'144'%20y%3D'35'%20width%3D'1.6'%20height%3D'1.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --night:#0B0C0E;
  --ink:#16181B;
  --ink-2:#5C6066;          /* 6,4:1 sur blanc — AA confortable */
  --ink-night:#F2F3F4;
  --ink-2-night:#A9ADB3;    /* 8,4:1 sur --night */
  --rule:#DEE0E3;
  --rule-2:#B9BEC4;         /* filet appuyé : puces, soulignés */
  --rule-night:#2A2D31;
  /* Bleu acier de la marque (celui du logiciel et du logo Palletization). Le
     site reste neutre : cette teinte ne sert qu'à MONTRER une différence —
     quel logiciel porte quelle offre — jamais à décorer. */
  --accent:#2F6DA8;
  --accent-fond:#EDF2F8;
  /* Bois : la teinte des palettes rendues par le moteur (#A96C39), éclaircie
     pour tenir en filet d'un pixel sans crier. Elle ne sert qu'au CONTOUR des
     cadres et des cartes — le fond et le texte restent neutres. */
  --bois:#C9A278;
  --bois-fonce:#A96C39;
  --wrap:1120px;
  --r:14px;
  /* Rythme vertical : c'est lui qui fait la respiration */
  --band:clamp(62px,7.5vw,112px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--fond) var(--motif) 0 0/240px 48px repeat;
  color:var(--ink);
  font:400 17px/1.6 'Arimo',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}

/* ── Trame ───────────────────────────────────────────────── */
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.band{padding-block:var(--band)}
.band-2{background:var(--fond-2)}
.band-night{background:var(--night);color:var(--ink-night)}
.band-night .lead,.band-night .cap{color:var(--ink-2-night)}

/* ── Typographie : échelle affirmée, plafonnée à ~84px ──── */
/* overflow-wrap : filet de sécurité pour les mots composés (allemand,
   néerlandais) plus larges qu'un écran de téléphone. Il ne coupe un mot que
   s'il ne tient sur aucune ligne ; les césures voulues passent par ­
   dans les dictionnaires (i18n/*.json). */
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-0.028em;text-wrap:balance;overflow-wrap:break-word}
.display{font-size:clamp(2.5rem,6.2vw,5.25rem);line-height:1.04}
h2{font-size:clamp(1.9rem,3.9vw,3.15rem);line-height:1.1}
h3{font-size:clamp(1.15rem,1.5vw,1.35rem);line-height:1.25;letter-spacing:-0.015em}
.lead{
  margin:22px 0 0;font-size:clamp(1.0625rem,1.45vw,1.3125rem);
  line-height:1.55;color:var(--ink-2);max-width:62ch;text-wrap:pretty;
}
.center{text-align:center}
.center .lead{margin-inline:auto}
/* Un paragraphe .lead a une largeur maximale : centré par son propre .center
   ou posé dans un .hero, il doit aussi se centrer en tant que bloc — sinon le
   texte est centré dans une boîte collée à gauche (Présentation, 14/09/2026). */
.lead.center,.hero .lead{margin-inline:auto}
.cap{font-size:14px;line-height:1.5;color:var(--ink-2)}

/* ── Boutons : plein encre, aucune couleur de marque ────── */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 26px;border-radius:980px;   /* pilule : la seule rondeur marquée */
  font-size:16px;font-weight:600;text-decoration:none;
  border:1px solid transparent;transition:background .18s,color .18s,border-color .18s;
}
.btn-solid{background:var(--ink);color:#fff}
.btn-solid:hover{background:#000}
.btn-ghost{border-color:var(--rule);color:var(--ink)}
.btn-ghost:hover{background:var(--face-2)}
.band-night .btn-solid{background:#fff;color:var(--night)}
.band-night .btn-solid:hover{background:#E8E9EA}
.band-night .btn-ghost{border-color:var(--rule-night);color:var(--ink-night)}
.band-night .btn-ghost:hover{background:#17191C}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.center .btns{justify-content:center}

/* Lien texte avec chevron — l'affordance d'Apple, en neutre */
.more{
  display:inline-flex;align-items:center;gap:5px;margin-top:18px;
  font-size:16px;font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--rule-2);
}
.more:hover{text-decoration:underline;text-underline-offset:4px}
.more::after{content:'›';font-size:19px;line-height:1;transform:translateY(-1px)}

/* ── Barre de navigation ─────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(248,247,245,.86);backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--rule);
}
.nav-in{display:flex;align-items:center;gap:26px;height:52px}
.nav-logo{display:block;width:118px;flex-shrink:0}
.nav-logo svg{width:100%}
/* Jamais de retour à la ligne : la barre fait 52 px de haut, un lien qui
   passe à la ligne disparaît purement et simplement. Sur petit écran la
   rangée défile horizontalement, tous les liens restent atteignables. */
.nav-links{display:flex;gap:18px;margin-left:auto;flex-wrap:nowrap;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{font-size:14px;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink);font-weight:600}
/* « Essai gratuit » en bouton bleu avec une flèche, en haut à droite de toutes
   les pages (demande de Kevin du 07/10/2026). La flèche est un masque SVG : le
   lien garde son seul texte, donc sa traduction dans les sept langues. */
.nav-links{align-items:center}
.nav-links a.nav-trial{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 16px;border-radius:980px;background:var(--accent);color:#fff;font-weight:600;transition:background .18s}
.nav-links a.nav-trial::after{content:"";width:15px;height:15px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s cubic-bezier(.22,1,.36,1)}
.nav-links a.nav-trial:hover{background:#24588A;color:#fff}
/* Toujours visible : sur les pages au menu long, les autres liens défilent dessous. */
.nav-links a.nav-trial{position:sticky;right:0;margin-left:4px;box-shadow:-14px 0 10px 0 #F8F7F5}
/* Le bouton mène au même endroit que « Téléchargement » : ce lien-là ne reste que dans le menu mobile. */
.nav-links a[href="https://telechargement.palletlab.fr/"]:not(.nav-trial){display:none}
.nav-links a.nav-trial:hover::after{transform:translateX(3px)}
.nav-links a.nav-trial:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.nav-links a.nav-trial,.nav-links a.nav-trial::after{transition:none}.nav-links a.nav-trial:hover::after{transform:none}}
/* Sélecteur de langue : un bouton sobre (« FR » et un chevron) qui ouvre la
   liste des langues, chacune écrite dans sa propre langue. Sept paires de
   capitales en rangée prenaient la place des liens de navigation, qui défilent
   déjà sur petit écran. La liste est un popover natif : elle se ferme d'un clic
   ailleurs ou avec Échap, sans JavaScript (le site n'en charge aucun). Placée
   sous le bouton par l'ancrage CSS quand le navigateur le connaît, sinon sous
   le bord droit de la barre, où se trouve toujours le bouton. La langue
   affichée est un <span>, pas un lien : cliquer dessus rechargerait la même
   page. Balisage : i18n/generer.js, selecteurLangue(). */
.nav-lang{flex-shrink:0;align-self:center;margin-left:18px}
.nav-lang-btn{
  display:inline-flex;align-items:center;gap:7px;padding:4px 8px;
  border:1px solid var(--rule);border-radius:4px;background:transparent;color:var(--ink);
  font:inherit;font-size:12px;font-weight:600;letter-spacing:.04em;line-height:1.2;cursor:pointer;
  anchor-name:--nav-lang;
}
.nav-lang-btn::after{
  content:'';width:5px;height:5px;margin-top:-3px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);
}
.nav-lang-btn:hover{background:var(--face-2)}
.nav-lang-liste{display:none}
.nav-lang-liste:popover-open{
  display:flex;flex-direction:column;gap:2px;
  position:fixed;inset:auto;margin:0;top:64px;right:max(20px,calc((100vw - var(--wrap)) / 2));
  min-width:190px;padding:6px;
  /* Plat, comme tout le site (DESIGN.md, « Règle de la fenêtre » : l'ombre est
     réservée aux captures du logiciel). Le filet suffit à détacher la liste. */
  background:var(--face);color:var(--ink);border:1px solid var(--rule-2);border-radius:4px;
}
@supports (anchor-name:--a){
  .nav-lang-liste:popover-open{position-anchor:--nav-lang;top:calc(anchor(bottom) + 8px);right:anchor(right)}
}
.nav-lang-liste a,.nav-lang-liste .on{
  display:flex;align-items:baseline;gap:10px;padding:8px 10px;border-radius:3px;
  color:var(--ink-2);text-decoration:none;font-size:14px;line-height:1.3;white-space:nowrap;
}
.nav-lang-liste b{width:22px;flex-shrink:0;font-size:11px;font-weight:600;letter-spacing:.04em}
.nav-lang-liste a:hover{background:var(--face-2);color:var(--ink)}
.nav-lang-liste .on{background:var(--face-2);color:var(--ink);font-weight:600;cursor:default}
/* Navigateur sans popover (antérieur à 2024) : pas de bouton, la liste s'affiche
   en rangée de capitales, comme l'ancien sélecteur. */
@supports not selector(:popover-open){
  .nav-lang-btn{display:none}
  .nav-lang-liste{display:flex;border:1px solid var(--rule);border-radius:4px;overflow:hidden}
  .nav-lang-liste a,.nav-lang-liste .on{padding:3px 6px;border-radius:0;font-size:12px}
  .nav-lang-liste .nom{display:none}
  .nav-lang-liste b{width:auto}
}

/* ── Héros ───────────────────────────────────────────────── */
.hero{padding-block:clamp(64px,9vw,120px) clamp(48px,7vw,96px);text-align:center}
.eyebrow{
  display:inline-block;margin-bottom:20px;
  font-size:14px;font-weight:600;color:var(--ink-2);
}
.hero-art{margin-top:clamp(40px,6vw,72px)}
.hero-art svg{margin-inline:auto;width:min(100%,860px)}

/* ── Le produit en héros : grand, centré, sur fond nu ────── */
.stage{margin-top:clamp(36px,5vw,64px)}
.stage svg{margin-inline:auto;width:min(100%,720px)}
.stage-cap{margin-top:20px;text-align:center}

/* ── Tuiles de familles (l'architecture qu'on prend à Apple) */
.tiles{
  display:grid;gap:20px;margin-top:clamp(40px,5vw,64px);
  grid-template-columns:repeat(auto-fit,minmax(246px,1fr));
}
.tile{
  display:flex;flex-direction:column;
  background:var(--face);border:1px solid var(--bois);border-radius:var(--r);
  padding:30px 28px 26px;text-decoration:none;color:inherit;
  transition:border-color .18s,transform .18s;
}
.band-2 .tile{background:var(--face)}
.tile:hover{border-color:var(--bois-fonce);transform:translateY(-2px)}
/* Hauteur fixe : sans elle, chaque rendu ayant sa propre silhouette, les
   titres des quatre familles ne s'alignaient pas d'une tuile à l'autre. */
.tile-art{margin:6px 0 20px;height:170px;display:flex;align-items:center;justify-content:center}
.tile-art svg{width:100%;max-height:170px}
.tile h3{margin-bottom:7px}
.tile .cap{flex:1}
.tile .more{margin-top:16px}

/* ── Fiche technique : la zone dense, en bas de page ─────── */
.specs{
  display:grid;gap:0 44px;margin-top:clamp(36px,4vw,56px);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.spec{
  display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:16px;
  padding:15px 0;border-top:1px solid var(--rule);
  font-size:15px;line-height:1.5;
}
.spec dt{color:var(--ink-2)}
.spec dd{margin:0;font-weight:600}
.band-night .spec{border-top-color:var(--rule-night)}

/* ── Triptyque de points (sous une section) ──────────────── */
.trio{
  display:grid;gap:34px;margin-top:clamp(44px,5vw,68px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.trio h3{margin-bottom:9px}
.trio p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.band-night .trio p{color:var(--ink-2-night)}

/* ── Chiffres (sobres : pas de gros compteurs marketing) ── */
.figures{
  display:grid;gap:34px;margin-top:clamp(40px,5vw,60px);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.fig-v{font-size:clamp(2.1rem,3.4vw,2.9rem);font-weight:700;letter-spacing:-0.03em;line-height:1.05}
.fig-k{margin-top:10px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.band-night .fig-k{color:var(--ink-2-night)}

/* ── Captures logiciel : la seule ombre du site ──────────── */
.shots{display:grid;gap:26px;margin-top:clamp(40px,5vw,64px);grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.shot img{
  width:100%;border-radius:var(--r);border:1px solid var(--bois);
  box-shadow:0 1px 1px rgba(11,12,14,.05),0 22px 48px -18px rgba(11,12,14,.28);
}
.shot .cap{margin-top:14px}

/* ── Capture pleine largeur (page Présentation) ───────────── */
.frame{margin:0}
.frame img,.frame video{
  width:100%;height:auto;display:block;border-radius:var(--r);border:1px solid var(--bois);
  box-shadow:0 1px 1px rgba(11,12,14,.05),0 22px 48px -18px rgba(11,12,14,.28);
  background:var(--face-2);
}
.frame figcaption{margin-top:16px;font-size:14px;line-height:1.5;color:var(--ink-2);text-align:center}
.band-night .frame img,.band-night .frame video{border-color:var(--rule-night)}
.band-night .frame figcaption{color:var(--ink-2-night)}
/* Titre + chapô d'un écran présenté */
.screen{max-width:64ch;margin-inline:auto;text-align:center;margin-bottom:clamp(28px,3.5vw,44px)}
.screen h2{margin-bottom:14px}
.screen p{margin:0;font-size:clamp(1rem,1.35vw,1.1875rem);line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.band-night .screen p{color:var(--ink-2-night)}

/* ── FAQ ─────────────────────────────────────────────────── */
.faq{margin-top:clamp(36px,4vw,56px);max-width:820px;margin-inline:auto}
.faq details{border-top:1px solid var(--rule);padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:20px 0;cursor:pointer;font-size:17px;font-weight:600;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:24px;font-weight:400;color:var(--ink-2);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 22px;margin:0;color:var(--ink-2);max-width:68ch}

/* ── Texte long (À propos, mentions légales) ──────────────
   Le reste du site est centré et court ; ces pages sont de la
   lecture suivie : alignées à gauche, mesure bornée. */
.prose{max-width:68ch;margin-inline:auto}
.prose h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:clamp(44px,5vw,64px) 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{margin:30px 0 8px}
.prose p{margin:0 0 18px;color:var(--ink-2);text-wrap:pretty}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.prose ul{margin:0 0 18px;padding-left:20px;color:var(--ink-2)}
.prose li{margin-bottom:9px}
.prose li::marker{color:var(--rule-2)}
/* Engagements / jalons : un filet haut, comme la fiche technique */
.prose .item{border-top:1px solid var(--rule);padding:20px 0 4px}
.prose .item h3{margin-top:0}
.prose .item p:last-child{margin-bottom:16px}
.prose .when{font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:4px}

/* ── Pied de page ────────────────────────────────────────── */
.foot{border-top:1px solid var(--rule);padding-block:44px;font-size:14px;color:var(--ink-2)}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline;text-underline-offset:3px}
.foot-in{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}

/* ── Fil d'Ariane (pages familles) ──────────────────────── */
.crumb{padding-top:28px;font-size:14px;color:var(--ink-2)}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline;text-underline-offset:3px}

/* ── Accessibilité ──────────────────────────────────────── */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:3px}
.band-night :focus-visible{outline-color:#fff}
.skip{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;
  padding:12px 18px;z-index:100;text-decoration:none;border-radius:0 0 8px 0;
}
.skip:focus{left:0}

/* ── Révélation : le contenu est VISIBLE par défaut ──────
   L'animation n'est ajoutée que si JS confirme un navigateur
   capable. Sans JS, ou dans un moteur de rendu sans rAF, rien
   n'est masqué : la page ne peut pas se livrer blanche. */
.js-anim .rise{opacity:0;transform:translateY(18px)}
.js-anim .rise.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js-anim .rise{opacity:1!important;transform:none!important}
}

@media (max-width:640px){
  .nav-links{gap:16px}
  .nav-links a{font-size:13px}
  .spec{grid-template-columns:1fr;gap:4px}
  .spec dd{margin-bottom:2px}
  /* Sur téléphone, la barre ne fait que 350 px et ses liens défilent déjà à
     l'horizontale : on resserre les écarts et le bouton de langue. */
  .nav-in{gap:14px}
  .nav-lang{margin-left:10px}
  .nav-lang-btn{padding:3px 6px;font-size:11px}
}

/* ── Tableau de référence (pages de données) ─────────────────────
   Même écriture que .spec : des filets horizontaux, aucun cadre ni
   fond. .tbl-wrap laisse le tableau défiler seul sur mobile plutôt
   que d'imposer un défilement horizontal à toute la page. */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:clamp(30px,3.5vw,44px)}
.tbl{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;min-width:420px}
.tbl th{text-align:left;font-weight:600;color:var(--ink-2);padding:0 18px 12px 0;
        border-bottom:1px solid var(--rule-2);white-space:nowrap}
.tbl td{padding:14px 18px 14px 0;border-top:1px solid var(--rule)}
.tbl th:last-child,.tbl td:last-child{padding-right:0}
.tbl tbody tr:first-child td{border-top:0}
.band-night .tbl th{color:var(--ink-2-night);border-bottom-color:var(--rule-night)}
.band-night .tbl td{border-top-color:var(--rule-night)}

/* ── Formulaire de candidature alpha (section sombre) ────────────
   Volontairement sobre : quatre champs empilés, largeur de lecture
   contenue, aucun cadre décoratif. Il vit sur .band-night, donc les
   champs sont des surfaces claires sur fond nuit. */
.cand{max-width:440px;margin:34px auto 0;text-align:left}
.cand input{width:100%;margin-bottom:10px;padding:13px 15px;font:inherit;font-size:15px;
  color:var(--ink);background:var(--face);border:1px solid transparent;border-radius:10px}
.cand input::placeholder{color:var(--ink-2)}
.cand input:focus{outline:2px solid var(--face);outline-offset:2px}
.cand-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cand-duo input{margin-bottom:10px}
.cand button{width:100%;margin-top:4px;cursor:pointer}
.cand-msg{min-height:20px;margin-top:12px;font-size:14px;line-height:1.5;color:var(--ink-night)}
.cand-msg.ko{color:#FFB4AC}
@media (max-width:520px){ .cand-duo{grid-template-columns:1fr} }
/* Les trois étapes de l'essai gratuit (27/09/2026) : une vraie séquence,
   d'où la numérotation. L'essai se lance dans le logiciel, plus de formulaire. */
.essai-etapes{max-width:640px;margin:30px auto 0;padding:0;list-style:none;counter-reset:etape;text-align:left}
.essai-etapes li{counter-increment:etape;position:relative;padding:13px 0 13px 44px;border-top:1px solid var(--rule-night);font-size:16px;line-height:1.5;color:var(--ink-night)}
.essai-etapes li:last-child{border-bottom:1px solid var(--rule-night)}
.essai-etapes li::before{content:counter(etape);position:absolute;left:0;top:12px;width:26px;height:26px;border:1px solid var(--ink-2-night);border-radius:4px;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}

/* ── Page Palletisation : compositions locales ── */
.duo{display:grid;gap:26px;margin-top:clamp(36px,5vw,64px);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));text-align:left}
  .duo .tile{cursor:default}
  .duo .tile:hover{transform:none}
  .tile .badge{display:inline-block;font-size:13px;color:var(--ink-2);border:1px solid var(--rule);border-radius:980px;padding:2px 10px;margin-bottom:12px}
  .frame.wide img{width:min(100%,1120px)}
  .bullets{list-style:none;margin:28px auto 0;padding:0;max-width:720px;text-align:left}
  .bullets li{padding:12px 0;border-top:1px solid var(--rule);font-size:17px;line-height:1.5;color:var(--ink)}
  .bullets li:last-child{border-bottom:1px solid var(--rule)}
  .band-night .bullets li{border-color:var(--rule-night);color:var(--ink-night)}
  .bullets b{font-weight:700}
  .hero .frame{margin-top:clamp(40px,6vw,72px)}
  .honest{max-width:720px;margin:0 auto;text-align:left}
  .honest p{margin:0 0 14px}

/* Champ piège des formulaires : hors écran pour les humains, rempli par les robots. */
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden;opacity:0}

/* ── Tarifs (générés par build-pages.js depuis offres.mjs et tarifs.json, 28/09/2026)
   Deux cartes pour les deux métiers, un bandeau pour les offres groupées, puis
   le comparatif. Écriture resserrée : tout le détail reste, en moins de hauteur. */
.tarification .tarifs-intro{max-width:760px;margin-bottom:20px}
.tarification .tarifs-intro .cap{margin:0 0 6px}
.tarification .tarifs-intro h2{font-size:clamp(1.55rem,2.5vw,2.05rem);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.tarification .tarifs-intro .lead,.tarification>.wrap>.lead{font-size:15px;line-height:1.55;margin-top:10px;max-width:760px}
.tarification>.wrap>h2{margin-bottom:0}
.facturation{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;border:1px solid var(--rule);border-radius:8px;padding:11px 16px;margin:22px 0 20px;background:var(--face);min-width:0}
.facturation legend{float:left;font-size:13px;font-weight:600;padding:0;margin-right:4px}
.facturation label{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13.5px;cursor:pointer}
.facturation input{accent-color:var(--ink);width:16px;height:16px;margin:0}
.facturation label span{font-size:11.5px;color:var(--ink-2);border-left:1px solid var(--rule);padding-left:9px}
/* La facturation cochée décide de ce qui s'affiche : les deux sont dans la page,
   aucun texte ne vit dans un script (il échapperait à la traduction). */
.tarification:has(input[value="annuel"]:checked) .fm{display:none!important}
.tarification:not(:has(input[value="annuel"]:checked)) .fa{display:none!important}
@supports not selector(:has(*)){.tarification .fa,.facturation{display:none!important}}
.tarifs-tete h3,.comparatif h3{margin:0}
.tarifs-tete{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 16px;margin:0 0 12px}
.tarification h3{font-size:18px;line-height:1.25;letter-spacing:-.01em}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.plan{background:var(--face);border:1px solid var(--bois);border-radius:var(--r);padding:20px 22px 18px;display:flex;flex-direction:column;min-width:0}
.plan-tete{display:flex;justify-content:space-between;gap:14px}
.plan-tete>div{min-width:0}
/* Chaque logiciel garde sa couleur : anthracite pour PalletLab, bleu acier pour Palletization. */
.plan .public{display:inline-block;font-size:11.5px;line-height:1.4;color:var(--ink-2);border:1px solid var(--rule);border-radius:980px;padding:2px 9px;margin:0 0 8px}
.plan-palletization .public{color:var(--accent);border-color:#BBD0E5;background:var(--accent-fond)}
.plan h4{font-size:20px;line-height:1.2;letter-spacing:-.015em;margin:0 0 5px}
.plan .promesse{font-size:13.5px;line-height:1.45;color:var(--ink-2);margin:0}
.plan-tete img{display:block;width:112px;height:86px;object-fit:cover;border-radius:6px;flex-shrink:0}
.tarification .prix{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;margin:14px 0 0;font-size:13px;color:var(--ink-2)}
.tarification .prix b{font-size:30px;line-height:1.15;letter-spacing:-.02em;color:var(--ink);font-weight:700}
.plan-palletization .prix b{color:var(--accent)}
.tarification .facture{font-size:12px;line-height:1.45;color:var(--ink-2);margin:3px 0 0}
.tarification .facture .n{color:var(--ink);font-weight:600}
.tarification .actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin:12px 0 14px}
.tarification .actions .btn{font-size:13.5px;padding:9px 18px}
.tarification .essayer{font-size:13px;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.plan-description{border-top:1px solid var(--rule);padding-top:13px;font-size:13.5px;line-height:1.55;margin:0 0 10px}
.plan-sous{font-size:12.5px;font-weight:700;margin:4px 0 8px}
.fonctions{list-style:none;margin:0 0 8px;padding:0}
.fonctions li{position:relative;padding-left:18px;margin:0 0 8px}
.fonctions li::before{content:'✓';position:absolute;left:0;top:0;font-size:11.5px;line-height:1.5;color:var(--ink)}
.fonctions strong{display:block;font-size:13px;font-weight:600;line-height:1.4}
.fonctions p{font-size:12.5px;line-height:1.5;color:var(--ink-2);margin:1px 0 0}
.documents{list-style:none;display:flex;flex-wrap:wrap;gap:5px;margin:0;padding:0}
.documents li{padding:3px 8px;border:1px solid var(--rule);border-radius:4px;font-size:11px;line-height:1.4;color:var(--ink-2)}
.plan .exemple{font-size:12.5px;line-height:1.5;color:var(--ink-2);margin:11px 0 0}
.plan-lien{font-size:13px;font-weight:600;color:var(--ink)}
.plan-lien:hover{text-decoration:underline;text-underline-offset:4px}
.plan>.plan-lien{margin-top:auto;padding-top:12px;align-self:flex-start}
.assurance{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:12px;color:var(--ink-2);margin:14px 0 0}
.paiement-note{font-size:12px;line-height:1.5;color:var(--ink-2);margin:6px 0 0}
.paiement-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* Suite et Équipe : une ligne chacune, sous les deux cartes. */
.groupees{margin-top:24px;border:1px solid var(--rule);border-radius:10px;background:var(--face);overflow:hidden}
.groupees-tete{padding:12px 20px;border-bottom:1px solid var(--rule);background:var(--face-2)}
.groupees-tete h3{font-size:16px;margin:0}
.groupees-tete p{font-size:12.5px;color:var(--ink-2);margin:2px 0 0}
.groupee{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1.45fr) minmax(0,1.35fr) auto;gap:6px 22px;align-items:center;padding:13px 20px}
.groupee+.groupee{border-top:1px solid var(--rule)}
.groupee h4{font-size:15px;line-height:1.3;margin:0}
.groupee-nom p,.groupee-texte{font-size:12.5px;line-height:1.45;color:var(--ink-2);margin:2px 0 0}
.groupee .prix{margin:0}
.groupee .prix b{font-size:21px}
.groupee .economie{font-size:11.5px;line-height:1.45;color:var(--accent);margin:2px 0 0}
.groupee .economie b{font-weight:600}
.groupee .actions{margin:0;justify-content:flex-end}
/* Comparatif */
.comparatif{margin-top:30px;scroll-margin-top:80px}
.comparatif .cap{margin:0 0 4px}
.comparatif-texte{font-size:13.5px;color:var(--ink-2);margin:4px 0 12px}
.comparatif-cadre{overflow-x:auto;border:1px solid var(--rule);border-radius:10px;background:var(--face)}
.comparatif-cadre:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.comparatif table{width:100%;min-width:640px;border-collapse:collapse;font-size:12.5px}
.comparatif caption{text-align:left;font-size:11.5px;color:var(--ink-2);padding:9px 14px;border-bottom:1px solid var(--rule)}
.comparatif th,.comparatif td{padding:6px 12px;line-height:1.35;border-bottom:1px solid var(--rule);text-align:center;font-weight:400}
.comparatif th:first-child{text-align:left;width:38%}
.comparatif thead th{font-size:13px;font-weight:700;padding:11px 12px}
.comparatif thead small{display:block;font-size:10.5px;font-weight:400;color:var(--ink-2);margin-top:3px;white-space:nowrap}
.comparatif .groupe th{font-size:11.5px;font-weight:600;background:var(--face-2);padding:6px 12px}
.comparatif .non{color:#6E7277;font-size:11.5px}
.comparatif tbody:last-child tr:last-child>*{border-bottom:0}
.comparatif-note{font-size:11.5px;line-height:1.55;color:var(--ink-2);margin:10px 0 0;max-width:860px}
/* Au téléphone, le tableau défile de côté : on le dit, et la colonne « Votre besoin » reste en place (audit du 09/10/2026, A6-19). */
.comparatif-glisser{display:none;font-size:12.5px;color:var(--ink-2);margin:0 0 8px}
@media(max-width:760px){
  .comparatif-glisser{display:block}
  .comparatif th:first-child{position:sticky;left:0;z-index:1;background:var(--face);box-shadow:1px 0 0 var(--rule)}
  .comparatif .groupe th:first-child{background:var(--face-2)}
}
/* Accompagnement : une prestation à part, sur une ligne. */
.accompagnement{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin-top:22px;padding:13px 20px;border:1px solid var(--rule);border-radius:10px;background:var(--face)}
.accompagnement h3{font-size:15px;margin:0}
.accompagnement p{font-size:12.5px;color:var(--ink-2);margin:2px 0 0}
.accompagnement .prix{margin:0}
.accompagnement .prix b{font-size:19px}
.accompagnement .btn{font-size:13px;padding:8px 16px}
@media (max-width:900px){
  .groupee{grid-template-columns:minmax(0,1fr) auto}
  .groupee-texte{grid-column:1/-1}
  .groupee .actions{grid-column:1/-1;justify-content:flex-start}
}
@media (max-width:700px){
  .plans{grid-template-columns:1fr}
  .plan{padding:17px 16px 15px}
  .plan-tete img{width:84px;height:66px}
  .plan h4{font-size:19px}
  .plan .prix b{font-size:27px}
  .facturation{padding:11px 14px}
  .facturation legend{float:none;padding:0 4px}
  .facturation label{flex-basis:100%}
  .groupee,.groupees-tete{padding-inline:16px}
  .comparatif table{min-width:600px}
}

/* ── Bandeau produit (page Palletization : elle a sa propre identité) */
.produit{border-bottom:1px solid var(--rule);background:var(--fond-2)}
.produit-in{display:flex;align-items:center;gap:18px;padding:11px 0;flex-wrap:wrap}
.produit-logo{display:flex;align-items:center}
.produit-logo svg{height:46px;width:auto;display:block}
.produit-cap{flex:1;min-width:220px;color:var(--ink-2);font-size:13px;line-height:1.45}
.produit-cta{font-size:13px;white-space:nowrap;text-decoration:none;color:var(--accent);border-bottom:1px solid transparent}
.produit-cta:hover{border-bottom-color:var(--accent)}
@media (max-width:640px){.produit-cap{font-size:12px}}

/* ── Accueil : carrousel, grille de solutions, la suite, moteur, API, sur-mesure ── */
/* Compléments locaux aux propositions : pas de règle nouvelle dans le système, seulement des compositions. */
  .duo{display:grid;gap:26px;margin-top:clamp(36px,5vw,64px);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));text-align:left}
  .duo .tile{cursor:default}
  .duo .tile:hover{transform:none}
  .tile .badge{display:inline-block;font-size:13px;color:var(--ink-2);border:1px solid var(--rule);border-radius:980px;padding:2px 10px;margin-bottom:12px}
  .frame.wide img{width:min(100%,1120px)}
  .bullets{list-style:none;margin:28px auto 0;padding:0;max-width:720px;text-align:left}
  .bullets li{padding:12px 0;border-top:1px solid var(--rule);font-size:17px;line-height:1.5;color:var(--ink)}
  .bullets li:last-child{border-bottom:1px solid var(--rule)}
  .band-night .bullets li{border-color:var(--rule-night);color:var(--ink-night)}
  .bullets b{font-weight:700}
  .hero .frame{margin-top:clamp(40px,6vw,72px)}
  .honest{max-width:720px;margin:0 auto;text-align:left}
  .honest p{margin:0 0 14px}
.hero-suite{padding-block:clamp(56px,8vw,96px) 0;overflow:visible}
  .hero-suite h1{font-size:clamp(2.3rem,4.6vw,4rem)}
  .hero-suite .sous-titre{font-size:clamp(1.15rem,1.8vw,1.5rem);font-weight:600;color:var(--ink);margin:10px auto 0;max-width:46ch;letter-spacing:-.01em}
  .carousel{position:relative;width:100vw;margin:clamp(36px,5vw,56px) 0 0 calc(50% - 50vw);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);overflow:hidden;background:#f2f3f5}
  .slides{display:flex;transition:transform .6s cubic-bezier(.2,.7,.2,1);will-change:transform}
  .slide{flex:0 0 100%;position:relative;height:min(50vw,78vh,860px);display:flex;align-items:center;justify-content:center;background:#fff}
  .slide img{width:100%;height:100%;object-fit:cover;display:block}
  .slide.photo{background:var(--face-2)}
  .slide.photo img{object-fit:contain}
  .slide svg{width:min(70%,620px);height:auto}
  .slide.dark{background:var(--night)}
  .slide .tag{position:absolute;left:max(18px,calc(50vw - 640px));top:18px;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2);background:rgba(255,255,255,.9);border:1px solid var(--rule);border-radius:980px;padding:4px 10px}
  .slide.dark .tag{background:rgba(11,12,14,.85);color:var(--ink-2-night);border-color:var(--rule-night)}
  .slide .cap-s{position:absolute;left:0;right:0;bottom:0;padding:18px max(18px,calc(50vw - 640px));font-size:15px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55))}
  .slide.light{background:#f2f3f5}
  .slide.light .cap-s{color:var(--ink);background:linear-gradient(transparent,rgba(242,243,245,.92));padding-bottom:16px}
  .slide.light .tag{background:#fff}
  .car-btn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid var(--rule);background:rgba(255,255,255,.92);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;padding:0 0 3px}
  .car-btn:hover{background:#fff}
  .car-btn.prev{left:max(12px,calc(50vw - 690px))}.car-btn.next{right:max(12px,calc(50vw - 690px))}
  .dots{display:flex;justify-content:center;align-items:center;gap:8px;padding:12px 0 14px;background:var(--face)}
  .dots .pause{margin-left:14px;width:auto;height:26px;border-radius:980px;border:1px solid var(--rule);background:var(--face);color:var(--ink-2);font-size:12px;padding:0 10px;cursor:pointer}
  .dots .pause[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
  /* Le point mesure 8 px, mais le BOUTON qui le porte fait 28 × 36 : la zone
     tactile est déjà au-dessus du minimum de 24 px (WCAG 2.2). Mesuré, pas supposé. */
  .dots button{width:8px;height:8px;border-radius:50%;border:0;background:var(--rule-2);cursor:pointer;padding:0;transition:width .2s}
  .dots button[aria-current="true"]{background:var(--ink);width:22px;border-radius:4px}
  .sol{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:clamp(28px,4vw,44px);text-align:left}
  .sol a{display:block;border:1px solid var(--bois);border-radius:12px;padding:20px 20px 18px;background:var(--face);color:inherit;text-decoration:none;transition:transform .15s,border-color .15s}
  .sol a:hover{transform:translateY(-2px);border-color:var(--rule-2)}
  .sol .ic{width:28px;height:28px;color:var(--ink);margin-bottom:12px}
  .sol h3{margin:0 0 6px;font-size:17px}
  .sol p{margin:0 0 12px;font-size:14px;line-height:1.5;color:var(--ink-2)}
  .sol .with{font-size:12px;color:var(--ink-2);border-top:1px solid var(--rule);padding-top:10px}
  .sol .with b{color:var(--ink);font-weight:600}
  .suite{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));margin-top:clamp(28px,4vw,44px);text-align:left}
  .suite .card{border:1px solid var(--bois);border-radius:14px;padding:26px;background:var(--face)}
  .suite .card.night{background:var(--night);color:var(--ink-night);border-color:var(--rule-night)}
  .suite .card.night p,.suite .card.night li{color:var(--ink-2-night)}
  .suite .card .art{margin:14px 0 18px}
  .suite .card .art svg{width:min(100%,360px);height:auto}
  .suite .card .art img{width:100%;height:auto;border-radius:10px;display:block;aspect-ratio:790/600;object-fit:cover}
  .suite h3{margin:0;font-size:22px}
  .suite .who{font-size:13px;color:var(--ink-2);margin:4px 0 0}
  .suite ul{margin:14px 0 18px;padding-left:18px;font-size:15px;line-height:1.6}
  .suite .card.night .btn-solid{background:#fff;color:var(--ink)}
  .mesure{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:clamp(28px,4vw,44px);text-align:left}
  .mesure div{border-top:2px solid var(--ink);padding-top:14px}
  .mesure h3{margin:0 0 6px;font-size:17px}
  .mesure p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
  .moteur{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:clamp(28px,4vw,44px)}
  .moteur figure{margin:0;border:1px solid var(--bois);border-radius:12px;overflow:hidden;background:#f2f3f5}
  .moteur img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
  .moteur figcaption{padding:12px 14px;font-size:13px;color:var(--ink-2);text-align:left;background:var(--face)}
  .api{display:grid;gap:22px;grid-template-columns:1.1fr 1fr;align-items:start;margin-top:clamp(28px,4vw,44px);text-align:left}
  .api pre{margin:0;padding:18px 20px;border:1px solid var(--bois);border-radius:12px;background:var(--face);font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);overflow:auto}
  .api ul{margin:0 0 16px;padding-left:18px;font-size:15px;line-height:1.6}
  @media (max-width:900px){.api{grid-template-columns:1fr}}
  @media (max-width:640px){
    .hero-suite h1{font-size:2rem}
    .hero-suite h1 br{display:none}
    .hero-suite .sous-titre{font-size:1.05rem}
    .slide{height:auto;display:block;background:var(--face)}
    .slide img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;display:block}
    .slide.photo img{object-fit:contain;background:var(--face-2)}
    .slide .tag{top:10px;left:10px;font-size:11px}
    .slide .cap-s,.slide.light .cap-s{position:static;color:var(--ink-2);background:var(--face);padding:10px 16px 2px;font-size:13px;min-height:58px}
    .car-btn{top:25vw;width:34px;height:34px;font-size:18px}
    .dots{padding:8px 0 12px}
    .sol a{padding:16px}
    .suite .card{padding:20px}
    .api pre{font-size:12px;padding:14px}
  }
  @media (prefers-reduced-motion:reduce){.slides{transition:none}}

/* ── Accueil refondu (30/09/2026, maquette accueil-base44 validée par Kevin) :
   titre en grand, plateformes, preuve, solutions en liste, bloc bois,
   captures en bande après le chiffrage. Les classes portent le préfixe acc-. ── */
:root{
  --accent-bois:#8A5426;   /* wood-accent de DESIGN.md : texte blanc à 6,2:1 */
  --motif-bois:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%2248%22%3E%3Crect%20y%3D%2247%22%20width%3D%22240%22%20height%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.09%22%2F%3E%3Cg%20fill%3D%22%23fff%22%20fill-opacity%3D%22.22%22%3E%3Crect%20x%3D%2224%22%20y%3D%2211%22%20width%3D%221.6%22%20height%3D%221.6%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2223%22%20width%3D%221.6%22%20height%3D%221.6%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2235%22%20width%3D%221.6%22%20height%3D%221.6%22%2F%3E%3Crect%20x%3D%22144%22%20y%3D%2211%22%20width%3D%221.6%22%20height%3D%221.6%22%2F%3E%3Crect%20x%3D%22144%22%20y%3D%2223%22%20width%3D%221.6%22%20height%3D%221.6%22%2F%3E%3Crect%20x%3D%22144%22%20y%3D%2235%22%20width%3D%221.6%22%20height%3D%221.6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.acc-hero{padding-top:clamp(36px,5.5vw,76px);padding-bottom:clamp(40px,6vw,84px)}
.acc-titre{text-wrap:balance;margin:0;font-size:clamp(2.5rem,6vw,5.25rem);line-height:1.03;letter-spacing:-.028em;max-width:14em;margin-inline:auto}
.acc-sous-titre{margin-top:20px;max-width:40em;margin-inline:auto}
.acc-plateformes{display:flex;margin:18px auto 0;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2)}
.acc-os{padding:4px 12px;border:1px solid var(--rule);border-radius:999px;font-weight:600;color:var(--ink);background:#fff}
/* Les pastilles de l'accueil mènent au portail de téléchargement (02/10/2026) :
   même comportement que les boutons fantômes du site. */
a.acc-os{display:inline-flex;align-items:center;gap:6px;text-decoration:none;transition:background .18s,border-color .18s}
a.acc-os:hover{background:var(--face-2);border-color:var(--rule-2)}
a.acc-os svg{width:14px;height:14px;flex:none}
.acc-os-note{flex-basis:100%;text-align:center;margin-top:2px}
.acc-preuve{margin:16px auto 0;font-size:14px;color:var(--ink-2)}
.acc-puces{display:flex;flex-wrap:wrap;justify-content:center;margin-top:18px;font-size:14px}
.acc-puces a{color:var(--ink-2);text-decoration:none;padding:4px 9px}
.acc-puces a:hover{color:var(--ink)}
.acc-puces a:not(:last-child)::after{content:'';display:inline-block;width:4px;height:4px;background:var(--rule-2);margin-left:18px;transform:translateY(-2px)}
.acc-cartes{margin-top:clamp(40px,6vw,72px)}
.acc-cartes .art img{width:100%;height:auto}
/* ── Accueil : les deux logiciels d'abord (maquette A retenue par Kevin le 07/10/2026) ──
   Chaque carte montre le LOGICIEL : une grande fenêtre et deux agrandissements lisibles.
   Windows / macOS viennent ensuite, en boutons plus visibles. */
.acc-duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(28px,4vw,48px)}
.acc-produit{background:var(--face);border:1px solid var(--rule);border-radius:var(--r);padding:26px 26px 24px;display:flex;flex-direction:column;min-width:0;box-shadow:0 1px 0 rgba(0,0,0,.02),0 18px 40px -28px rgba(40,30,15,.35)}
.acc-produit.nuit{background:var(--night);border-color:var(--night);color:var(--ink-night)}
.acc-produit-tete{display:block}
.acc-produit-nom{font-size:1.35rem;font-weight:700;letter-spacing:-.01em;margin:0;line-height:1.25}
.acc-produit-qui{font-size:.88rem;color:var(--ink-2);margin:3px 0 0}
.nuit .acc-produit-qui{color:var(--ink-2-night)}
.acc-produit-promesse{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.2;letter-spacing:-.015em;margin:14px 0 18px;text-wrap:balance;min-height:2.4em}
.acc-vues{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.acc-vues figure{margin:0;position:relative;border-radius:calc(var(--r) - 4px);overflow:hidden;background:var(--face-2)}
.nuit .acc-vues figure{background:#17191C}
.acc-vues img{display:block;width:100%;height:auto;aspect-ratio:1.6;object-fit:cover}
.acc-vues .acc-vue-fenetre{grid-column:1/-1;border:1px solid var(--rule)}
.nuit .acc-vues .acc-vue-fenetre{border-color:var(--rule-night)}
.acc-vues .acc-vue-fenetre img{aspect-ratio:2000/1051}
.acc-vue-barre{display:flex;align-items:center;gap:6px;padding:7px 10px;background:var(--face-2);border-bottom:1px solid var(--rule);font-size:.74rem;color:var(--ink-2)}
.nuit .acc-vue-barre{background:#17191C;border-color:var(--rule-night);color:var(--ink-2-night)}
.acc-vue-barre i{width:9px;height:9px;border-radius:50%;display:inline-block;background:#E0625A}
.acc-vue-barre i:nth-child(2){background:#E0B44A}.acc-vue-barre i:nth-child(3){background:#5DB86A}
.acc-vue-barre span{margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-vues figcaption{position:absolute;left:8px;bottom:8px;font-size:.74rem;font-weight:600;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.9);color:var(--ink)}
.nuit .acc-vues figcaption{background:rgba(11,12,14,.78);color:var(--ink-night)}
.acc-vues .acc-vue-contenir{background:#fff;border:1px solid var(--rule)}
.acc-vues .acc-vue-contenir img{object-fit:contain;padding:8px 6px 34px}
.acc-produit-points{display:flex;flex-wrap:wrap;gap:6px 14px;margin:18px 0 0;padding:0;list-style:none;font-size:.92rem;color:var(--ink-2)}
.nuit .acc-produit-points{color:var(--ink-2-night)}
.acc-produit-points li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:2px;background:var(--bois-fonce);margin-right:8px;vertical-align:2px}
.acc-produit-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:22px}
.nuit .btn-solid{background:#fff;color:var(--night)}
.nuit .btn-solid:hover{background:#E8E9EA}
.nuit .btn-ghost{border-color:var(--rule-night);color:var(--ink-night)}
.nuit .btn-ghost:hover{background:#17191C}
.acc-produit .acc-lien-calc{margin:14px 0 0;font-size:.9rem}
.acc-produit.nuit .acc-lien-calc a{color:var(--ink-2-night)}
.acc-produit-desc{margin:18px 0 0;font-size:1rem;line-height:1.55;color:var(--ink-2);max-width:40em;text-wrap:pretty}
.nuit .acc-produit-desc{color:var(--ink-2-night)}
/* Langue de l'interface de chaque logiciel, dite sur toutes les versions du site (audit du 09/10/2026, A6-11). */
.acc-produit-langues{margin:8px 0 0;font-size:.9rem;line-height:1.5;color:var(--ink-2)}
.nuit .acc-produit-langues{color:var(--ink-2-night)}
.acc-produit-actions{align-items:center}
.acc-socle{margin-top:30px}
.acc-socle .acc-plateformes{gap:12px}
.acc-socle a.acc-os{padding:12px 24px;font-size:1.06rem;gap:10px;border-width:1.5px;border-color:var(--rule-2);box-shadow:0 6px 16px -12px rgba(40,30,15,.4)}
.acc-socle a.acc-os svg{width:19px;height:19px}
.acc-socle a.acc-os:hover{border-color:var(--ink);background:var(--face)}
.acc-socle .acc-os-note{margin-top:8px}
@media(max-width:860px){.acc-duo{grid-template-columns:1fr}.acc-produit-promesse{min-height:0}}
@media(max-width:420px){.acc-produit{padding:20px 16px}.acc-vues figcaption{font-size:.68rem}}
.acc-lien-calc{margin:14px 0 0;font-size:14px}
.acc-lien-calc a{color:inherit;font-weight:600;text-decoration:none;opacity:.92}
.acc-lien-calc a:hover{text-decoration:underline;text-underline-offset:3px;opacity:1}
.acc-deux-col{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,76px);align-items:start}
.acc-col-texte{position:sticky;top:84px}
.acc-col-texte h2{font-size:clamp(2rem,3.6vw,3.2rem);line-height:1.04;margin:0}
.acc-col-texte .lead{margin:16px 0 0;max-width:30em}
.acc-gamme{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px;max-width:520px}
.acc-gamme figure{margin:0}
.acc-gamme picture,.acc-gamme img{display:block;width:100%;height:auto}
.acc-gamme img{border-radius:4px}
.acc-gamme figcaption{margin-top:6px;font-size:13px;color:var(--ink-2)}
.acc-gamme-note{margin:14px 0 0;font-size:12px;color:var(--ink-2)}
.acc-liste{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.acc-liste li{border-bottom:2px solid var(--ink)}
.acc-liste a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 20px;padding:20px 2px;color:inherit;text-decoration:none}
.acc-liste-t{font-size:clamp(1.35rem,2.4vw,2.05rem);font-weight:700;letter-spacing:-.02em;line-height:1.12}
.acc-liste-d{grid-column:1;font-size:14px;line-height:1.5;color:var(--ink-2)}
.acc-avec{display:block;margin-top:3px;font-size:12px}
.acc-avec b{color:var(--ink)}
.acc-liste svg{grid-column:2;grid-row:1 / 3;width:40px;height:40px;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.acc-liste a:hover svg,.acc-liste a:focus-visible svg{transform:translateX(5px)}
.acc-liste a:hover .acc-liste-t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.acc-bois-section{display:grid;grid-template-columns:1fr 1fr;min-height:600px}
.acc-bois{background:var(--accent-bois) var(--motif-bois);color:#fff;
  padding:clamp(44px,6vw,96px) clamp(24px,5vw,80px);display:flex;flex-direction:column;justify-content:center}
.acc-bois h2{color:#fff;font-size:clamp(2.4rem,5vw,4.6rem);line-height:1.03;letter-spacing:-.028em;margin:0 0 22px;text-wrap:balance}
.acc-bois p{color:rgba(255,255,255,.92);font-size:17px;line-height:1.6;max-width:32em;margin:0}
.acc-bois .acc-bois-cap{font-size:13px;color:rgba(255,255,255,.8);margin:0 0 12px}
.acc-bois-liste{padding:clamp(32px,5vw,72px) clamp(20px,4vw,64px);display:flex;flex-direction:column;justify-content:center}
.acc-bois-liste article{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:center;padding:18px 0;border-bottom:2px solid var(--ink)}
.acc-bois-liste article:first-child{border-top:2px solid var(--ink)}
.acc-bois-liste picture,.acc-bois-liste img{display:block;width:200px;height:150px}
.acc-bois-liste img{object-fit:cover;border-radius:4px}
.acc-bois-liste h3{font-size:22px;line-height:1.2;margin:0 0 4px}
.acc-bois-liste p{font-size:14px;line-height:1.5;color:var(--ink-2);margin:0}
.acc-bois-liste .cap{margin:14px 0 0;font-size:12px}
.acc-ecrans-tete{max-width:760px}
.acc-ecrans-tete h2{margin:0}
.acc-ecrans-tete .lead{margin:14px 0 0}
.acc-ecrans-rang{display:flex;align-items:flex-start;gap:clamp(18px,2.6vw,32px);margin-top:clamp(26px,3.6vw,44px)}
.acc-ecrans-rang figure{flex:var(--r) 1 0%;min-width:0;margin:0}
.acc-ecrans-rang picture,.acc-ecrans-rang img{display:block;width:100%;height:auto}
.acc-ecrans-rang img,.acc-fenetre img{border:1px solid var(--rule);border-radius:6px;background:#fff;
  box-shadow:0 1px 1px rgba(11,12,14,.05),0 22px 48px -18px rgba(11,12,14,.28)}
.acc-ecrans figcaption{margin-top:14px;font-size:14px;line-height:1.5;color:var(--ink-2);max-width:40em}
.acc-ecrans figcaption b{display:block;margin-bottom:2px;color:var(--ink);font-weight:600}
@media (max-width:900px){
  .acc-deux-col{grid-template-columns:1fr}
  .acc-col-texte{position:static}
  .acc-bois-section{grid-template-columns:1fr;min-height:0}
}
@media (max-width:640px){
  .acc-ecrans-rang{flex-direction:column}
  .acc-bois-liste article{grid-template-columns:120px 1fr;gap:14px}
  .acc-bois-liste picture,.acc-bois-liste img{width:120px;height:90px}
  .acc-bois-liste h3{font-size:18px}
  .acc-liste svg{width:32px;height:32px}
}
@media (prefers-reduced-motion:reduce){.acc-liste svg{transition:none}}