/* =========================================================================
   OURAYA CLOUD · FEUILLE DE LA PAGE APPLICATIONS (ouraya.cloud/applications)
   Charte « La lumière » : jetons, barre, pied, lampe, boutons, fanions et
   questions vivent dans lumiere.css. Ce fichier n'ajoute que les blocs de
   cette page, sans une couleur écrite en dur : les deux modes suivent seuls.
   Il habille aussi la page « pas encore en ligne » de /telecharger/mac
   (src/applis.js, « .appli-absente »).
   ========================================================================= */


/* ================================================================= HERO ==
   Le portable est dessiné dans le tiers droit de l'image, la moitié gauche
   est vide : sur un grand écran, l'image est posée en fond à droite, le titre
   dans sa partie vide, et la fiche de téléchargement descend sous le
   portable. Le texte passe DEVANT l'image par son rang et sa position, sans
   z-index (lumiere.css, « LA LAMPE »). Sous 900 px, tout s'empile. */
.appli-hero{padding-block:clamp(18px,3vw,44px) clamp(64px,9vw,120px)}
.appli-hero-corps{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  grid-template-rows:auto auto;
  column-gap:clamp(30px,5vw,72px);
  align-items:start;
}
/* L'image du portable, dans une fenêtre nette (le langage de la page
   d'accueil) : en haut de la colonne de droite, au-dessus de la fiche,
   jamais derrière le texte. Cadrée sur le portable, dans le tiers droit de
   la photographie. */
.appli-hero-visuel{
  position:relative;
  grid-column:2; grid-row:1;
  align-self:end;
  margin:clamp(40px,7vw,96px) 0 clamp(18px,2vw,26px);
  pointer-events:none;
}
.appli-hero-visuel img{aspect-ratio:16/10;object-fit:cover;object-position:76% 50%}
.appli-hero-texte{
  position:relative;
  grid-column:1; grid-row:1 / span 2;
  padding-top:clamp(28px,7vw,96px);
}
.appli-hero .affiche{
  font-size:clamp(2.3rem,3.9vw,3.4rem);
  margin-bottom:clamp(22px,3vw,34px);
}
.appli-hero .chapo{max-width:44ch}
.appli-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.4vw,38px)}
.appli-hero-pied{margin:16px 0 0;letter-spacing:.08em}
/* La bêta, sous les boutons : un encart creusé, filet d'accent à gauche,
   comme « Pourquoi cet avertissement » plus bas. Il remplit le bas de la
   colonne de gauche, à côté de la fiche. */
.beta{
  max-width:520px;
  margin-top:clamp(26px,3.2vw,36px);
  padding:18px 20px 17px;
  background:var(--fond-creux);
  border:1px solid var(--trait);
  border-left:2px solid var(--accent);
  border-radius:var(--r-net);
  box-shadow:inset 0 1px 0 var(--arete-lumiere-faible);
}
.beta .fanion{margin-bottom:10px}
.beta-titre{
  margin:0 0 6px;
  font-weight:500;
  font-size:1.06rem;
  line-height:1.35;
  letter-spacing:-.015em;
}
.beta p:not(.fanion){margin:0;font-size:.92rem;line-height:1.6;color:var(--texte-doux)}
.beta a{color:var(--accent)}

/* Rien de publié : les liens de téléchargement s'éteignent (applications.js). */
a[data-lien-telecharger][aria-disabled="true"]{opacity:.45;pointer-events:none;box-shadow:none}
@media (max-width:560px){.appli-hero-actions .btn{flex:1 1 100%}}

/* Sous 900 px, une seule colonne, dans l'ordre de lecture : le titre, le
   portable, le chapô et les boutons, puis la fiche. Le bloc de texte
   s'efface (display:contents) pour que l'image vienne entre ses enfants. */
