@font-face{font-family:"Geist";src:url("assets/polices/geist-latin-wght-normal.woff2?v=a59aabd24d95") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* ==========================================================================
   Alvec, feuille de style globale.
   Nouvelle interface (septembre 2026) : cadre arrondi menthe, barre du haut
   en verre dépoli, hero photographique, cartes translucides, accent teal.
   Les cotes sont celles de la maquette (largeur de référence 1510 px) ;
   la mise en page est fluide, avec quatre paliers : 1600, 1200, 960 et 700 px.
   Les pages intérieures (pages.css) partagent ces jetons ; --u vaut toujours 1 px.
   ========================================================================== */

:root{
  --u:1px;

  /* Encres */
  --ink:#073b50;
  --ink-2:#0e4559;
  --ink-3:#30566a;
  --ink-4:#587f8f;
  /* #426879 ne tenait que 4,40:1 sur le fond de page : 6,9:1 désormais, lisible en plein jour. */
  --muted:#30566a;
  --placeholder:#476c7c;
  /* Contour des champs : 3,8:1 sur le cadre, 4,4:1 sur le champ blanc. */
  --champ-bord:#557f8e;

  /* Accent unique (teal) */
  --accent:#007f89;
  --accent-strong:#007f89;
  --accent-deep:#006e78;
  /* #009eaa ne donnait que 2,84:1 sur le fond du cadre : sous le seuil de 3:1
     exigé des indicateurs d'état (filet de l'onglet actif). #0090a0 : 3,35:1. */
  --accent-rule:#0090a0;
  --accent-icon:#008692;
  /* Réservé aux petits textes posés sur un fond teinté (pastille numérotée des
     étapes) : --accent-deep n'y atteint que 4,29:1, celui-ci 5,54:1. */
  --accent-deeper:#005c64;
  --focus:#006572;
  /* Noms hérités, utilisés par les pages intérieures et l'administration */
  --blue:var(--accent);
  --blue-700:var(--accent-deep);
  /* Liens des documents (guide et journal des versions) : --accent n'y tenait
     que 4,47:1 sur la carte blanche, --accent-deep donne 5,57:1. */
  --blue-link:var(--accent-deep);
  --navy-900:#052f40;
  --navy-800:#073b50;
  --navy-700:#0a4a60;

  /* Fonds et lignes */
  --page:#c7e1e7;
  --site:#e3f3f5;
  --panel:#edf9fa;
  --white:#fefefe;
  --line:rgba(255,255,255,.88);
  --border:rgba(255,255,255,.88);
  --divider:#bddbde;
  --surface:rgba(255,255,255,.55);
  --surface-strong:rgba(255,255,255,.78);
  --tint:rgba(0,127,137,.09);
  --tint-strong:rgba(0,127,137,.16);
  --txt-2:var(--muted);
  --ombre-encre:linear-gradient(120deg,#073b50 0%,#0a6e78 100%);

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-press:cubic-bezier(.2,0,0,1);
  --sh-site:0 24px 65px rgba(65,108,121,.1);
  --sh-panel:0 25px 100px rgba(7,59,80,.22);
  --sh-pop:0 18px 50px -18px rgba(7,59,80,.35);
  --sh-toast:0 10px 30px rgba(7,59,80,.2);

  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;padding:26px;
  font-family:"Geist","Segoe UI",system-ui,Arial,sans-serif;
  font-size:15px;line-height:1.5;
  color:var(--ink);background:var(--page);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button,a,input{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{cursor:pointer}
b,strong{font-weight:700}
br.d{display:none}

/* ---------------- Cadre du site ---------------- */
.site{
  position:relative;max-width:1510px;margin:auto;
  border:1px solid var(--line);border-radius:34px;
  overflow:hidden;overflow:clip;
  background:var(--site);box-shadow:var(--sh-site);
}
.scenery{
  position:absolute;inset:0 0 auto;height:790px;pointer-events:none;
  background-image:linear-gradient(0deg,var(--site) 0%,transparent 28%),url("assets/hero-scenery.webp?v=cb1164dea165");
  background-size:cover;background-position:center top;
}
.svg-defs{position:absolute;width:0;height:0}
main,.foot{position:relative}

.wrap{width:100%;max-width:none;margin-inline:auto;padding-inline:48px}
.wrap-wide{padding-inline:26px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{position:fixed;top:-100px;left:20px;z-index:120;background:#fff;color:var(--ink);padding:12px 16px;border-radius:12px;font-weight:600;box-shadow:var(--sh-pop)}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:4px}

/* ---------------- Barre du haut ---------------- */
.head{
  position:sticky;top:12px;z-index:60;
  display:flex;align-items:center;gap:22px;
  margin:24px 30px 0;padding:14px 24px;
  border:1px solid var(--line);border-radius:26px;
  background:rgba(248,255,255,.73);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.brand{display:inline-flex;align-items:center;gap:12px;flex:none;white-space:nowrap;font-size:32px;font-weight:750;letter-spacing:-1.5px;color:var(--ink)}
.brand-mark{width:40px;height:40px;flex:none}
.brand-word{line-height:1}

/* Sept liens depuis l'ajout de « Téléchargements » : les écarts et la largeur
   de la recherche sont resserrés pour que la barre tienne sur une seule ligne
   jusqu'en portugais, la langue aux libellés les plus longs. */
.mainnav{display:flex;align-items:center;gap:20px;margin-left:20px;white-space:nowrap}
.mainnav a{
  position:relative;display:block;padding:12px 0;font-size:14px;line-height:1.2;color:var(--ink);
  transition:color .2s var(--ease);
}
.mainnav a:hover,.mainnav a.is-active{color:var(--accent-deep)}
.mainnav a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;border-radius:2px;background:var(--accent-rule)}

.search{
  display:flex;align-items:center;gap:8px;flex:none;
  margin-left:auto;width:24%;max-width:240px;
  padding:9px 14px;border:1px solid #fff;border-radius:40px;background:rgba(255,255,255,.31);
  transition:background-color .2s var(--ease),box-shadow .2s var(--ease);
}
.search:focus-within{background:rgba(255,255,255,.55);box-shadow:0 0 0 3px rgba(0,127,137,.14)}
.search-go{flex:none;display:grid;place-items:center;width:26px;height:26px;border:0;background:none;color:var(--ink);padding:0}
.search-go i{font-size:23px;line-height:1}
.search input{
  flex:1;min-width:0;width:100%;border:0;background:transparent;color:var(--ink);
  font-size:13px;padding:0;outline-offset:8px;
}
.search input::placeholder{color:var(--placeholder)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}

.head-end{display:flex;align-items:center;gap:6px;flex:none}
.icon-btn{
  position:relative;display:grid;place-items:center;min-width:44px;min-height:44px;
  border:0;background:transparent;color:var(--ink);padding:0;border-radius:12px;
  transition:color .2s var(--ease);
}
.icon-btn i{font-size:23px;line-height:1}
.icon-btn:hover{color:var(--accent-deep)}
.badge{
  position:absolute;top:4px;right:2px;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:var(--accent);color:#fff;
  font-size:12px;font-style:normal;font-weight:600;line-height:19px;text-align:center;
  font-variant-numeric:tabular-nums;
}
.burger{display:none}

/* Sélecteur de langue */
.lang{position:relative}
.lang > button{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;
  border:0;background:none;color:var(--ink);font-size:13px;font-weight:500;border-radius:12px;
  transition:color .2s var(--ease);
}
.lang > button:hover{color:var(--accent-deep)}
.lang > button > i:first-child{font-size:22px;line-height:1}
.lang .chev{font-size:12px;line-height:1}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:70;
  min-width:170px;padding:6px;border-radius:16px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-pop);
}
.lang-menu li{list-style:none}
.lang-menu button{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  text-align:left;background:none;border:0;padding:9px 12px;border-radius:10px;
  color:var(--ink);font-size:14px;
}
.lang-menu button:hover{background:var(--tint);color:var(--accent-deep)}
.lang-menu button[aria-checked="true"]{font-weight:600;color:var(--accent-deep)}
.lang-menu button[aria-checked="true"]::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-deep)}

/* ---------------- Boutons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:48px;padding:11px 25px;white-space:nowrap;cursor:pointer;
  border:1px solid #fff;border-radius:40px;background:rgba(255,255,255,.33);
  color:var(--ink);font-weight:500;line-height:1.2;
  transition:transform .18s var(--ease-press),background-color .18s var(--ease-press),
             border-color .18s var(--ease-press),color .18s var(--ease-press),box-shadow .18s var(--ease-press);
}
.btn:hover{background:rgba(255,255,255,.69);transform:translateY(-2px)}
.btn:active{transform:scale(.98)}
.btn i{font-size:18px;line-height:1}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:650}
.btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn-soft{background:rgba(255,255,255,.55);color:var(--ink);border-color:#fff}
.btn-soft:hover{background:rgba(255,255,255,.8)}
.btn-onblue,.btn-ghost{background:rgba(255,255,255,.33);color:var(--ink);border-color:#fff}
.btn-onblue:hover,.btn-ghost:hover{background:rgba(255,255,255,.69)}
.btn-blanc{background:#fff;color:var(--accent-deep);border-color:#fff}
.btn-blanc:hover{background:#f2fbfc;border-color:#f2fbfc}
.btn-full{width:100%}
.btn:disabled,.btn[aria-disabled="true"]{cursor:not-allowed;opacity:.6;transform:none}
/* Pas de règle pour un bouton neutralisé sur fond encre : il n'en existe plus aucun.
   Le pack de tarifs.html porte un <span class="badge-pack">, et les trois bandes
   .bande-cta.marine n'ont qu'un <a class="btn btn-blanc">, qu'aucun code ne désactive.
   Si un <button> désactivé y revient, reprendre son contraste sur l'encre. */
.btn-mini{min-height:38px;padding:7px 16px;font-size:13px}

.linkbtn{
  background:none;border:0;cursor:pointer;padding:12px;min-height:44px;
  color:var(--accent-deep);font-size:14px;font-weight:600;
}
.linkbtn:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------------- Héros ---------------- */
.hero{position:relative;display:flex;align-items:flex-start;min-height:466px;padding:48px 48px 28px}
.hero-copy{position:relative;max-width:620px}
.eyebrow{margin:0 0 17px;font-size:12px;font-weight:600;letter-spacing:3.8px;line-height:1.3;text-transform:uppercase;color:var(--ink)}
.hero h1{
  margin:0 0 18px;font-size:clamp(40px,3.9vw,56px);font-weight:750;line-height:1.04;letter-spacing:-.045em;color:var(--ink);
}
.hero h1 .l1{display:inline}
.hero h1 .hl{color:var(--accent)}
.hero-sub{margin:0 0 25px;font-size:19px;line-height:1.5;color:var(--muted)}

.hero-cta{display:flex;gap:16px;flex-wrap:wrap}
.hero-cta .btn i{font-size:23px}

.promises{display:grid;grid-template-columns:repeat(2,max-content);gap:14px 32px;margin-top:33px}
.promises li{display:flex;align-items:center;gap:11px;font-size:12px;line-height:1.3;color:var(--ink)}
.promises li > i{font-size:29px;line-height:1;flex:none;color:var(--accent-icon)}
.promises .pt{display:block}
.promises b{display:block;font-weight:600;color:var(--ink)}
.promises .pt > span{display:block;margin-top:2px;font-size:12px;color:var(--muted)}

/* ---------------- Nos applications ---------------- */
.apps{padding:0 26px 22px}
.apps-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 16px 12px}
.apps-head h2{font-size:29px;font-weight:700;line-height:1.15;letter-spacing:-1px;color:var(--ink);margin-bottom:4px}
.apps-head p{font-size:14px;line-height:1.4;color:var(--muted)}
.apps-head p b{color:var(--ink);font-weight:600}
.seeall{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:12px;font-size:15px;font-weight:500;color:var(--accent-deep);white-space:nowrap;border-radius:22px;background:rgba(255,255,255,.4)}
.seeall i{font-size:18px;transition:transform .25s var(--ease)}
.seeall:hover i{transform:translateX(3px)}

.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.card{
  position:relative;display:flex;flex-direction:column;min-height:227px;
  padding:23px 21px 18px;border:1px solid #fff;border-radius:22px;
  background:linear-gradient(130deg,rgba(255,255,255,.72),rgba(255,255,255,.26));
  backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(7,59,80,.35)}
.card-top{display:flex;align-items:flex-start;gap:15px}
.applogo-box{display:contents}
.applogo{width:62px;height:auto;flex:none}
.card-txt{flex:1;min-width:0}
.card h3{margin:-2px 0 1px;font-size:24px;font-weight:700;line-height:1.2;letter-spacing:-.9px;color:var(--ink)}
.cat{margin:0 0 11px;font-size:13px;line-height:1.3;color:var(--ink)}
/* Texte courant de la carte : 14 px, le plancher de lisibilité du corps de texte.
   À quatre colonnes, la colonne fait environ 104 px et « permissionnaires » n'y
   tient pas : césure quand la langue le permet, coupure sinon, plutôt qu'un mot
   qui déborde de la carte. */
.cat,.desc{overflow-wrap:break-word;hyphens:auto}
.desc{font-size:14px;line-height:1.45;color:var(--muted)}

.os{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:14px}
.os li{display:inline-flex;align-items:center;gap:6px;line-height:1;font-size:12px;font-weight:500;color:var(--muted);padding:0 10px;border-left:1px solid var(--divider)}
.os li:first-child{padding-left:0;border-left:0}
.os i{font-size:16px;color:var(--accent-icon);line-height:1}

.card-bottom{margin-top:auto;padding-top:16px}
.price{font-size:18px;font-weight:750;line-height:1.2;letter-spacing:-.5px;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
/* Les deux boutons (payer la licence, télécharger via le Store) se partagent la
   ligne quand la carte est assez large, sinon ils passent l'un sous l'autre,
   chacun sur toute la largeur. C'est la base de 168 px qui décide : deux boutons
   réclament 344 px, largeur que la carte n'atteint qu'à trois colonnes (396 px
   de contenu, mesurés sur la fiche produit). À quatre colonnes elle n'offre que
   295 px à la largeur de référence et 225 px au palier de 1200 px : les boutons
   s'empilent, ce qui vaut mieux qu'un libellé cassé en trois lignes dans une
   demi-carte.
   Sans white-space:normal, « Télécharger via le Microsoft Store » (environ
   220 px à 13 px, davantage en anglais et en portugais) débordait de la carte,
   puisque .btn impose nowrap : on préfère le repli sur deux lignes à la coupure.
   Cible tactile portée à 44 px : ce sont désormais les deux actions de la page. */
.card-cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.card-cta .btn{
  flex:1 1 168px;min-height:44px;padding:9px 12px;font-size:13px;gap:6px;
  white-space:normal;overflow-wrap:break-word;text-wrap:balance;
}
/* L'icône ne doit pas se comprimer quand le libellé passe à la ligne. */
.card-cta .btn i{font-size:17px;flex:none}

/* Celui des deux gestes qui n'est pas dominant sur la page. Lequel change selon
   l'endroit : c'est le téléchargement sur les cartes du catalogue, des tarifs et
   en tête de fiche ; c'est le paiement sur la page Téléchargements, dont l'objet
   est justement de télécharger. D'où les deux attributs, habillés pareil.
   Posé sur une carte, .btn-soft ne se voyait pas : son fond blanc translucide
   donne 1,06:1 sur le dégradé de la carte (#eaf6f8 du côté le moins blanc) et sa
   bordure blanche 1,05:1, donc rien ne disait que c'était un bouton. La bordure
   passe au teal --accent-rule : 3,52:1 sur la carte et 3,40:1 sur le fond du
   cadre, au-dessus des 3:1 exigés d'un élément d'interface. Le libellé reste
   --ink, 11,5:1 sur le fond du bouton. En face, le geste dominant garde
   .btn-primary, blanc sur teal plein : 4,70:1, et la différence plein / contour
   se voit d'un coup d'œil, quel que soit celui des deux qui la porte.
   Hors état « Bientôt disponible » : main.js retourne alors le bouton de paiement
   en .btn-soft avec aria-disabled, et une bordure d'accent ferait croire qu'il
   reste cliquable. Cet état garde le voile blanc de .btn-soft. */
.btn-soft[data-telecharger]:not([aria-disabled="true"]),
.btn-soft[data-payer]:not([aria-disabled="true"]){background:var(--surface-strong);border-color:var(--accent-rule)}
.btn-soft[data-telecharger]:not([aria-disabled="true"]):hover,
.btn-soft[data-payer]:not([aria-disabled="true"]):hover{background:#fff;border-color:var(--accent-deep)}

/* Aide sous le bouton de téléchargement (« Essai gratuit, licence à payer
   ensuite »). 12 px, le plancher typographique du dépôt, en --muted : 5,46:1 sur
   la carte et 5,28:1 sur le fond du cadre. Posée dans .card-cta, elle prend sa
   propre ligne au lieu de se glisser entre les deux boutons. .essai-aide est le
   nom que porte la même aide sur la fiche produit : les deux se ressemblent trop
   pour être habillées différemment. */
.card-essai,.essai-aide{margin-top:8px;font-size:12px;line-height:1.35;color:var(--muted)}
.card-essai i,.essai-aide i{font-size:14px;line-height:1;color:var(--accent-icon);vertical-align:-2px;margin-right:4px}
.card-cta > .card-essai{flex:1 0 100%;margin-top:2px}

/* « Voir les détails » n'est plus un bouton mais un lien texte : le propriétaire
   veut deux boutons, pas trois. Discret sans être illisible : --accent-deep
   donne 5,44:1 sur la carte, le soulignement le distingue du texte courant, et
   la hauteur de 35 px dépasse la cible minimale de 24 px. Le contour de focus
   global (--focus, 6,30:1 sur la carte) s'y applique tel quel. La transition de
   couleur est neutralisée par le garde-fou « mouvement réduit » plus bas. */
.card-lien{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:6px;padding:8px 2px;
  font-size:13px;font-weight:600;color:var(--accent-deep);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color .2s var(--ease);
}
.card-lien:hover{color:var(--ink)}
.card-lien i{font-size:15px;line-height:1;flex:none}
/* Dans un conteneur flex ou grille, un lien est étiré par défaut : on le garde
   sur sa propre ligne, collé à gauche, pour qu'il ne soit pas pris pour un
   troisième bouton pleine largeur. */
.card-cta > .card-lien{flex:1 0 100%;justify-content:flex-start}

.card-foot{margin-top:12px;text-align:center;font-size:12px;line-height:1.3;color:var(--muted)}
/* Deux lignes réservées : une phrase plus longue ne décale pas les boutons de sa carte. */
@media (min-width:701px){#appGrid .card-foot{min-height:2.6em}}

.vide{margin-top:12px;padding:35px;text-align:center;border:1px solid #fff;border-radius:20px;background:rgba(255,255,255,.44);font-size:14px;color:var(--ink)}

/* ---------------- Garanties ---------------- */
.garanties{padding:6px 26px 26px}
.gar-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.gar{
  display:flex;align-items:center;gap:14px;min-height:72px;padding:16px 20px;
  border:1px solid #fff;border-radius:22px;background:rgba(255,255,255,.44);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.gar:hover{transform:translateY(-2px);box-shadow:0 18px 40px -24px rgba(7,59,80,.3)}
.gar > i{font-size:34px;flex:none;line-height:1;color:var(--accent-icon)}
.gar b{display:block;font-size:14px;font-weight:700;line-height:1.25;color:var(--ink)}
.gar span{display:block;margin-top:3px;font-size:12px;line-height:1.3;color:var(--muted)}

/* ---------------- Pied de page ---------------- */
.foot{display:flex;align-items:center;gap:30px;padding:6px 32px 24px}
.foot-brand{flex:none}
.brand-foot{gap:8px;font-size:22px;letter-spacing:-.6px}
.brand-foot .brand-mark{width:30px;height:30px}
.foot .brand-tag{margin:-7px 0 0 38px;font-size:12px;line-height:1.4;color:var(--muted);white-space:nowrap}
.foot-contact{margin:6px 0 0 38px;font-size:12px;line-height:1.5;color:var(--muted);white-space:nowrap}
/* Courriel et téléphone : même cible tactile que les liens du pied (38 px de
   haut, au-delà du minimum de 24 px), et survol en --accent-deep, qui passe de
   4,19:1 à 5,26:1 sur le fond du cadre. */
.foot-contact a{display:inline-block;padding:10px 0;color:var(--muted);transition:color .2s var(--ease)}
.foot-contact a:hover{color:var(--accent-deep)}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;margin:auto;font-size:12px}
.foot-links a{display:inline-block;padding:10px 0;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .2s var(--ease)}
.foot-links a:hover{color:var(--accent-deep)}
.foot-end{display:flex;align-items:center;gap:14px;flex:none}
.socials{display:flex;align-items:center;gap:2px}
.socials a{display:grid;place-items:center;width:36px;height:36px;font-size:20px;color:var(--ink);transition:color .2s var(--ease)}
.socials a:hover{color:var(--accent-deep)}
.copy{font-size:12px;line-height:1.5;color:var(--muted);text-align:right}
.copy span{display:block}

/* ---------------- Changement de langue ---------------- */
body{transition:opacity .18s var(--ease)}
body.lang-fade{opacity:.35}

/* ---------------- Panier (panneau latéral) ---------------- */
.scrim{position:fixed;inset:0;z-index:90;background:rgba(24,59,73,.38);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cart{
  position:fixed;top:0;right:0;bottom:0;z-index:100;width:min(440px,100%);
  display:flex;flex-direction:column;
  background:var(--panel);color:var(--ink);border-left:1px solid #fff;
  box-shadow:var(--sh-panel);font-size:15px;line-height:1.5;overflow-y:auto;
}
.cart-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 26px 18px}
.cart-head h2{font-size:27px;font-weight:700;letter-spacing:-1px}
.cart-head button{
  display:grid;place-items:center;width:44px;height:44px;border:0;background:none;border-radius:12px;
  color:var(--ink);font-size:23px;transition:color .2s var(--ease);
}
.cart-head button:hover{color:var(--accent-deep)}
.cart-vide{padding:48px 30px;text-align:center;color:var(--muted);font-size:15px;line-height:1.6}
.cart-vide i{display:block;font-size:44px;color:var(--accent-icon);margin-bottom:14px;opacity:.6}
.cart-list{flex:1;min-height:96px;overflow-y:auto;padding:0 26px}
.cart-item{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid var(--divider)}
.cart-item img{width:44px;height:48px;object-fit:contain;flex:none}
.cart-item .ci-txt{flex:1;min-width:0}
.cart-item b{display:block;font-size:15px;color:var(--ink)}
.cart-item small{display:block;color:var(--muted);font-size:13px}
.qty{display:flex;align-items:center;gap:2px;border:1px solid #fff;border-radius:40px;background:rgba(255,255,255,.55);overflow:hidden}
.qty button{width:44px;height:44px;border:0;background:none;color:var(--ink);font-size:16px;display:grid;place-items:center;transition:background-color .2s var(--ease)}
.qty button:hover{background:rgba(255,255,255,.9);color:var(--accent-deep)}
.qty span{min-width:26px;text-align:center;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.cart-foot{padding:18px 26px 26px;display:grid;gap:12px;justify-items:center}
.cart-total{display:flex;align-items:baseline;justify-content:space-between;width:100%;font-size:20px;margin:4px 0 6px}
.cart-total b{font-variant-numeric:tabular-nums}
.cart-note{font-size:12px;color:var(--muted);line-height:1.5;text-align:center}
.cart .btn{min-height:48px}
.cart .linkbtn{padding:8px 12px;min-height:40px}

.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:110;
  display:flex;align-items:center;gap:10px;max-width:90%;
  padding:12px 24px;border-radius:40px;
  background:var(--ink);color:#fff;font-size:15px;font-weight:500;line-height:1.4;
  box-shadow:var(--sh-toast);text-align:center;
}
.toast i{color:#4ddbd5;font-size:18px;flex:none}

/* ---------------- Mouvement (retenu) ---------------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(16px)}
  .reveal.in{
    opacity:1;transform:none;
    transition:opacity .7s var(--ease) var(--d,0ms),transform .7s var(--ease) var(--d,0ms);
  }
  .hero-copy > *{animation:heroIn .7s var(--ease) both}
  .hero-copy > :nth-child(2){animation-delay:.09s}
  .hero-copy > :nth-child(3){animation-delay:.18s}
  .hero-copy > :nth-child(4){animation-delay:.27s}
  .hero-copy > :nth-child(5){animation-delay:.36s}
  .cart{animation:slideIn .32s var(--ease) both}
  .scrim{animation:fadeIn .28s var(--ease) both}
  .toast{animation:pop .35s var(--ease) both}
  @keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes slideIn{from{transform:translateX(100%)}to{transform:none}}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  @keyframes pop{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
}
/* Mouvement réduit : la règle universelle couvre toutes les transitions et
   animations déclarées ici comme dans pages.css, y compris celles ajoutées plus
   tard, puisque !important l'emporte sur l'ordre des feuilles. Les délais et les
   répétitions sont neutralisés aussi : une transition de durée nulle mais
   retardée reste un saut différé, et une animation répétée reste un mouvement. */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  .hero-copy > *{animation:none !important;opacity:1 !important;transform:none !important}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   Paliers
     1600 px et plus : hero plus haut.
     1500 px : langue réduite à son icône, barre du haut resserrée.
     1360 px : navigation repliée derrière le bouton menu (sept liens).
     1200 px : marges resserrées.
      960 px : grilles sur deux colonnes.
      700 px : mobile, une colonne, recherche sur sa propre ligne.
   ========================================================================== */
@media (min-width:1600px){
  .hero{min-height:495px}
  .scenery{height:850px}
}

@media (max-width:1500px){
  .lang > button span{display:none}
  .lang > button{padding:0 6px}
  .head{gap:16px}
  .mainnav{margin-left:14px;gap:16px}
  .search{max-width:230px}
}

/* Entre 1181 et 1360 px, les sept liens restent visibles : c'est la recherche qui cède sa
   place, sauf sur le catalogue, seule page où elle sert, où elle passe dessous. */
@media (min-width:1181px) and (max-width:1360px){
  .search{display:none}
  .head-end{margin-left:auto}
  body:has(#appGrid[data-catalogue]) .head{flex-wrap:wrap}
  body:has(#appGrid[data-catalogue]) .search{display:flex;order:5;flex:1 0 100%;width:auto;max-width:none;margin:0}
}

/* Navigation repliée : panneau déroulant sous la barre du haut, dès que les sept liens
   ne tiennent plus (mesuré dans les quatre langues). Le palier de 1200 px ne redéclare
   ni .mainnav ni .search : elles écraseraient la mise en page du panneau. */
@media (max-width:1180px){
  .burger{display:grid}
  .search{flex:1;width:auto;max-width:none;margin-left:6px}
  .mainnav{
    display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:65;
    grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0;padding:8px;
    border:1px solid #fff;border-radius:22px;
    background:#f4fbfc;box-shadow:var(--sh-pop);white-space:normal;
  }
  .mainnav.is-open{display:grid}
  .mainnav a{padding:12px 14px;border-radius:14px;font-size:15px;text-align:center}
  .mainnav a:hover{background:rgba(255,255,255,.8)}
  .mainnav a.is-active{background:var(--tint);color:var(--accent-deep)}
  .mainnav a.is-active::after{display:none}
}

@media (max-width:1200px){
  body{padding:18px}
  .head{gap:14px;margin:20px 24px 0;padding:12px 18px}
  .wrap{padding-inline:38px}
  .hero{min-height:440px;padding:42px 38px 28px}
  .hero-copy{max-width:58%}
  .hero h1{font-size:clamp(38px,4.3vw,52px)}
  .hero-sub{font-size:17px}
  .promises{gap:14px 20px}
  .promises li{font-size:12px;gap:8px}
  .promises .pt > span{font-size:12px}
  .card{padding:20px 16px 16px}
  .card h3{font-size:22px}
  .foot-links{gap:0 14px}
}

@media (max-width:960px){
  .brand{font-size:26px}
  .brand-mark{width:34px;height:34px}
  .hero{min-height:460px}
  .hero-copy{max-width:48%}
  .hero h1{font-size:clamp(30px,4.4vw,40px)}
  .hero-sub{font-size:16px}
  .promises{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
  .grid,.gar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card{min-height:200px;padding:23px}
  .scenery{height:730px;background-position:58% top}
  .foot{flex-wrap:wrap;gap:16px 30px}
  .foot-links{order:3;width:100%;margin:0;justify-content:flex-start}
  .foot-end{margin-left:auto}
}

@media (max-width:700px){
  body{padding:10px}
  .site{border-radius:26px}
  .wrap,.wrap-wide{padding-inline:22px}
  .head{position:relative;top:auto;flex-wrap:wrap;gap:9px;margin:12px;padding:10px 13px;border-radius:21px}
  .brand{font-size:25px}
  .brand-mark{width:32px;height:32px}
  /* « Téléchargements » est un mot long et insécable : les colonnes se comptent
     d'elles-mêmes pour qu'il tienne dans sa case, deux sur un écran de 375 px,
     une seule en dessous d'environ 330 px. Libellés à 14 px, cible de 44 px. */
  .mainnav{grid-template-columns:repeat(auto-fit,minmax(128px,1fr));border-radius:20px}
  .mainnav a{padding:14px 8px;font-size:14px}
  .search{order:5;flex:none;width:100%;margin:0;padding:10px 14px}
  .head-end{margin-left:auto;gap:0}
  .icon-btn{min-width:38px;min-height:40px}
  .lang > button{min-height:40px;padding:0 4px}
  .hero{min-height:760px;padding:25px 22px 280px}
  .hero-copy{max-width:100%;width:100%;isolation:isolate}
  .hero-copy::before{content:"";position:absolute;inset:-25px -22px -15px;z-index:-1;background:linear-gradient(var(--site) 65%,rgba(227,243,245,0))}
  .eyebrow{font-size:12px;letter-spacing:2px;margin-bottom:14px}
  .hero h1{font-size:clamp(34px,10vw,44px);letter-spacing:-.04em;max-width:460px}
  .hero-sub{font-size:16px;max-width:340px}
  .hero-cta{gap:9px}
  .btn{font-size:13px;padding:10px 18px;min-height:46px}
  .promises{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 12px;margin-top:25px}
  .promises li{font-size:12px;gap:7px}
  .promises li > i{font-size:22px}
  .promises .pt > span{display:none}
  .scenery{top:555px;height:395px;background-size:auto 395px;background-position:68% top;opacity:.95;
    -webkit-mask-image:linear-gradient(transparent,#000 22%,#000 85%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 85%,transparent)}
  .apps{padding:0 14px 23px}
  .apps-head{flex-direction:column;align-items:flex-start;padding:0 7px 14px;gap:4px}
  .apps-head h2{font-size:25px}
  .apps-head p{font-size:12px}
  .seeall{font-size:12px;min-height:0;padding:6px 0 0;white-space:nowrap}
  .grid,.gar-grid{grid-template-columns:1fr}
  .card{min-height:185px;padding:22px}
  .card-top{gap:20px}
  .card h3{font-size:24px}
  .applogo{width:68px}
  .price{font-size:19px}
  .garanties{padding:0 14px 23px}
  .foot{flex-direction:column;align-items:center;gap:18px;padding:0 20px 23px;text-align:center}
  /* Plus de nowrap : à 12 px, ces deux lignes débordaient d'un écran de 320 px. */
  .foot .brand-tag{margin:-4px 0 0;white-space:normal}
  .foot-contact{margin:4px 0 0;white-space:normal}
  .foot-links{justify-content:center;gap:0 12px}
  .foot-end{margin:0;flex-direction:column;gap:8px}
  .copy{text-align:center}
  .toast{font-size:13px;width:max-content;max-width:90%}
}

/* ---------- Page Applications : Permy d'abord, ce qui vient ensuite à sa place ---------- */
.card-vedette{grid-column:1 / -1}
.card-bientot{min-height:0}
.card-bientot .card-lien{margin-top:12px}
.bientot-titre{font-size:24px;font-weight:700;letter-spacing:-.6px;color:var(--ink);grid-column:1 / -1;margin-top:18px}
/* ---------- Accueil : comment ça se passe ---------- */
.comment{padding:14px 42px 30px}
.comment h2{font-size:24px;font-weight:700;letter-spacing:-.6px;color:var(--ink)}
.comment ol{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.comment li{padding-top:12px;border-top:2px solid var(--accent)}
.comment h3{font-size:16px;font-weight:700;color:var(--ink)}
.comment p{margin-top:5px;font-size:14.5px;line-height:1.5;color:var(--muted)}
@media (min-width:901px){
  .card-vedette{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);column-gap:36px;align-items:start}
  .card-vedette .card-top,.card-vedette .os,.card-vedette .card-foot{grid-column:1}
  .card-vedette .card-bottom{grid-column:2;grid-row:1 / span 3;margin-top:0;padding-top:0}
}
@media (max-width:900px){
  .comment ol{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .comment{padding:6px 22px 23px}
  .comment ol{grid-template-columns:minmax(0,1fr);gap:14px}
}

/* Lien du suivi : dans le menu déroulant seulement ; sur grand écran, l'icône suffit. */
.mainnav .nav-suivi{display:none}
@media (max-width:1180px){.mainnav .nav-suivi{display:block}}

/* Proposition de changer de langue : posée sur la page, elle ne décale rien. */
.proposition-langue{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);padding:10px 12px 10px 16px;border-radius:12px;background:var(--ink);color:#fff;font-size:14px;box-shadow:0 12px 32px -14px rgba(7,59,80,.6)}
.proposition-langue button{font:inherit;font-weight:600;color:var(--ink);background:#fff;border:0;border-radius:8px;padding:0 12px;min-height:40px;cursor:pointer;white-space:nowrap}
.proposition-langue button.fermer{background:transparent;color:#fff;padding:0;width:40px}

.proposition-langue :focus-visible{outline-color:#fff}

/* Le suivi est le seul filet sans compte client : il porte son nom là où la barre a la place. */
.icon-lib{display:none}
@media (min-width:1361px){
  #lienCompte{grid-auto-flow:column;gap:6px;padding:0 8px}
  .icon-lib{display:inline;font-size:14px;font-weight:500;white-space:nowrap}
}

/* ---------- Lecture sur téléphone (lot 7 de l'audit) ----------
   Plancher de 14 px, boutons à 15 px, cibles de 44 px, recherche à 16 px pour que le
   téléphone ne zoome pas. Placé en dernier : ces règles l'emportent sur les paliers. */
@media (max-width:700px){
  html{scroll-padding-top:12px}
  .head{padding:9px 13px}
  .search{display:none;min-height:48px;padding:0 14px 0 4px}
  body:has(#appGrid[data-catalogue]) .search{display:flex}
  .search-go{width:44px;height:44px}
  .search input{font-size:16px;min-height:44px}
  .brand{min-height:44px}
  .icon-btn{min-width:44px;min-height:44px}
  .lang > button,.lang-menu button{min-height:44px}
  .badge{top:1px;right:0;min-width:21px;height:21px;font-size:14px;line-height:21px}
  .btn,.card-cta .btn{font-size:15px}
  .btn-mini{min-height:44px;font-size:14px}
  .eyebrow{font-size:14px;letter-spacing:1px}
  .promises li,.apps-head p,.cat,.os li,.card-essai,.essai-aide,.card-lien,.card-foot,.gar span,.foot .brand-tag,.foot-contact,.foot-links,.copy,.toast,.cart-note,.cart-item small{font-size:14px}
  .seeall{font-size:14px;min-height:44px;padding:0}
  .desc,.comment p{font-size:16px}
  .foot-links a,.foot-contact a{display:inline-flex;align-items:center;min-height:44px;padding:0}
  .cart .linkbtn{min-height:44px}
}
/* Les petits téléphones gagnent quelques pixels sur les marges de la barre ; sous 360 px,
   elle ne tient plus : le suivi reste dans le menu et le pied de page. */
@media (max-width:380px){.head{margin:10px;padding:9px 8px}}
@media (max-width:359px){#lienCompte{display:none}}