/* ═══════════════════════════════════════════════════════════════════════════════
   LES PRODUITS — la page d'ensemble et les trois pages produit.

   UNE PAGE PAR PRODUIT — skipper, 25 septembre 2026: « j'aimerais que chaque produit ait
   sa page (vs d'être un à la file de l'autre), et en profiter pour bonifier l'accent sur
   le produit: pourquoi, quoi, comment, tout en mettant l'accent sur l'aspect innovant ».

   POURQUOI UN FICHIER A PART, et plus un <style> dans la page: quatre pages portent
   maintenant le même châssis de téléphone, le même carrousel et les mêmes cartes. Recopier
   le bloc quatre fois, c'est garantir qu'un jour une seule des quatre sera corrigée.

   UNE SEULE GRAMMAIRE POUR LES TROIS: l'en-tête (ce que c'est, trois chiffres), puis
   Pourquoi, Quoi, Comment, Ce qui est neuf. Le visiteur qui en lit un sait où chercher
   dans les deux autres.

   AUCUNE COULEUR NEUVE: tout vient de styles.css. Le rouge reste réservé aux alertes.
   ═══════════════════════════════════════════════════════════════════════════════ */
/* LE HAUT ET LE BAS SEULEMENT. Ces pages sont aussi `.wrap`, qui porte la gouttière de
   24 px; un `padding:34px 0 64px` la remettait à zéro, et sur téléphone le texte touchait
   le bord de l'écran — sur quatre pages du site, vu le 25 septembre 2026. */
.page-produits,.page-produit{padding-top:34px;padding-bottom:64px}
.page-produits h1{margin:0 0 10px}
.page-produits .lede{max-width:64ch;margin:0 0 30px;font-size:1.05rem;opacity:.9}
/* `:where` GARDE CETTE RÈGLE AU NIVEAU D'UNE CLASSE. Écrite `.page-produit p`, elle battait
   `.pr-pivot`, `.pp-reperes` et `.pp-fil` — tous des <p> — et leur retirait leurs marges:
   la phrase pivot se collait au cadre « Ce qui est neuf ». Vu sur la capture, pas au code. */
.page-produit :where(p){max-width:64ch;margin:0 0 14px;line-height:1.72}

.pr-nom{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--giallo);margin:0 0 8px}

/* ── LA PAGE D'ENSEMBLE: trois cartes, une par produit ────────────────────────────
   LA CARTE ENTIÈRE EST LE LIEN. Sur un téléphone, viser un petit « Découvrir » au bas
   d'une carte est une corvée; toucher la carte n'importe où doit suffire.
   Les `id` 6ai / juge / meteo sont GARDÉS sur les cartes: des liens `produits.html#juge`
   ont circulé avant la séparation, et ils doivent encore atterrir sur le bon produit. */
/* QUATRE CARTES DEPUIS LE 29 SEPTEMBRE 2026 (Navigatek Club). A 280 px de minimum, la grille
   tombait en 3 + 1 et la quatrieme se lisait comme un ajout de derniere minute — le meme
   defaut que les innovations « deux par deux ». A 230 px: 4 de front, 2 + 2, ou 1 par ligne. */
.ph-cartes{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin:0 0 10px;padding:0;list-style:none}
.ph-cartes>li{scroll-margin-top:80px}
.ph-carte{display:flex;flex-direction:column;height:100%;text-decoration:none;
  color:var(--bianco);background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:22px 22px 20px;
  transition:border-color .2s,transform .2s,background .2s}
.ph-carte:hover,.ph-carte:focus-visible{border-color:var(--giallo);
  background:rgba(255,206,0,.04);transform:translateY(-2px)}