@media (max-width:899px){
  .appli-hero-corps{display:flex;flex-direction:column;align-items:stretch}
  .appli-hero-texte{display:contents}
  .appli-hero-texte > .sur-titre{order:1;margin-top:clamp(12px,4vw,30px)}
  .appli-hero-texte > .affiche{order:2;margin-bottom:0}
  .appli-hero-visuel{
    order:3;
    position:relative; width:100%;
    margin:clamp(18px,5vw,30px) 0 clamp(18px,5vw,28px);
  }
  .appli-hero-visuel img{aspect-ratio:16/10;object-fit:cover;object-position:72% 50%}
  .appli-hero-texte > .chapo{order:4}
  .appli-hero-actions{order:5}
  .appli-hero-pied{order:6}
  .appli-hero-texte > .beta{order:6;max-width:none}
  .appli-hero-corps > .fiche{order:7;margin-top:clamp(30px,8vw,44px);max-width:none}
}
@media (max-width:620px){
  .appli-hero .affiche br{display:none}
  .appli-hero-visuel img{aspect-ratio:5/4}
}


/* ================================================================ FICHE ==
   Une carte en relief, la seule de l'écran qu'allume un filet d'accent. */
.fiche{
  position:relative;
  grid-column:2; grid-row:2;
  max-width:520px;
  width:100%;
  justify-self:end;
  padding:clamp(22px,2.6vw,32px);
}
.fiche::before{
  content:""; position:absolute; inset:-1px -1px auto -1px; height:2px;
  border-radius:var(--r-net) var(--r-net) 0 0;
  background:var(--accent-aplat);
}
@media (max-width:899px){.fiche{justify-self:stretch;max-width:none}}

.fiche-tete{display:flex;align-items:center;gap:16px;margin-bottom:18px}
/* L'icône de l'application est un carré plein : arrondie comme une icône
   du Dock, sans tuile autour (deux cadres l'un dans l'autre). */
.fiche-icone{
  flex:none;
  width:64px;height:64px;
  border-radius:22.5%;
  box-shadow:0 0 0 1px var(--trait), var(--ombre-courte);
}
.fiche-tete .fanion{margin-bottom:8px}
.fiche-titre{
  font-weight:500;
  font-size:clamp(1.25rem,2vw,1.45rem);
  line-height:1.2;
  letter-spacing:-.025em;
}

/* Les repères : intitulé à gauche, valeur à droite, comme la page de vente. */
.fiche-reperes{margin:0 0 22px}
.fiche-reperes > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:18px;
  padding:10px 0;
  border-top:1px solid var(--trait);
}
.fiche-reperes > div:last-child{border-bottom:1px solid var(--trait)}
.fiche-reperes dt{
  flex:none;
  font:400 11px/1.4 var(--f-technique);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--texte-faible);
}
.fiche-reperes dd{
  margin:0;
  font-size:.93rem; line-height:1.45;
  color:var(--texte);
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.fiche-reperes > div[hidden]{display:none !important}

.fiche-bouton{width:100%;padding-block:17px;font-size:1rem}
/* Rien de publié : le bouton reste, éteint, et une phrase dit pourquoi. */
.fiche-absente{
  margin:12px 0 0;
  font-size:.9rem;
  color:var(--texte-doux);
}
.fiche-ailleurs{margin:12px 0 0}
.fiche-maj{margin:12px 0 0;color:var(--accent)}

/* L'empreinte : soixante-quatre caractères, coupés où il faut. */
.empreinte{margin-top:22px;padding-top:18px;border-top:1px solid var(--trait)}
.empreinte-titre{
  margin:0 0 8px;
  font:400 11px/1.4 var(--f-technique);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--texte-faible);
}
.empreinte-ligne{display:flex;align-items:stretch;gap:10px}
.empreinte-valeur{
  flex:1 1 auto; min-width:0;
  display:block;
  padding:10px 12px;
  background:var(--fond-creux);
  border:1px solid var(--trait);
  border-radius:var(--r-net);
  box-shadow:var(--creux-ombre);
  font:400 11.5px/1.55 var(--f-technique);
  letter-spacing:.02em;
  color:var(--texte-doux);
  overflow-wrap:anywhere;
  user-select:all;
}
.empreinte-copier{
  flex:none;
  align-self:center;
  padding:9px 14px;
  background:transparent;
  border:1px solid var(--trait-net);
  border-radius:var(--r-net);
  color:var(--texte);
  font:500 .85rem/1 var(--f-titre);
  cursor:pointer;
  transition:border-color .25s var(--sortie), color .25s var(--sortie);
}
.empreinte-copier:hover{border-color:var(--accent-trait);color:var(--accent)}
.empreinte-copier[data-fait]{border-color:var(--accent-trait);color:var(--accent)}
.empreinte-retour{margin-top:6px;min-height:1.3em}
.empreinte-retour:empty{min-height:0;margin:0}

