/* == PhotoCollage, feuille de style ======================================
 *
 * Ecrite a la main, sans framework et sans jQuery. L'ancienne page chargeait
 * jQuery 3.4.1 et le SDK Facebook Messenger (~200 Ko a eux deux) pour un lien
 * « voir plus » et un widget de chat que Meta a depuis deprecie.
 *
 * Les maquettes d'interface (fenetre, canevas, tuiles, curseurs) sont dessinees
 * ici meme. Les « photos » des tuiles sont des degrades : aucune image a
 * telecharger, et la mise en page ne depend d'aucun asset externe.
 * ======================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-deep);text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{margin:0;padding:0;list-style:none}

h1,h2,h3{font-family:var(--display);line-height:1.15;letter-spacing:-.022em;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.1vw,2.4rem);font-weight:700}
h3{font-size:1.22rem;font-weight:700}
p{margin:0 0 1em}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.narrow-in{max-width:820px}
.block{padding:88px 0}
.block-alt{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.narrow .wrap{max-width:760px}
.center{text-align:center}
.center-sub{margin-left:auto;margin-right:auto}

:focus-visible{outline:3px solid var(--brand-bright);outline-offset:2px;border-radius:5px}

/* -- Navigation --------------------------------------------------------- */
/* .site-nav et NON « nav » : le selecteur de balise nu s'appliquait a TOUS les
   <nav> de la page, donc au sommaire d'article, au fil d'Ariane et a la
   navigation du pied de page. Ils heritaient de position:sticky et passaient
   par-dessus l'en-tete. Ne jamais styler ici une balise de structure sans
   classe : le document en contient plusieurs par page. */
.site-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-nav .wrap{display:flex;align-items:center;gap:26px;height:66px}
.brand{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:800;font-size:1.16rem;
  color:var(--text);letter-spacing:-.02em;
}
.brand:hover{text-decoration:none}
.mark{width:28px;height:28px;flex:none}
.navlinks{display:flex;gap:24px}
.navlinks a{color:var(--muted);font-size:.95rem;font-weight:500}
.navlinks a:hover{color:var(--text);text-decoration:none}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-cta{
  display:inline-block;padding:9px 19px;border-radius:999px;
  background:var(--brand);color:#fff;font-weight:600;font-size:.95rem;
}
.nav-cta:hover{background:var(--brand-bright);text-decoration:none}

/* -- Selecteur de langue (sans JavaScript) ------------------------------ */
.langsel{position:relative}
.langsel summary{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;list-style:none;
  padding:7px 12px;border:1px solid var(--line);border-radius:999px;
  color:var(--muted);font-size:.9rem;background:var(--card);
}
.langsel summary::-webkit-details-marker{display:none}
.langsel summary:hover{color:var(--text);border-color:var(--faint)}
.langsel ul{
  position:absolute;right:0;top:calc(100% + 8px);z-index:60;
  padding:6px;min-width:172px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-md);
}
.langsel li a{display:block;padding:8px 12px;border-radius:8px;color:var(--text);font-size:.94rem}
.langsel li a:hover{background:var(--paper-2);text-decoration:none}
.langsel li a[aria-current]{color:var(--brand-deep);font-weight:600}
/* Le code a deux lettres ne sert que sous 430 px (voir l'adaptatif en fin de
   fichier), ou le nom natif ne tient plus dans la barre. */
.langsel .lcode{display:none}

/* -- Boutons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 27px;border-radius:999px;
  font-weight:600;font-size:1rem;line-height:1.2;
  border:1px solid transparent;
  transition:background .16s,border-color .16s,transform .16s,box-shadow .16s;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
/* Taille par DEFAUT de toute icone.
   Un <svg> avec viewBox mais sans largeur ni hauteur s'etale sur toute la
   largeur disponible. Sans cette regle, il suffit d'employer icon() dans un
   contexte qui n'a pas sa regle dediee pour obtenir une icone geante en plein
   milieu de la page. Vecu le 2026-08-05 : David a vu la barre de reassurance
   avec quatre icones enormes, parce que son navigateur servait une feuille de
   style d'avant l'ajout de « .tchip .ic ».
   Une regle manquante doit degrader vers une petite icone juste, jamais vers
   un accident visible. */