.ph-acces{display:inline-block;align-self:flex-start;margin:-2px 0 10px;padding:3px 8px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--giallo);border:1px solid rgba(255,206,0,.42);border-radius:999px}
.ph-carte h2{font-size:1.18rem;margin:0 0 10px;line-height:1.3}
.ph-carte .ph-promesse{margin:0 0 18px;font-size:.94rem;line-height:1.65;opacity:.86}
.ph-carte .ec-tel{max-width:190px;margin:auto auto 18px}
.ph-aller{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--giallo)}
@media (prefers-reduced-motion:reduce){.ph-carte{transition:none}.ph-carte:hover{transform:none}}

/* ── L'EN-TÊTE D'UNE PAGE PRODUIT ─────────────────────────────────────────────────
   Le texte à gauche, le téléphone à droite. Sous 820 px, le téléphone passe dessous: sur
   un écran étroit, la promesse doit se lire avant l'image. */
.pp-fil{font-size:.86rem;margin:0 0 22px;opacity:.72}
.pp-fil a{color:inherit}
.pp-fil a:hover{color:var(--giallo)}
.pp-tete{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:44px;
  align-items:center;margin:0 0 30px}
.pp-tete h1{font-size:clamp(1.7rem,4.2vw,2.5rem);line-height:1.15;margin:0 0 16px;
  max-width:20ch}
.pp-tete .lede{max-width:60ch;font-size:1.06rem;line-height:1.7;margin:0 0 24px;opacity:.92}
.pp-tete .ec-tel{max-width:250px}
/* LES TROIS CHIFFRES CLÉS. Le chiffre est l'argument: giallo, mono, en premier. */
.pp-cles{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr));
  margin:0 0 24px;padding:0;list-style:none;max-width:640px}
.pp-cles li{background:rgba(255,206,0,.06);border:1px solid rgba(255,206,0,.26);
  border-radius:12px;padding:13px 14px}
.pp-cles b{display:block;white-space:nowrap;font-family:var(--font-mono);font-size:1.35rem;
  color:var(--giallo);line-height:1.15;font-weight:600}
.pp-cles span{display:block;font-size:.8rem;line-height:1.45;opacity:.78;margin-top:6px}
.pp-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
/* GRATUIT, ET OU: une ligne sous les boutons. L'adresse seule en mono et d'un bloc — la
   phrase entiere en mono se coupait au milieu, « navigateur : » d'un cote, l'URL de l'autre. */
.pp-dispo{margin:14px 0 0;font-size:.9rem;opacity:.85}
.pp-dispo a{color:inherit;font-family:var(--font-mono);white-space:nowrap}
.pp-dispo a:hover{color:var(--giallo)}

/* LE SOMMAIRE DE LA PAGE: les quatre temps, en pastilles. */
.pp-sommaire{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px;padding:0;list-style:none;
  border-top:1px solid rgba(255,255,255,.10);padding-top:18px}
.pp-sommaire a{display:inline-flex;gap:8px;align-items:baseline;text-decoration:none;
  border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:7px 15px;
  background:rgba(255,255,255,.04);color:var(--bianco);font-size:.9rem}
.pp-sommaire a:hover{border-color:var(--giallo);color:var(--giallo)}
.pp-sommaire .q{font-family:var(--font-mono);font-size:10px;color:var(--giallo)}

/* ── LES SECTIONS ─────────────────────────────────────────────────────────────────
   Un repère en mono (Pourquoi / Quoi / Comment / Ce qui est neuf), puis une phrase qui
   AFFIRME quelque chose. Un titre qui ne dit que « Fonctionnalités » ne se lit pas. */
.pp-section{margin:58px 0 0;scroll-margin-top:84px}
.pp-reperes{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--giallo);margin:0 0 8px;display:flex;
  align-items:center;gap:10px}
.pp-reperes::before{content:"";width:22px;height:2px;background:var(--giallo);display:block}
.pp-section h2{font-size:clamp(1.25rem,2.8vw,1.6rem);line-height:1.25;margin:0 0 16px;
  max-width:30ch}
.pp-section .sous{opacity:.8}

/* POURQUOI: le contraste « sans / avec ». Le gris d'abord, le giallo ensuite: l'oeil
   doit lire le problème avant la réponse. */