.fiche-note{margin-top:18px}
.fiche-note a{color:var(--accent)}


/* ====================================================== PREMIER LANCEMENT ==
   Deux marches, une par version de macOS. Les onglets (une adresse chacun,
   ?macos=15 et ?macos=13) n'existent qu'avec le script : sans lui, les deux
   marches se suivent, chacune sous son titre. */
.ouvrir{border-top:1px solid transparent}
main > section + section.ouvrir::before,
main > section + section.fonctions::before,
main > section + section.bientot::before,
main > section + section#questions::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--trait);
}

.onglets-systeme{
  position:relative;
  display:inline-grid;
  grid-template-columns:1fr 1fr;
  padding:4px;
  margin:0 0 clamp(26px,3vw,40px);
  background:var(--fond-creux);
  border:1px solid var(--trait);
  border-radius:var(--r-net);
  box-shadow:var(--creux-ombre);
}
.onglet-systeme{
  position:relative;
  padding:12px 20px;
  border:1px solid transparent;
  border-radius:var(--r-net);
  font-family:var(--f-titre); font-weight:500; font-size:.92rem;
  color:var(--texte-faible);
  text-decoration:none; text-align:center;
  white-space:nowrap;
  transition:color .3s var(--sortie), background-color .3s var(--sortie), border-color .3s var(--sortie);
}
.onglet-systeme:hover{color:var(--texte-doux)}
.onglet-noms{
  display:block;
  margin-top:4px;
  font:400 10.5px/1.2 var(--f-technique);
  letter-spacing:.06em;
  color:var(--texte-faible);
}
.onglet-systeme[aria-selected="true"]{
  color:var(--texte);
  background:var(--surface-haute);
  border-color:var(--trait-net);
  box-shadow:inset 0 1px 0 var(--arete-lumiere), var(--ombre-courte);
}
@media (max-width:520px){
  .onglets-systeme{display:grid;width:100%}
  .onglet-systeme{padding-inline:8px;font-size:.86rem;white-space:normal}
}