.ic{width:18px;height:18px;flex:none}
.btn .ic{width:18px;height:18px;flex:none}
.btn-brand{background:var(--brand);color:#fff;box-shadow:0 4px 14px rgba(27,143,214,.28)}
.btn-brand:hover{background:var(--brand-bright);box-shadow:0 7px 20px rgba(27,143,214,.34)}
.btn-line{background:var(--card);color:var(--text);border-color:var(--line)}
.btn-line:hover{border-color:var(--faint)}
.btn-lg{padding:17px 34px;font-size:1.06rem}

/* -- Hero --------------------------------------------------------------- */
.hero{padding:80px 0 72px;background:linear-gradient(180deg,var(--card) 0%,var(--paper) 100%);overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.eyebrow{
  display:inline-block;margin-bottom:15px;
  font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--brand-deep);
}
.accent{color:var(--brand)}
.sub{font-size:1.15rem;color:var(--muted);max-width:48ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 20px}
.hero-note{font-size:.92rem;color:var(--faint);display:flex;align-items:center;gap:9px;margin:0}
.dot{width:8px;height:8px;border-radius:50%;background:#22c07a;flex:none}

.hero-stage{position:relative}
.glow{
  position:absolute;inset:-14% -10% -18% -12%;z-index:0;
  background:radial-gradient(60% 55% at 55% 42%,rgba(42,165,239,.20),transparent 70%),
             radial-gradient(45% 45% at 22% 78%,rgba(240,115,106,.16),transparent 70%);
  filter:blur(8px);
}
.hero-win{position:relative;z-index:1;transform:rotate(-.6deg)}

/* Captures du VRAI logiciel. Le cadre et l'ombre les detachent du fond sans
   rien masquer de l'interface, c'est le produit qu'on montre, pas une vignette
   decorative, donc on ne le rogne ni ne l'incline. */
.hero-shot{
  position:relative;z-index:1;width:100%;height:auto;
  border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow-lg);
}
.feat-shot img{
  width:100%;height:auto;border-radius:12px;
  border:1px solid var(--line);box-shadow:var(--shadow-md);
}
/* La barre d'outils et le panneau de filtres sont etroits et hauts : centres et
   bornes, sinon ils s'etirent sur toute la colonne et paraissent flous. */
.feat-shot img[width="314"]{max-width:320px;margin:0 auto}

/* -- Fenetre applicative ------------------------------------------------ */
.appwin{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.appbar{
  display:flex;align-items:center;gap:9px;
  padding:10px 14px;background:var(--paper-2);border-bottom:1px solid var(--line);
}
.winmark{width:17px;height:17px}
.wintitle{font-family:var(--display);font-weight:700;font-size:.83rem;color:var(--muted)}
.windots{margin-left:auto;display:flex;gap:6px}
.windots i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.appbody{padding:16px}

/* -- Canevas et tuiles -------------------------------------------------- */
/* Les « photos » sont des degrades : rien a charger, et la maquette ne peut
   pas se retrouver cassee par une image manquante. */
.canvas{
  position:relative;background:var(--paper-2);border-radius:10px;padding:12px;
  background-image:linear-gradient(45deg,rgba(0,0,0,.025) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.025) 75%),
                   linear-gradient(45deg,rgba(0,0,0,.025) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.025) 75%);
  background-size:16px 16px;background-position:0 0,8px 8px;
}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:62px;gap:9px}
.t{
  position:relative;border-radius:9px;display:block;
  box-shadow:0 2px 8px rgba(15,35,55,.14);border:2px solid #fff;
}
.t1{background:linear-gradient(140deg,#7fc4e8,#3f7fbf);grid-column:span 2}
.t2{background:linear-gradient(140deg,#f7b98f,#e8735f)}
.t3{background:linear-gradient(140deg,#ffd98a,#f2a63f)}
.t4{background:linear-gradient(140deg,#9fdcc4,#3d9b7d)}
.t5{background:linear-gradient(140deg,#c3b6e8,#7d63c4);grid-column:span 2}
.t.sepia{filter:sepia(.75) contrast(1.05)}

/* Tuile selectionnee + poignees : c'est ce detail qui fait lire la maquette
   comme un logiciel en cours d'utilisation, et non comme un resultat fini. */
.t.sel,.ph.sel{outline:2px solid var(--brand);outline-offset:2px}
.h{
  position:absolute;width:8px;height:8px;background:#fff;
  border:2px solid var(--brand);border-radius:2px;
}
.h.tl{top:-5px;left:-5px}.h.tr{top:-5px;right:-5px}
.h.bl{bottom:-5px;left:-5px}.h.br{bottom:-5px;right:-5px}

.cap-text{
  position:absolute;right:20px;bottom:18px;
  font-family:var(--display);font-weight:800;font-size:1rem;color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.45);
}
.cap-text.big{font-size:1.35rem}

.canvas.sm .tiles{grid-auto-rows:52px;grid-template-columns:repeat(2,1fr)}
.canvas.sm .t1,.canvas.sm .t5{grid-column:span 2}
.canvas.wide .tiles{grid-template-columns:repeat(3,1fr);grid-auto-rows:56px}
.canvas.wide .t1{grid-column:span 1}

/* -- Panneaux d'outils -------------------------------------------------- */
.panelrow{display:grid;grid-template-columns:1fr 122px;gap:14px}
.panelcol{display:grid;gap:12px}
.rail{display:flex;flex-direction:column;gap:11px;padding-top:2px}
.rail-h{height:9px;border-radius:5px;background:var(--line);width:62%}
.slider{position:relative;height:5px;border-radius:3px;background:var(--line);display:block}
.slider i{position:absolute;left:0;top:0;height:100%;border-radius:3px;background:var(--brand)}
.slider b{
  position:absolute;top:50%;width:13px;height:13px;margin-left:-6px;
  transform:translateY(-50%);border-radius:50%;
  background:#fff;border:2px solid var(--brand);box-shadow:var(--shadow-sm);
}
.fontrow{display:flex;align-items:baseline;gap:9px;color:var(--muted);font-family:var(--display);font-weight:700}
.fontrow b{font-size:.8rem}.fontrow .mid{font-size:1.05rem}.fontrow .big{font-size:1.35rem;color:var(--text)}
.swatches{display:flex;gap:6px}
.swatches i{width:15px;height:15px;border-radius:50%;display:block;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.fxrow{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.fx{height:34px;border-radius:7px;display:block;background:linear-gradient(140deg,#7fc4e8,#3f7fbf);border:2px solid transparent}
.fx.on{border-color:var(--brand)}
.fx-blur{filter:blur(2px)}.fx-sepia{filter:sepia(.85)}.fx-bw{filter:grayscale(1)}
.fx-neg{filter:invert(1)}.fx-pix{filter:contrast(1.6) saturate(1.4)}

/* -- Bandeau de reassurance --------------------------------------------- */
.trust{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}
.trust .wrap{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:center}
.tchip{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:.93rem;font-weight:500}
/* 18 px et non 17 : les icones de la barre portent plus de detail que la
   coche qu'elles remplacent. Taille choisie en les regardant a l'echelle
   reelle, pas au juge. */
.tchip .ic{width:18px;height:18px;flex:none;color:var(--brand)}
.ck{width:17px;height:17px;flex:none;color:var(--brand)}

/* -- Etapes ------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:48px}
.step{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:26px 24px 24px;
}
.step .n{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;margin-bottom:14px;
  background:var(--brand);color:#fff;font-family:var(--display);font-weight:800;font-size:.9rem;
}
.step p{color:var(--muted);font-size:.97rem;margin-bottom:18px}
.viz{
  position:relative;border-radius:10px;background:var(--paper-2);
  padding:14px;min-height:104px;display:flex;gap:8px;align-items:center;justify-content:center;
  overflow:hidden;
}
/* Les visuels d'etape sont des decoupes de la VRAIE interface (voir
   ~build-shots.php), et non plus des carres de couleur qui ne montraient rien. */
.viz img{max-width:100%;height:auto;border-radius:6px}
.viz-tall{min-height:200px;align-items:flex-start}
.viz-tall img{max-height:186px;width:auto}
.ph{width:44px;height:44px;border-radius:7px;display:block;border:2px solid #fff;box-shadow:0 2px 6px rgba(15,35,55,.13);position:relative}
.ph-a{background:linear-gradient(140deg,#7fc4e8,#3f7fbf)}
.ph-b{background:linear-gradient(140deg,#f7b98f,#e8735f)}
.ph-c{background:linear-gradient(140deg,#ffd98a,#f2a63f)}
.ph-d{background:linear-gradient(140deg,#9fdcc4,#3d9b7d)}
.viz-drop{border:2px dashed var(--line);background:transparent}
.drop-hint{position:absolute;inset:0;border-radius:10px;background:rgba(42,165,239,.06)}
.viz-arrange .ph-b{transform:rotate(-5deg)}
.viz-arrange .ph-c{transform:rotate(4deg)}
.mini-collage{display:grid;grid-template-columns:repeat(2,26px);grid-auto-rows:26px;gap:4px}
.mini-collage span{border-radius:5px;display:block;border:2px solid #fff}
.mini-collage span:nth-child(1){background:#3f7fbf}
.mini-collage span:nth-child(2){background:#e8735f}
.mini-collage span:nth-child(3){background:#f2a63f}
.mini-collage span:nth-child(4){background:#3d9b7d}
.save-chip{
  margin-left:12px;padding:6px 12px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);
  font-size:.8rem;font-weight:600;color:var(--muted);
}

/* -- Fonctionnalites ---------------------------------------------------- */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:56px}
.feat-rev .feat-txt{order:2}
.feat p{color:var(--muted)}
.ticks{display:grid;gap:10px;margin-top:18px}
.ticks li{display:flex;align-items:flex-start;gap:10px;color:var(--text);font-size:.98rem}
.ticks .ck{margin-top:4px}

/* -- Version complete --------------------------------------------------- */
.pro{
  display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center;
  background:linear-gradient(135deg,var(--brand-ink),var(--brand-deep));
  border-radius:24px;padding:52px 48px;color:#fff;
}
.pro .eyebrow{color:#9fd4f5}
.pro h2{color:#fff}
.pro p{color:rgba(255,255,255,.85)}
.pro .ticks li{color:rgba(255,255,255,.95)}
.pro .ck{color:#7fd4a8}
.pro-card{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r);padding:30px 26px;text-align:center;
  backdrop-filter:blur(6px);
}
.price{font-family:var(--display);font-weight:800;font-size:3.1rem;line-height:1;letter-spacing:-.03em}
.price .cur{font-size:1.5rem;vertical-align:super;margin-right:2px;font-weight:700}
.once{color:rgba(255,255,255,.72);font-size:.9rem;margin:8px 0 20px}
.pro-card .btn-brand{width:100%;background:#fff;color:var(--brand-ink);box-shadow:none}
.pro-card .btn-brand:hover{background:#eaf6ff}
.pro-card small{display:block;margin-top:14px;color:rgba(255,255,255,.62);font-size:.83rem}

/* -- FAQ ---------------------------------------------------------------- */
.faq{margin-top:38px;display:grid;gap:12px}
.qa{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.qa summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:17px 20px;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:600;font-size:1.02rem;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--brand-deep)}
.qa p{padding:0 20px 18px;margin:0;color:var(--muted);font-size:.99rem}
/* Le « + » qui devient « − » : deux trais en pseudo-elements, aucune image. */
.plus{position:relative;width:15px;height:15px;flex:none}
.plus::before,.plus::after{
  content:"";position:absolute;background:var(--faint);border-radius:2px;transition:transform .2s;
}
.plus::before{top:6.5px;left:0;width:15px;height:2px}
.plus::after{left:6.5px;top:0;width:2px;height:15px}
.qa[open] .plus::after{transform:rotate(90deg)}
.faq-all{font-weight:600;display:inline-block;margin-top:26px}

/* -- Appel final -------------------------------------------------------- */
.cta-final{padding:82px 0;background:var(--paper);border-top:1px solid var(--line)}
.cta-final .sub{margin-bottom:26px}

/* -- Page de telechargement --------------------------------------------- */
/* Ratio 16/9 tenu par aspect-ratio : la place est reservee avant que l'iframe
   ne charge, donc aucun saut de mise en page (CLS). */
.video{
  position:relative;aspect-ratio:16/9;margin-top:20px;
  border-radius:12px;overflow:hidden;box-shadow:var(--shadow-md);background:#000;
}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* -- Historique des versions -------------------------------------------- */
.rel-list{margin-top:38px;display:grid;gap:16px}
.rel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 26px}
.rel h2{font-size:1.2rem;margin-bottom:14px;color:var(--brand-deep)}

/* -- Guides -------------------------------------------------------------- */
/* Couverture. Ratio 1200x630 tenu par aspect-ratio : la place est reservee
   avant le chargement, donc aucun saut de mise en page (CLS). */
.guide-cover{
  width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;
  margin:28px 0 6px;border-radius:14px;
  border:1px solid var(--line);box-shadow:var(--shadow-md);
}

.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:18px;font-size:.9rem;color:var(--faint)}
.crumbs a{color:var(--muted)}

/* Etapes numerotees. La puce est en position absolue pour que le texte de
   l'etape reste aligne meme quand le numero passe a deux chiffres. */
.guide-steps{margin:38px 0 0;display:grid;gap:26px;counter-reset:none}
.guide-steps li{display:flex;gap:18px;align-items:flex-start}
.guide-steps .n{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;margin-top:2px;
  background:var(--brand);color:#fff;
  font-family:var(--display);font-weight:800;font-size:.92rem;
}
.guide-steps h2{font-size:1.16rem;margin-bottom:.35em}
.guide-steps p{color:var(--muted);margin:0}

.guide-list{display:grid;gap:12px;margin-top:24px}
.guide-list a{
  display:block;padding:18px 20px;border-radius:12px;
  background:var(--paper);border:1px solid var(--line);
}
.block-alt .guide-list a{background:var(--card)}
.guide-list a:hover{border-color:var(--brand);text-decoration:none}
.guide-list strong{display:block;font-family:var(--display);font-size:1.04rem;color:var(--text)}
.guide-list span{display:block;margin-top:4px;color:var(--muted);font-size:.95rem}
.guide-list-lg{margin-top:38px}
.guide-list-lg a{padding:22px 24px}


/* -- Liste d'articles et corps d'article --------------------------------- */
/* Grille de vignettes. auto-fill + minmax donne 3 colonnes a pleine largeur,
   2 en tablette et 1 sur telephone, sans point de rupture a maintenir. Les
   cartes affichaient auparavant une couverture 1200x630 sur toute la largeur
   du texte, ce qui donnait des images enormes et une page interminable. */
.art-list{
  display:grid;gap:26px;margin-top:44px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.art-list a{
  display:flex;flex-direction:column;height:100%;
  border-radius:14px;overflow:hidden;background:var(--card);border:1px solid var(--line);
  transition:border-color .16s,box-shadow .16s,transform .16s;
}
.art-list a:hover{border-color:var(--brand);box-shadow:var(--shadow-md);transform:translateY(-2px);text-decoration:none}
.art-list img{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover}
/* flex:1 pousse la ligne de meta en bas : les cartes d'une meme rangee gardent
   leurs pieds alignes meme quand les titres n'ont pas le meme nombre de lignes. */
.art-body{padding:18px 20px;display:flex;flex-direction:column;flex:1}
.art-body strong{display:block;font-family:var(--display);font-size:1.05rem;line-height:1.3;color:var(--text);margin-bottom:8px}
.art-body span{display:block;color:var(--muted);font-size:.93rem}
.art-body .meta-line{margin-top:auto;padding-top:12px;font-size:.86rem}

/* Sommaire. Utile au lecteur, et Google en tire parfois des liens directs
   vers une section, affiches sous le resultat. */
.toc{margin:30px 0;padding:18px 22px;border-radius:12px;background:var(--paper-2);border:1px solid var(--line)}
.toc strong{display:block;font-family:var(--display);font-size:.95rem;margin-bottom:10px}
.toc ul{display:grid;gap:7px}
.toc li a{color:var(--brand-deep);font-size:.96rem}

/* Corps rendu depuis le Markdown. */
.prose h2{margin-top:1.7em;font-size:clamp(1.35rem,2.4vw,1.75rem)}
.prose p{color:var(--muted)}
.prose ol{counter-reset:s;display:grid;gap:14px;margin:22px 0}
.prose ol li{counter-increment:s;position:relative;padding-left:40px;color:var(--muted)}
.prose ol li::before{
  content:counter(s);position:absolute;left:0;top:1px;
  width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:.82rem;
}
.prose ul{display:grid;gap:10px;margin:18px 0}
.prose ul li{position:relative;padding-left:0;color:var(--muted);list-style:disc;margin-left:20px}
.prose strong{color:var(--text)}
/* Un tableau doit pouvoir defiler seul sur mobile, sinon c'est la page entiere
   qui part en defilement horizontal. */
.prose .tw{overflow-x:auto;margin:22px 0}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.prose th,.prose td{padding:10px 14px;border:1px solid var(--line);text-align:left;vertical-align:top}
.prose th{background:var(--paper-2);font-family:var(--display);font-weight:700}
.prose td{color:var(--muted)}

/* -- Divers ------------------------------------------------------------- */
.meta-line{color:var(--faint);font-size:.92rem}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;
  background:var(--paper-2);padding:2px 6px;border-radius:5px;
}
.notice{
  padding:14px 16px;border-radius:12px;
  background:#fff6e6;border:1px solid #f3dca8;color:#6b4c07;font-size:.95rem;
}

/* -- Pied de page ------------------------------------------------------- */
footer{background:var(--card);border-top:1px solid var(--line)}
.foot{display:flex;flex-wrap:wrap;gap:44px;justify-content:space-between;padding-top:52px;padding-bottom:34px}
.foot-tag{color:var(--muted);font-size:.95rem;margin:12px 0 0;max-width:34ch}
.foot-links{display:flex;flex-wrap:wrap;gap:11px 28px;align-items:flex-start}
.foot-links a{color:var(--muted);font-size:.95rem}
.foot-bottom{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  padding-top:20px;padding-bottom:30px;
  border-top:1px solid var(--line-soft);color:var(--faint);font-size:.9rem;
}
.foot-sister{display:flex;gap:22px}

/* -- Maquettes des dialogues Windows ------------------------------------
   Elles remplacent deux captures d'ecran qui n'existaient qu'en anglais et en
   francais. Reprises de tapcam, ou le meme montage sert deja.
   La police est celle de Windows : une maquette dans la police du site ne se
   reconnait pas. */
/* stretch et non start : la deuxieme boite est plus haute (elle porte le nom
   du fichier et l'editeur), les deux legendes se retrouvaient donc a des
   hauteurs differentes. */
.winsteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(244px,1fr));gap:30px 24px;align-items:stretch;max-width:820px;margin:22px auto 0}
.winstep{margin:0;display:flex;flex-direction:column}
.winstep .winbox{flex:1}
.winstep figcaption{margin-top:auto}
.winstep figcaption{display:flex;align-items:flex-start;gap:9px;margin-top:13px;color:var(--muted);font-size:.92rem;line-height:1.5}
.winnum{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;font-size:.75rem;font-weight:700}
.winbox{font-family:"Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;position:relative;border-radius:4px;overflow:hidden;box-shadow:0 12px 30px rgba(10,30,45,.17);display:flex;flex-direction:column;min-height:232px;user-select:none}
.winx{position:absolute;top:0;right:0;width:34px;height:22px;display:grid;place-items:center}
.win-arrow{flex:none}
.winbox-ss{background:#0f6cbb;color:#fff;padding:18px 18px 14px}
.winbox-ss .winx{background:#0f6cbb}
.ss-title{color:#fff;font-size:1.3rem;font-weight:600;line-height:1.15;margin:2px 0 12px}
.ss-text{color:#fff;font-size:.82rem;line-height:1.45;margin:0 0 12px;opacity:.96}
.ss-more{display:flex;align-items:center;gap:7px;margin:0}
.ss-link{color:#fff;text-decoration:underline;font-size:.82rem}
.ss-meta{margin:10px 0 0;display:grid;grid-template-columns:auto 1fr;gap:3px 14px;font-size:.8rem}
.ss-meta dt{margin:0;opacity:.85}
.ss-meta dd{margin:0;word-break:break-all}
.winbtns{margin-top:auto;padding-top:16px;display:flex;justify-content:flex-end;align-items:center;gap:9px;flex-wrap:wrap}
.winbtn{background:#fff;color:#1a1a1a;font-size:.8rem;padding:6px 15px;border-radius:2px;white-space:nowrap}
.winbtn-pri{box-shadow:inset 0 0 0 1.5px #0067c0}
@media (max-width:640px){.winsteps{grid-template-columns:1fr;max-width:340px}}

/* Respecte le reglage systeme « reduire les animations ». L'apparition au
   defilement a ete retiree le 2026-08-05 a la demande de David : le contenu
   s'affiche desormais d'emblee. Ce bloc reste utile pour le reste, defilement
   fluide et animations de survol. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn:hover{transform:none}
  .plus::before,.plus::after{transition:none}
}

/* -- Adaptatif ---------------------------------------------------------- */
@media (max-width:980px){
  .pro{grid-template-columns:1fr;gap:34px;padding:42px 32px}
  .steps{grid-template-columns:1fr;gap:18px}
  .feat{grid-template-columns:1fr;gap:32px;margin-top:44px}
  .feat-rev .feat-txt{order:0}
}
@media (max-width:860px){
  .hero{padding:56px 0 60px}
  .hero-inner{grid-template-columns:1fr;gap:40px}
  .hero-win{transform:none}
  .navlinks{display:none}
  .block{padding:62px 0}
  body{font-size:16px}
  h1{font-size:clamp(1.9rem,7vw,2.5rem)}
  .foot{gap:30px}
}
@media (max-width:520px){
  .trust .wrap{gap:10px 18px}
  .tchip{font-size:.87rem}
  .pro{padding:34px 22px}
  .price{font-size:2.6rem}
  .fxrow{grid-template-columns:repeat(3,1fr)}
}

/* Barre de navigation sur petit ecran.
   Mesure a l'origine de ce bloc : a 390 px de large, la barre reclamait 428 px
   et poussait TOUTES les pages en defilement horizontal. La marque, le nom de
   langue en toutes lettres et le bouton ne tiennent pas ensemble sous 430 px.
   On resserre plutot que de masquer : le bouton de telechargement est la
   premiere conversion du site, il reste visible. */
@media (max-width:430px){
  .site-nav .wrap{gap:10px}
  .brand{font-size:1.02rem;gap:8px}
  .mark{width:24px;height:24px}
  .nav-right{gap:8px}
  .langsel summary{padding:7px 10px;gap:5px}
  .langsel .lname{display:none}
  .langsel .lcode{display:inline;font-weight:600;letter-spacing:.02em}
  .nav-cta{padding:8px 14px;font-size:.9rem}
}

/* 320 px : la plus petite largeur que Lighthouse et le test mobile de Google
   evaluent encore. Le defilement horizontal y est signale comme un defaut, et
   il l'est sur toutes les pages a la fois puisqu'il vient de la barre. On
   resserre la gouttiere plutot que de retirer un element. */
@media (max-width:360px){
  .wrap{padding:0 14px}
  .brand{font-size:.97rem}
  .nav-cta{padding:8px 12px;font-size:.87rem}
}