.pp-contraste{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  margin:22px 0 0;padding:0;list-style:none}
.pp-contraste li{border-radius:12px;padding:17px 19px;
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03)}
.pp-contraste li.avec{border-color:rgba(255,206,0,.42);background:rgba(255,206,0,.06)}
.pp-contraste .q{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;opacity:.65;margin:0 0 8px}
.pp-contraste li.avec .q{color:var(--giallo);opacity:1}
.pp-contraste p{margin:0;font-size:.95rem;line-height:1.62}

/* COMMENT: des étapes NUMÉROTÉES — l'ordre compte, c'est une chaîne. */
.pp-etapes{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin:18px 0 0;padding:0;list-style:none;counter-reset:etape}
.pp-etapes li{counter-increment:etape;position:relative;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:18px 19px 17px}
.pp-etapes li::before{content:"0" counter(etape);font-family:var(--font-mono);
  font-size:1.5rem;color:var(--giallo);line-height:1;display:block;margin-bottom:10px}
.pp-etapes b{display:block;margin-bottom:6px;font-family:var(--font-display)}
.pp-etapes p{margin:0;font-size:.93rem;line-height:1.62}

/* CE QUI EST NEUF: la section qui porte l'accent demandé. Un fond à peine teinté et un
   liseré giallo la détachent du reste; chaque carte finit par SA PREUVE, en mono — une
   innovation qui ne se mesure pas n'est qu'un adjectif. */
.pp-neuf{background:linear-gradient(180deg,rgba(255,206,0,.07),rgba(255,206,0,.015));
  border:1px solid rgba(255,206,0,.28);border-radius:18px;padding:30px 28px 28px}
/* DEUX PAR DEUX: quatre cartes en grille libre tombaient en 3 + 1, et l'orpheline se lisait
   comme un ajout de dernière minute. */
/* NOTES ET VERSIONS — 10 octobre 2026: la ligne de preuve « en service », la note sous la
   soiree de Juge, et le niveau d'acces de chaque version de 6Ai, en mono comme les badges. */
.pp-note{margin:16px 0 0;max-width:66ch;font-size:.92rem;opacity:.85;
  border-left:3px solid var(--giallo);padding-left:12px}
.pp-note a{color:var(--giallo)}
.pp-niveaux .nv-n{margin:-2px 0 8px;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--giallo)}
.pp-inno{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr));
  margin:20px 0 0;padding:0;list-style:none}
.pp-inno li{display:flex;flex-direction:column;background:rgba(11,11,11,.55);
  border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:19px 20px 17px}
.pp-inno b{display:block;margin-bottom:8px;color:var(--giallo);
  font-family:var(--font-display);font-size:1.02rem}
.pp-inno p{margin:0 0 14px;font-size:.93rem;line-height:1.64}
/* LA FLOTTE: les trois chiffres de la boucle Juge → 6Ai → Meteo reprennent la forme des
   chiffres clés de l'en-tête — ce sont des mesures, elles se lisent pareil. Pleine largeur:
   « 19,2° → 14,6° » ne tient pas dans le tiers d'une grille de 640 px. */
.pp-flotte-cles{margin:22px 0 16px;max-width:none}
.pp-inno .preuve{margin:auto 0 0;padding-top:11px;border-top:1px solid rgba(255,255,255,.10);
  font-family:var(--font-mono);font-size:.8rem;line-height:1.5;opacity:.82}

/* ── CE QUE FAIT LE PRODUIT (les quatre qualités) ──────────────────────────────── */
.pr-points{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin:18px 0 0;padding:0;list-style:none}
.pr-points li{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);
  border-radius:12px;padding:15px 17px}
.pr-points .q{font-family:var(--font-mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--giallo);margin-bottom:7px}
.pr-points p{margin:0;font-size:.92rem;line-height:1.62;max-width:none}
.pr-pivot{max-width:64ch;font-size:1.04rem;border-left:3px solid var(--giallo);
  padding-left:16px;margin:40px 0 0;opacity:.94}