/* Avec les onglets, le titre de chaque marche ne sert plus qu'aux lecteurs d'écran. */
.marche + .marche{margin-top:clamp(40px,5vw,64px)}
.avec-onglets .marche + .marche{margin-top:0}
.marche-titre{
  font-weight:400; font-size:clamp(1.2rem,2vw,1.45rem);
  margin:0 0 22px;
}
.avec-onglets .marche-titre{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.avec-onglets .marche:not([hidden]){animation:marche-entree .5s var(--sortie) both}
@keyframes marche-entree{from{opacity:0;transform:translateY(8px)}}

.etapes-ouvrir{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2vw,26px);
  counter-reset:etape;
}
.etapes-ouvrir.etapes-trois{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1040px){
  .etapes-ouvrir,.etapes-ouvrir.etapes-trois{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .etapes-ouvrir,.etapes-ouvrir.etapes-trois{grid-template-columns:minmax(0,1fr);gap:34px}
  .schema{aspect-ratio:16/10}
}
.etape-ouvrir{position:relative;min-width:0}
.etape-ouvrir-num{
  margin:18px 0 6px;
  font-family:var(--f-titre); font-weight:100;
  font-size:clamp(2.4rem,4vw,3.2rem); line-height:1;
  letter-spacing:-.05em;
  color:var(--accent);
}
.etape-ouvrir h4{
  font-weight:500; font-size:1.08rem; line-height:1.34;
  letter-spacing:-.02em;
  margin:0 0 8px;
}
.etape-ouvrir p:not(.etape-ouvrir-num){color:var(--texte-doux);font-size:.95rem;line-height:1.58}
.etape-ouvrir p.etape-ouvrir-note{margin-top:8px;font-size:.88rem;color:var(--texte-faible)}


/* ============================================================== SCHÉMAS ==
   Des dessins au trait, à la charte, qui montrent OÙ cliquer. Ils ne copient
   pas l'apparence du système : pas de feux de fenêtre, pas de polices du
   système, pas de reflet. L'endroit à viser porte un anneau qui respire. */
.schema{
  position:relative;
  aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:16px;
  background:var(--fond-creux);
  border:1px solid var(--trait);
  border-radius:var(--r-visuel);
  box-shadow:inset 0 1px 0 var(--arete-lumiere-faible), var(--creux-ombre);
  overflow:hidden;
  font:400 10.5px/1.25 var(--f-technique);
  color:var(--texte-doux);
}
.schema > *{position:relative}

.schema-tuile{
  flex:none;
  display:grid; place-items:center;
  width:64px; height:64px;
  border-radius:16px;
  background:var(--surface);
  border:1px solid var(--trait);
  box-shadow:inset 0 1px 0 var(--arete-lumiere);
}
.schema-tuile img{width:44px;height:44px;border-radius:22.5%;box-shadow:0 0 0 1px var(--trait)}

/* Glisser : la tuile, une flèche pointillée, le dossier. */
.schema-fleche{
  flex:0 1 64px; min-width:28px;
  height:2px;
  background:repeating-linear-gradient(to right,var(--accent) 0 6px,transparent 6px 11px);
  position:relative;
}
.schema-fleche::after{
  content:""; position:absolute; right:-2px; top:-4px;
  width:9px; height:9px;
  border-top:2px solid var(--accent); border-right:2px solid var(--accent);
  transform:rotate(45deg);
}
@media (prefers-reduced-motion:no-preference){
  .schema-fleche{animation:glisser 1.6s linear infinite}
  @keyframes glisser{from{background-position:0 0}to{background-position:22px 0}}
}
.schema-dossier{
  flex:none;
  position:relative;
  width:82px; height:60px;
  margin-top:8px;
  border-radius:4px 8px 8px 8px;
  background:var(--surface);
  border:1px solid var(--accent-trait);
  box-shadow:0 0 0 4px var(--accent-voile);
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:7px;
}
.schema-dossier::before{
  content:""; position:absolute; left:-1px; top:-9px;
  width:34px; height:9px;
  border:1px solid var(--accent-trait); border-bottom:0;
  border-radius:4px 4px 0 0;
  background:var(--surface);
}
.schema-dossier span{font-size:9.5px;color:var(--texte-doux)}

/* L'avertissement : un signe, trois lignes, deux boutons. */
.schema-boite{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  width:min(100%,220px);
  padding:16px 14px 14px;
  background:var(--surface);
  border:1px solid var(--trait);
  border-radius:12px;
  box-shadow:inset 0 1px 0 var(--arete-lumiere), 0 2px 0 var(--arete-ombre);
}
.schema-signe{
  display:grid; place-items:center;
  width:30px; height:30px;
  border-radius:50%;
  border:1.5px solid var(--texte-faible);
  font:700 16px/1 var(--f-titre);
  color:var(--texte-doux);
}
.schema-lignes{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%}
.schema-lignes i,.schema-colonne i,.schema-contextuel i{
  display:block; height:5px; border-radius:2px;
  background:var(--texte-faible); opacity:.35;
}
.schema-lignes i:nth-child(1){width:70%}
.schema-lignes i:nth-child(2){width:88%}
.schema-lignes i:nth-child(3){width:52%}
.schema-boutons{display:flex;flex-direction:column;gap:6px;width:100%;margin-top:2px}

.schema-pastille{
  display:block;
  padding:6px 10px;
  border:1px solid var(--trait-net);
  border-radius:7px;
  background:var(--fond-creux);
  font:500 10.5px/1.2 var(--f-texte);
  color:var(--texte-doux);
  text-align:center;
  white-space:nowrap;
}
/* L'endroit où cliquer. */
.schema-vise{
  background:var(--accent-aplat);
  border-color:transparent;
  color:var(--sur-accent);
  box-shadow:0 0 0 3px var(--accent-voile);
}
@media (prefers-reduced-motion:no-preference){
  .schema-vise,.schema-vise-texte{animation:respirer 2.4s var(--entree-sortie) infinite}
  @keyframes respirer{
    0%,100%{box-shadow:0 0 0 3px var(--accent-voile)}
    50%{box-shadow:0 0 0 7px var(--accent-voile)}
  }
}

/* Les réglages : une colonne de rubriques, un panneau, une rangée. */
.schema-reglages{justify-content:flex-start;align-items:stretch;gap:0;padding:0}
.schema-colonne{
  flex:0 0 38%;
  display:flex; flex-direction:column; gap:9px; justify-content:center;
  padding:14px 10px;
  border-right:1px solid var(--trait);
  background:color-mix(in srgb,var(--surface) 55%,transparent);
}
.schema-colonne i{width:72%}
.schema-colonne i:nth-child(2){width:56%}
.schema-colonne i:last-child{width:64%}
.schema-vise-texte{
  display:block;
  padding:5px 7px;
  border-radius:6px;
  background:var(--accent-aplat);
  color:var(--sur-accent);
  font:500 9.5px/1.25 var(--f-texte);
  box-shadow:0 0 0 3px var(--accent-voile);
}
.schema-panneau{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; justify-content:flex-end; gap:8px;
  padding:14px 12px 18px;
}
.schema-rubrique{font:600 10.5px/1.2 var(--f-texte);color:var(--texte)}
.schema-rangee{
  display:flex; flex-direction:column; align-items:flex-start; gap:7px;
  padding:9px;
  border:1px solid var(--trait);
  border-radius:8px;
  background:var(--surface);
}
.schema-phrase{font-size:9.5px;color:var(--texte-faible);white-space:normal}

/* La confirmation : une empreinte, un champ, le bouton. */
.schema-confirmer{flex-direction:column;gap:10px}
.schema-empreinte{
  position:relative;
  width:40px; height:40px;
  border-radius:50%;
  border:1.5px solid var(--accent-trait);
}
.schema-empreinte i{
  position:absolute; inset:7px;
  border-radius:50%;
  border:1.5px solid var(--accent-trait);
  border-bottom-color:transparent;
}
.schema-empreinte i:nth-child(2){inset:13px;border-left-color:transparent}
.schema-empreinte i:nth-child(3){inset:18px;border:0;background:var(--accent-aplat)}
.schema-champ{
  width:min(100%,170px);
  padding:6px 10px;
  border:1px solid var(--trait);
  border-radius:7px;
  background:var(--surface);
  letter-spacing:.2em;
  text-align:center;
  color:var(--texte-faible);
}

/* Le clic droit : la tuile et son menu. */
.schema-menu{gap:8px}
.schema-contextuel{
  display:flex; flex-direction:column; gap:8px;
  width:min(52%,140px);
  padding:8px;
  margin-top:34px;
  background:var(--surface);
  border:1px solid var(--trait);
  border-radius:9px;
  box-shadow:0 2px 0 var(--arete-ombre);
}
.schema-contextuel i{width:80%;margin-left:7px}
.schema-contextuel i:nth-child(3){width:60%}

.pourquoi{
  max-width:780px;
  margin-top:clamp(40px,5vw,64px);
  padding:clamp(22px,3vw,32px);
  border-left:2px solid var(--accent);
}
.pourquoi h3{font-weight:500;font-size:1.12rem;margin:0 0 12px}
.pourquoi p{color:var(--texte-doux);font-size:.97rem}
.pourquoi code,.reponse-texte code{
  font-family:var(--f-technique); font-size:.86em;
  padding:2px 6px;
  border-radius:var(--r-net);
  background:var(--fond-creux);
  border:1px solid var(--trait);
  color:var(--texte);
  white-space:nowrap;
}


/* ======================================================= L'APPLICATION ==
   La vue « Ciel » des synchronisations dans une fenêtre dessinée en CSS :
   une barre de titre, trois pastilles neutres (pas les feux du système), et
   la lumière de la page qui tombe dessus. La fenêtre se redresse en entrant. */
.apercu-appli{
  position:relative;
  margin:0 auto clamp(44px,6vw,80px);
  max-width:1160px;
  perspective:1800px;
}
.apercu-fenetre{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  background:var(--surface);
  border:1px solid var(--trait-net);
  box-shadow:inset 0 1px 0 var(--arete-lumiere), 0 2px 0 var(--arete-ombre);
  transform-origin:50% 0;
}
.apercu-barre{
  display:flex; align-items:center; gap:7px;
  height:34px;
  padding:0 14px;
  border-bottom:1px solid var(--trait);
  background:var(--fond-creux);
}
.apercu-barre i{
  width:11px; height:11px;
  border-radius:50%;
  background:var(--trait-net);
}
.apercu-barre span{
  flex:1;
  margin-right:47px;
  text-align:center;
  font:500 11.5px/1 var(--f-titre);
  letter-spacing:.02em;
  color:var(--texte-faible);
}
.apercu-fenetre img{display:block;width:100%;height:auto}
.apercu-legende{
  margin:18px auto 0;
  max-width:60ch;
  text-align:center;
  font-size:.93rem;
  color:var(--texte-doux);
}
@media (prefers-reduced-motion:no-preference){
  .apercu-appli.voile .apercu-fenetre{transform:rotateX(9deg) scale(.97)}
  .apercu-appli.voile.vu .apercu-fenetre{
    transform:none;
    transition:transform 1.2s var(--sortie) .1s;
  }
}
@media (max-width:620px){
  .apercu-barre{height:26px;padding:0 10px;gap:5px}
  .apercu-barre i{width:8px;height:8px}
  .apercu-barre span{display:none}
  .apercu-fenetre{border-radius:10px}
}


/* ============================================================ FONCTIONS == */
.fonctions-liste{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);
}
.fonction{
  position:relative;
  padding:clamp(22px,2.6vw,32px);
  transition:transform .4s var(--sortie), box-shadow .4s var(--sortie);
}
.fonction:hover{transform:translateY(-3px)}
.fonction-icone{color:var(--accent);margin-bottom:18px}
.fonction h3{font-size:1.14rem;margin:0 0 10px}
.fonction p{color:var(--texte-doux);font-size:.95rem;line-height:1.6;margin:0}
.fonction-vedette::before{
  content:""; position:absolute; inset:-1px -1px auto -1px; height:2px;
  border-radius:var(--r-net) var(--r-net) 0 0;
  background:var(--accent-aplat);
}
@media (max-width:980px){.fonctions-liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.fonctions-liste{grid-template-columns:minmax(0,1fr)}}