/* LA SUITE: les deux autres produits, puis le contact. Une page produit ne doit pas être
   un cul-de-sac — le visiteur qui a fini celle-ci est exactement celui qu'on veut garder. */
.pp-suite{margin:56px 0 0;padding-top:28px;border-top:1px solid rgba(255,255,255,.12)}
.pp-suite h2{font-size:1.05rem;margin:0 0 14px}
.pp-autres{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin:0 0 26px;padding:0;list-style:none}
.pp-autres a{display:block;height:100%;text-decoration:none;color:var(--bianco);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:16px 18px}
.pp-autres a:hover{border-color:var(--giallo)}
.pp-autres span{display:block;font-size:.9rem;opacity:.8;margin-top:6px;line-height:1.5}

.pr-fin{max-width:64ch;margin:44px 0 0;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.12)}

/* ── LE CARROUSEL ─────────────────────────────────────────────────────────────────
   DEFILEMENT NATIF, PAS UNE MECANIQUE MAISON. `scroll-snap` fait le travail: le doigt
   glisse, le clavier tabule, et si le JavaScript ne se charge pas la piste reste
   parcourable a la main. Les fleches et l'avance automatique ne sont qu'un confort. */
.cr{margin:22px 0 26px}
.cr-piste{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:4px 2px 14px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.cr-piste::-webkit-scrollbar{height:6px}
.cr-piste::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:3px}
.cr-piste>figure{scroll-snap-align:center;flex:0 0 min(336px,78vw);margin:0}
.cr-piste:focus-visible{outline:2px solid var(--giallo);outline-offset:4px;border-radius:12px}
.cr-piste figcaption{margin-top:10px;font-size:.87rem;opacity:.72;line-height:1.5;
  min-height:2.6em}
.cr-barre{display:flex;align-items:center;gap:12px}
.cr-barre button{width:34px;height:34px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
  color:var(--bianco);font-size:17px;line-height:1;display:flex;align-items:center;
  justify-content:center;padding:0}
.cr-barre button:hover{border-color:var(--giallo);color:var(--giallo)}
.cr-points{display:flex;gap:7px}
.cr-points i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22);
  display:block;transition:background .2s,transform .2s}
.cr-points i.actif{background:var(--giallo);transform:scale(1.25)}

/* ── UNE VRAIE CAPTURE D'ÉCRAN, DANS SON TÉLÉPHONE ────────────────────────────────
   LE SKIPPER, 21 septembre 2026: « les clips d'écran devraient être dans un format plus
   petit et dans un encadré pour montrer de la perspective et aussi pour voir le clip
   d'écran au complet ».

   CE QUI N'ALLAIT PAS. La version précédente bornait la hauteur à 560 px et cadrait par
   le HAUT (`object-fit:cover`): la capture était donc COUPÉE, et on ne voyait jamais le
   bas de l'écran. Pire, rien ne le disait: une image rognée ressemble à une image entière.

   La capture garde son ratio (aucun `object-fit`), et c'est le CADRE qui la rend lisible:
   un téléphone sobre, plus petit, qui donne l'échelle. `background` en nero: si l'image
   tarde, le cadre reste noir au lieu de clignoter blanc. Les attributs `width`/`height`
   portent les VRAIES dimensions du fichier, sinon la page saute au chargement. */
.ec-tel{width:100%;max-width:252px;margin:0 auto;padding:10px 9px 12px;
  background:linear-gradient(180deg,#1c1c1c,#121212);
  border:1px solid rgba(242,242,242,.18);border-radius:26px;
  box-shadow:0 20px 44px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.06) inset}
/* L'ÉCOUTEUR, en haut du châssis: c'est ce détail qui fait lire « téléphone » plutôt que
   « cadre arrondi ». Décoratif — donc invisible aux lecteurs d'écran. */
.ec-tel::before{content:"";display:block;width:44px;height:4px;margin:0 auto 9px;
  border-radius:3px;background:rgba(242,242,242,.22)}
.ec-capture{display:block;width:100%;height:auto;border-radius:13px;background:#0B0B0B}
/* L'ÉCRAN D'ORDINATEUR — 29 septembre 2026, Navigatek Club. Ses captures sont celles d'un
   site de gestion vu sur un portable: en PAYSAGE. Dans le châssis de téléphone, une image
   de 1040 x 676 devenait une vignette de 250 px de large où rien ne se lisait. Même
   principe que le téléphone — la capture entière, jamais rognée, dans un cadre qui donne
   l'échelle — mais le cadre est une fenêtre: une barre et ses trois points. */
.ec-ecran{width:100%;max-width:640px;margin:0 auto;padding:0 7px 7px;
  background:linear-gradient(180deg,#1c1c1c,#121212);
  border:1px solid rgba(242,242,242,.18);border-radius:12px;
  box-shadow:0 20px 44px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.06) inset}
.ec-ecran::before{content:"";display:block;height:22px;
  background:radial-gradient(circle at 10px 11px,rgba(242,242,242,.28) 3px,transparent 3.5px),
             radial-gradient(circle at 22px 11px,rgba(242,242,242,.2) 3px,transparent 3.5px),
             radial-gradient(circle at 34px 11px,rgba(242,242,242,.14) 3px,transparent 3.5px)}
.ec-ecran .ec-capture{border-radius:5px}
.pp-tete-ecran{grid-template-columns:minmax(0,1fr) minmax(0,460px)}
.pp-tete-ecran .ec-ecran{max-width:460px}
.cr-piste>figure.cr-large{flex:0 0 min(560px,86vw)}
.ph-carte .ec-ecran{max-width:100%;margin:auto 0 18px}

/* LA VIDÉO DE PRÉSENTATION (Navigatek Meteo, 4 octobre 2026): verticale 9:16, sous la
   description. Même noir que les captures, pour qu'elle ne clignote pas blanc au chargement. */
.pp-video{max-width:300px;margin:0 0 26px}
.pp-video video{display:block;width:100%;height:auto;aspect-ratio:9/16;border-radius:16px;
  background:#0B0B0B;border:1px solid rgba(242,242,242,.18);box-shadow:0 20px 44px rgba(0,0,0,.55)}
.pp-video figcaption{margin-top:8px;font-size:.85rem;opacity:.7}

@media (max-width:820px){
  .pp-tete{grid-template-columns:1fr;gap:26px}
  .pp-video{margin:0 auto 26px;text-align:center}
  .pp-tete .ec-tel{max-width:220px}
  .pp-tete-ecran{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cr-piste>figure{flex:0 0 84vw}
  .ec-tel{max-width:230px}
  .pp-cles{grid-template-columns:1fr}
  .pp-cles li{display:flex;align-items:baseline;gap:12px}
  .pp-cles span{margin-top:0}
  .pp-cles b{min-width:4.2em}
  .pp-flotte-cles li{display:block}
  .pp-flotte-cles span{margin-top:6px}
  .pp-inno{grid-template-columns:1fr}
  .pp-neuf{padding:22px 16px 18px;border-radius:14px}
  .pp-section{margin-top:46px}
}
@media (prefers-reduced-motion:reduce){.cr-piste{scroll-behavior:auto}}

/* LA RANGÉE D'APPLICATIONS en tête de la vue d'ensemble — quatre de front à toute largeur. */
.ph-apps{list-style:none;margin:18px 0 30px;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,3vw,28px);max-width:560px}
.ph-apps a{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;
  color:inherit;font-weight:600;font-size:.95rem;letter-spacing:.01em}
.ph-apps img{width:100%;max-width:96px;height:auto;aspect-ratio:1;border-radius:22%;
  box-shadow:0 4px 14px rgba(0,0,0,.28);transition:transform .15s ease}
.ph-apps a:hover img,.ph-apps a:focus-visible img{transform:translateY(-3px)}
.ph-apps a:hover span{color:var(--giallo)}