/* ============================================================== BIENTÔT ==
   Cinq plateformes dans une seule pièce découpée par ses gouttières, comme
   la grille des formules de la page de vente. */
.bientot .tete-visuel{--tete-part:1.1fr}
@media (max-width:760px){.bientot-visuel{max-width:560px}}
.plateformes{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1px;
  background:var(--trait);
  border:1px solid var(--trait);
  border-radius:var(--r-bloc);
  overflow:hidden;
}
.plateforme{
  display:flex; flex-direction:column;
  padding:clamp(20px,2.2vw,28px);
  background:var(--surface);
  color:var(--texte-faible);
  transition:background .35s var(--sortie);
}
.plateforme:hover{background:var(--surface-haute)}
.plateforme svg{margin-bottom:18px}
.plateforme .fanion{align-self:flex-start}
.plateforme h3{font-size:1.05rem;color:var(--texte);margin:0 0 8px}
.plateforme p:not(.fanion){font-size:.9rem;line-height:1.55;color:var(--texte-doux);margin:0}
@media (max-width:1040px){.plateformes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){
  .plateformes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plateforme:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (max-width:420px){
  .plateforme{padding:18px 16px}
  .plateforme svg{margin-bottom:12px}
}
@media (max-width:340px){.plateformes{grid-template-columns:minmax(0,1fr)}}


/* ============================================================ QUESTIONS ==
   La même mise en page que la page de vente (vente.css). */
.questions-corps{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(26px,5vw,70px);
  align-items:start;
}
.questions-tete{position:sticky;top:110px;margin-bottom:0}
.questions-liste{border-top:1px solid var(--trait)}
.reponse-texte a{color:var(--accent)}
@media (max-width:860px){
  .questions-corps{grid-template-columns:1fr}
  .questions-tete{position:static}
}


/* ============================================================ OUVERTURE ==
   La page se referme sur sa source, comme la page de vente. */
.ouverture{position:relative;overflow:hidden}
.ouverture-corps{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(30px,5vw,70px);
  align-items:center;
}
.ouverture-texte h2{margin-bottom:18px}
.ouverture-texte .chapo{max-width:46ch}
.ouverture-actions{
  display:flex; flex-direction:column; gap:12px;
  padding:clamp(22px,3vw,38px);
}
.ouverture-actions .btn{width:100%}
.ouverture-actions .mention{margin:6px 0 0}
@media (max-width:860px){.ouverture-corps{grid-template-columns:1fr}}


/* =================================================== PAS ENCORE EN LIGNE ==
   La page que rend /telecharger/mac tant que rien n'est publié. */
.appli-absente{padding-block:clamp(48px,12vh,140px)}
.appli-absente-marque{display:inline-block;margin-bottom:clamp(36px,8vh,80px)}
.appli-absente-marque img{width:200px}
.appli-absente h1{
  font-weight:300;
  font-size:clamp(1.9rem,4.4vw,3rem);
  line-height:1.08;
  margin-bottom:22px;
}
.appli-absente .chapo{margin-bottom:30px}


/* ================================================== MOINS DE MOUVEMENT == */
@media (prefers-reduced-motion:reduce){
  .fonction:hover{transform:none}
}


/* ================================================= LE LANGAGE DE L'ACCUEIL ==
   La page d'accueil (vente.css, 01/10) a posé une typographie plus discrète,
   des surfaces mates et un rythme plus serré. La page des applications s'y
   aligne, sans toucher à ses textes : titres de section plus sobres,
   sections moins espacées, cartes sans ombre floue, illustrations dans une
   fenêtre nette (lumiere.css, « VISUELS »), plus de halo. */
section{padding-block:clamp(56px,6.5vw,96px)}
.appli-hero{padding-block:clamp(18px,3vw,44px) clamp(56px,7vw,96px)}
h2{font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.12;letter-spacing:-.032em}
.surface,.carte{
  border-radius:var(--r-net);
  box-shadow:inset 0 1px 0 var(--arete-lumiere), inset 1px 0 0 var(--arete-lumiere-faible);
}