/* TERRE ARIDE — page d'accueil. Feuille dediee : les 80 autres pages gardent
   la revue de site.css, celle-ci porte la vitrine.
   ==========================================================================
   LA VOIX EST CELLE D'UNE REDACTION. Titraille en serif a graisses optiques,
   posee grand et maigre — a 90 px, l'axe opsz de Newsreader amincit les
   delies et donne le contraste d'une page de magazine. Capitales reservees
   aux surtitres, en interlettrage large. Filets d'un pixel, jamais de
   cartouche. Le blanc fait le rythme.

   La structure ne bouge pas : elle avait ete validee. C'est la typographie
   qui change de registre — la lineale en capitales serrees sonnait logiciel,
   pas publication.

   Ce qui est ecarte, pour ne pas y revenir : le fond sombre, la titraille en
   lineale condensee, et les sections « titre a gauche + trois colonnes »
   repetees cinq fois. */

:root {
  /* LE CREME. Le meme ivoire que les 80 autres pages : la landing cesse
     d'etre une ile. C'est aussi le fond devant lequel la capture du produit
     — elle-meme sur ivoire — se pose sans jurer. */
  --fond: #faf8f3;
  --fond-2: #f3efe5;
  --fond-3: #ece5d8;
  --bord: rgba(20, 17, 14, .13);
  --bord-fort: rgba(20, 17, 14, .26);

  /* L'encre chaude du site, jamais un gris bleute */
  --txt: #14110e;
  --txt-2: #665d53;
  --txt-3: #8b8175;

  /* Une seule couleur vive, celle de la marque. 5,8:1 sur l'ivoire : elle
     passe en texte comme en aplat. */
  --vif: #8a5423;
  --vif-clair: #6d4019;
  --vif-voile: rgba(138, 84, 35, .10);

  /* Le serif de presse porte la titraille et le texte courant ; la lineale
     descend au rang d'utilitaire (surtitres, boutons) ; la chasse fixe garde
     les chiffres. Une page ou tout est dans la meme famille n'a pas de voix. */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Archivo', system-ui, -apple-system, sans-serif;
  --nb: 'IBM Plex Mono', ui-monospace, monospace;
}

body.landing {
  background: var(--fond); color: var(--txt);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* La lueur du haut : un halo tres faible derriere le titre. C'est le seul
   effet de la page, et il est a 12 % — au-dela, on tombe dans le gabarit a
   degrade que tout le monde utilise. */
.landing main { position: relative; }
.landing main::before {
  content: ''; position: absolute; inset: -140px 0 auto 0; height: 760px;
  background: radial-gradient(62% 58% at 50% 0%, var(--vif-voile), transparent 70%);
  pointer-events: none; z-index: 0;
}
.landing section { position: relative; z-index: 1; border: 0; padding: 0; }

.bloc { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }
/* `section` est plus specifique que `.bloc` dans la regle precedente : sans
   cette qualification, son padding:0 annulait silencieusement les gouttieres
   de toute la landing, surtout visible sur telephone. */
.landing .bloc { padding-inline: clamp(20px, 5vw, 40px); }
.landing .espace { padding-top: clamp(76px, 9vw, 136px); }

/* ---------------------------------------------------------------- la voix */

.landing h1 {
  font-family: var(--serif); font-weight: 300; font-style: normal;
  font-size: clamp(42px, 7vw, 92px); line-height: 1.0; letter-spacing: -.022em;
  /* opsz haut : les delies s'amincissent, c'est ce qui fait la titraille de
     magazine plutot qu'un gros texte. */
  font-variation-settings: 'opsz' 72;
  margin: 0 auto; max-width: 16ch; text-wrap: balance;
}
.landing h1 em { font-style: italic; }
.landing h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3.9vw, 46px); line-height: 1.08; letter-spacing: -.018em;
  font-variation-settings: 'opsz' 40;
  margin: 0 0 18px; text-wrap: balance;
}
.landing h3 {
  font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.3;
  letter-spacing: -.008em; margin: 0 0 7px;
}
.landing p { max-width: none; margin: 0; font-family: var(--serif); }
.landing .conduite {
  font-family: var(--serif); font-size: clamp(17px, 1.55vw, 20.5px);
  line-height: 1.62; color: var(--txt-2); max-width: 50ch;
}
.landing .conduite em { font-style: italic; color: var(--txt); }
.centre { text-align: center; }
.landing .centre .conduite { margin-left: auto; margin-right: auto; }
.mobile-points, .mobile-conf, .mobile-seul, .offre-mobile { display: none; }

/* Le surtitre : capitales largement interlettrees, un filet dessous. C'est
   la seule capitale de la page, et elle sert a nommer la rubrique. */
.landing .sur {
  display: block; font: 500 11px/1 var(--sans); letter-spacing: .3em;
  text-transform: uppercase; color: var(--vif); margin: 0 0 18px;
}
.landing .centre .sur { text-align: center; }
.filet-h { display: block; width: 46px; height: 1px; background: var(--txt); margin: 0 0 26px; }
.centre .filet-h { margin-left: auto; margin-right: auto; }

/* Plus de pastille arrondie : une ligne de credit, comme un chapeau de
   rubrique. Le point coloré suffit a signaler l'etat. */
.landing .pastille-e {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 26px; padding: 0;
  border: 0; background: none;
  font: 500 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--txt-3);
}
.pastille-e i { width: 5px; height: 5px; border-radius: 50%; background: var(--vif);
  font-style: normal; flex: none; }

/* ------------------------------------------------------------- les actions */

.agir, .agir-2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 30px; border-radius: 0; border: 1px solid transparent;
  font: 500 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.agir { background: var(--txt); color: var(--fond); font-weight: 500; }
.agir:hover { background: var(--vif); }
.agir-2 { background: transparent; color: var(--txt); border-color: var(--txt); }
.agir-2:hover { background: var(--txt); color: var(--fond); }
.duo-agir { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.centre .duo-agir { justify-content: center; }

.landing a:focus-visible, .landing button:focus-visible, .landing label:focus-within {
  outline: 2px solid var(--vif); outline-offset: 3px;
}

/* ================================================= LE PRODUIT INTERACTIF
   Pas de capture figee : le plan, ses cotes et le releve de fabrication sont
   recalcules dans la page avec les memes conversions que l'atelier. */

.vitrine {
  position: relative; margin: clamp(32px, 4vw, 52px) auto 0; max-width: 640px;
  padding: 10px; border-radius: 0;
  background: linear-gradient(180deg, var(--fond-3), rgba(236, 229, 216, .35));
}
.vitrine .cadre-p {
  position: relative;
  overflow: hidden; border-radius: 0; border: 1px solid var(--bord-fort);
  background: #fff; line-height: 0;
  box-shadow: 0 30px 64px -28px rgba(20, 17, 14, .42);
}
.vitrine img { display: block; width: 100%; height: auto; }
/* le pied de la capture se fond dans la page : une capture qui se termine
   par un bord franc ressemble a une image collee */
.vitrine::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: 10px; height: 11%;
  border-radius: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(250, 248, 243, .96) 96%);
}

/* ---------------------------------------------------------- les preuves */

/* Quatre chiffres, sur une ligne. Ce sont des faits verifiables sur le
   produit, pas des chiffres d'entreprise inventes — on n'a ni clients a
   citer ni volumes a annoncer, et une fausse preuve sociale se voit. */
.preuves {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 0;
  padding: 0; border-top: 1px solid var(--txt); border-bottom: 1px solid var(--bord);
  background: var(--bord); overflow: hidden;
}
@media (max-width: 760px) { .preuves { grid-template-columns: repeat(2, 1fr); } }
.preuves li { list-style: none; padding: 24px 22px; background: var(--fond); }
.preuves .nbr { display: block; font: 500 clamp(24px, 2.8vw, 32px)/1 var(--nb);
  letter-spacing: -.03em; color: var(--txt); }
.preuves .quoi { display: block; margin-top: 10px; font-family: var(--serif);
  font-size: 14.5px; line-height: 1.5; color: var(--txt-2); }

/* -------------------------------------------------------- les deux blocs */

/* Texte d'un cote, capture de l'autre, et on alterne. C'est la forme des
   pages de logiciel, et elle a une raison : chaque affirmation est posee a
   cote de sa preuve. */
.duel-bloc {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(30px, 5vw, 72px); align-items: center;
}
.duel-bloc.inverse > *:first-child { order: 2; }
@media (max-width: 900px) {
  .duel-bloc, .duel-bloc.inverse { grid-template-columns: 1fr; }
  .duel-bloc.inverse > *:first-child { order: 0; }
}
.livrable-demo {
  border: 1px solid var(--bord-fort); background: #fff;
  padding: clamp(20px, 3vw, 30px);
  box-shadow: 0 22px 50px -30px rgba(20, 17, 14, .35);
}
.livrable-tete { display: flex; justify-content: space-between; gap: 18px;
  align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--bord); }
.livrable-tete .sur { margin: 0; }
.livrable-orientation { border: 0; padding: 0; background: transparent;
  color: var(--txt-2); font: 500 10px/1.4 var(--sans); letter-spacing: .09em;
  text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px;
  cursor: pointer; }
#livrable-plan { display: block; width: 100%; height: auto; margin: 10px 0 4px; }
.livrable-commandes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 16px 0; border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); }
.livrable-commandes fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.livrable-commandes legend, .livrable-source > span { display: block; margin-bottom: 8px;
  color: var(--txt-2); font: 500 9px/1.3 var(--sans); letter-spacing: .14em;
  text-transform: uppercase; }
.livrable-choix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.livrable-choix button { min-width: 0; padding: 9px 4px; border: 1px solid var(--bord-fort);
  background: #fff; color: var(--txt); font: 500 10px/1 var(--nb); cursor: pointer; }
.livrable-choix button[aria-checked="true"] { background: var(--txt); color: var(--fond); }
.livrable-source { display: grid; grid-template-columns: 1fr auto; gap: 5px 14px;
  align-items: center; padding: 16px 0; }
.livrable-source > span { margin: 0; }
.livrable-source output { font: 500 11px/1 var(--nb); color: var(--vif); }
.livrable-source input { grid-column: 1 / -1; width: 100%; accent-color: var(--vif); }
.livrable-cotes { margin: 0; border-top: 1px solid var(--bord); }
.livrable-cotes div { display: flex; justify-content: space-between; gap: 18px;
  padding: 9px 0; border-bottom: 1px solid var(--bord); }
.livrable-cotes dt { color: var(--txt-2); font: 400 11px/1.35 var(--sans); }
.livrable-cotes dd { margin: 0; text-align: right; color: var(--txt);
  font: 500 11px/1.35 var(--nb); font-variant-numeric: tabular-nums; }
.livrable-note { min-height: 3em; margin: 16px 0; color: var(--txt-2);
  font: 400 13px/1.5 var(--serif); }
.livrable-demo .agir { width: 100%; text-align: center; }
@media (max-width: 520px) {
  .livrable-commandes { grid-template-columns: 1fr; }
  .livrable-tete { align-items: flex-start; }
}

.liste-pt { margin: 26px 0 0; padding: 0; }
.liste-pt li { list-style: none; position: relative; padding: 14px 0 14px 26px;
  border-top: 1px solid var(--bord); font-family: var(--serif);
  font-size: 16px; line-height: 1.55; color: var(--txt-2); }
.liste-pt li b { color: var(--txt); font-weight: 500; }
.liste-pt li::before { content: ''; position: absolute; left: 2px; top: 20px;
  width: 8px; height: 4px; border-left: 1.5px solid var(--vif);
  border-bottom: 1.5px solid var(--vif); transform: rotate(-45deg); }

/* ------------------------------------------------------------- le depot */

.depose {
  text-transform: none; letter-spacing: 0;
  display: block; max-width: 480px; margin: 30px auto 0; padding: 22px 24px;
  cursor: pointer; text-align: center; border-radius: 0;
  border: 1px solid var(--bord-fort); background: var(--fond-2);
  transition: border-color .16s ease, background .16s ease;
}
.depose:hover, .depose.survol { border-color: var(--vif); background: var(--fond-3); }
.depose strong { display: block; font: 500 11.5px/1.3 var(--sans);
  letter-spacing: .18em; text-transform: uppercase; margin-bottom: 8px; }
.depose span { font-family: var(--serif); font-size: 15px; color: var(--txt-2); }
.a-lire-seul { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.verdict-l { max-width: 480px; margin: 14px auto 0; padding: 14px 18px;
  border-radius: 0; background: var(--fond-2); border-left: 2px solid var(--vif);
  font-family: var(--serif); font-size: 15.5px; line-height: 1.6; color: var(--txt-2); }
.verdict-l b { color: var(--vif); font-weight: 500; font-family: var(--nb); font-size: .95em; }

/* --------------------------------------------------------------- l'offre */

.offre {
  max-width: 420px; margin: 40px auto 0; padding: 30px 28px; text-align: left;
  border: 0; border-top: 1px solid var(--txt); background: none;
}
.offre-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; max-width: 980px; margin: 40px auto 0; text-align: left; }
.offre-grille .offre { display: flex; flex-direction: column; width: auto;
  max-width: none; min-height: 220px; margin: 0; }
.offre-grille .offre h3 { font: 500 11px/1.2 var(--sans); letter-spacing: .18em;
  text-transform: uppercase; color: var(--txt-3); margin-bottom: 22px; }
.offre-grille .offre-ultra { background: var(--txt); color: var(--fond); padding-inline: 30px; }
.offre-grille .offre-ultra h3, .offre-grille .offre-ultra .par,
.offre-grille .offre-ultra .offre-quoi { color: var(--fond-3); }
.offre-inclus { max-width: 62ch; margin: 28px auto 0; font-family: var(--serif);
  font-size: 16px; line-height: 1.6; color: var(--txt-2); }
.offre-actions { justify-content: center; margin-top: 24px; }
.centre > .offre-pied { margin: 14px auto 0; font-family: var(--serif);
  font-size: 13.5px; line-height: 1.5; color: var(--txt-3); }
@media (max-width: 760px) {
  .offre-grille { grid-template-columns: 1fr; max-width: 460px; }
  .offre-grille .offre { min-height: 0; }
}
.offre .somme { font: 500 46px/1 var(--nb); letter-spacing: -.045em; }
.offre .par { margin: 10px 0 22px; font-family: var(--sans); font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--txt-3); }
.offre .agir { width: 100%; margin-top: 26px; }

/* Le reveil : douze pixels, une fois. La classe est posee par le script. */
@media (prefers-reduced-motion: no-preference) {
  .landing .dort > * { opacity: 0; transform: translateY(12px); }
  .landing .vu > * { opacity: 1; transform: none;
    transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
  .landing .vu > *:nth-child(2) { transition-delay: .07s; }
  .landing .vu > *:nth-child(3) { transition-delay: .14s; }
}

/* ================================================ LA COMPARAISON DES ACCES
   Le probleme n'etait pas le prix, c'etait de savoir OU l'on tombe. « Postes
   ouverts a l'annee » ne veut rien dire pour qui n'a jamais achete de licence
   au poste. On pose donc les deux acces cote a cote, ligne par ligne, et on
   nomme les choses : un poste est un ordinateur.

   Le prix professionnel reste absent volontairement — il depend du nombre de
   postes — mais l'absence est expliquee et assortie d'un delai de reponse.
   Un « nous contacter » sans delai se lit comme une fin de non-recevoir. */
.compare {
  width: 100%; border-collapse: collapse; margin: 34px 0 0; text-align: left;
  font-family: var(--serif); font-size: 15.5px;
}
.compare caption { text-align: left; padding-bottom: 14px;
  font-family: var(--sans); font-size: 11px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--vif); }
.compare th, .compare td { padding: 14px 16px 14px 0; border-top: 1px solid var(--bord);
  vertical-align: top; }
.compare thead th { border-top: 1px solid var(--txt); border-bottom: 0;
  font-family: var(--sans); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 500; color: var(--txt); padding-top: 12px; }
.compare thead th:first-child { color: var(--txt-3); }
.compare tbody th { font-family: var(--sans); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 500; color: var(--txt-3); width: 24%; }
.compare td { color: var(--txt-2); }
.compare td b { color: var(--txt); font-weight: 500; }
.compare .prix td { font-family: var(--nb); font-size: 17px; color: var(--txt);
  border-top: 1px solid var(--txt); }
@media (max-width: 760px) {
  .compare, .compare tbody, .compare tr, .compare td, .compare th { display: block; width: auto; }
  .compare thead { display: none; }
  .compare tbody th { border-top: 1px solid var(--txt); padding-bottom: 6px; }
  .compare td { padding: 0 0 10px; border-top: 0; }
  .compare td::before { content: attr(data-col) " — "; font-family: var(--sans);
    font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); }
  .compare .prix td { border-top: 0; }
}

/* ------------------------------------------------- la vitrine qui repond

   Tant qu'on n'a rien depose, la vitrine montre l'atelier. Des qu'une image
   arrive, elle montre CELLE-LA, aux deux tailles d'impression dessinees a
   la meme echelle. Une capture figee ne repond pas a la seule question que
   se pose le visiteur : « et la mienne, ca donne quoi ». */

.depose-h { margin-top: 26px; }
/* En flux, pas en absolu : sur un telephone le cadre de la capture fait
   255 px de haut, et un panneau absolu s'y ecrasait jusqu'a rendre le
   comparatif illisible. En flux, le cadre grandit avec son contenu. */
.vitrine .cadre-p.repond picture { display: none; }
.regle {
  position: relative; display: flex; flex-direction: column;
  gap: clamp(14px, 2vw, 22px); padding: clamp(18px, 3vw, 34px);
  background: var(--fond-2); text-align: left;
  /* .cadre-p pose line-height: 0 pour coller les captures : sans ce
     retablissement, les libelles ont une hauteur nulle et disparaissent. */
  line-height: 1.5;
}
.regle[hidden] { display: none; }
.regle-tete { display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; border-bottom: 1px solid var(--bord); padding-bottom: 10px; }
.regle-nom { font-family: var(--serif); font-size: 15px; color: var(--txt-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.regle-px { font-size: 13px; color: var(--txt-3); }
.regle-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 40px);
  align-items: center; min-height: clamp(200px, 34vw, 340px); }
.regle-cas { display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  justify-content: center; }
.regle-etq { font: 500 10.5px/1 var(--sans); letter-spacing: .18em;
  text-transform: uppercase; color: var(--txt-3); }
.regle-etq.gagne, .regle-cm.gagne { color: var(--vif); }
.regle-boite { border: 1px solid var(--bord-fort); background: var(--fond-3);
  overflow: hidden; line-height: 0; }
.regle-boite img { display: block; width: 100%; height: 100%; object-fit: cover; }
.regle-cm { font-size: clamp(15px, 2.4vw, 21px); }
.regle-note { margin: 0; font-family: var(--serif); font-size: 14.5px;
  line-height: 1.55; color: var(--txt-2); }
.regle-retour {
  align-self: flex-start; font: 500 10.5px/1 var(--sans); letter-spacing: .16em;
  text-transform: uppercase; color: var(--txt-3); background: none;
  border: 0; border-bottom: 1px solid var(--bord-fort); padding: 0 0 3px; cursor: pointer;
}
.regle-retour:hover { color: var(--vif); border-bottom-color: var(--vif); }
@media (max-width: 560px) {
  .regle-duo { gap: 14px; }
  .regle-note { font-size: 13.5px; }
}

/* --------------------------------------------- l'offre, dite en clair */

.offre .offre-quoi { margin: 0 0 22px; font-family: var(--serif);
  font-size: 17.5px; line-height: 1.5; color: var(--txt); }
.offre .offre-pied { margin: 14px 0 0; font-family: var(--serif);
  font-size: 13.5px; line-height: 1.5; color: var(--txt-3); }

/* ------------------------------------- le vrai avant / apres, calcule ici

   Deux tailles cote a cote repondent a « ca fera quelle taille ». Elles ne
   repondent pas a « et la nettete ». Ce bloc-la calcule vraiment : un
   morceau de l'image du visiteur passe par le meme reseau que l'atelier,
   contre le meme morceau en bicubique. Rien n'est prepare a l'avance, donc
   rien ne peut etre flatte. */

.regle-agir { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.agir-3 {
  font: 500 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  padding: 11px 16px; color: var(--fond-2); background: var(--txt);
  border: 0; cursor: pointer;
}
.agir-3:hover { background: var(--vif); }
.agir-3[disabled] { background: var(--txt-3); cursor: progress; }
.duel-vif {
  position: relative; display: flex; flex-direction: column;
  gap: clamp(10px, 1.6vw, 14px); padding: clamp(16px, 2.2vw, 24px);
  background: var(--fond-2); text-align: left; line-height: 1.5;
}
.duel-vif[hidden] { display: none; }
.duel-tete { display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; border-bottom: 1px solid var(--bord); padding-bottom: 10px; }
.duel-titre { font-family: var(--serif); font-size: 15px; color: var(--txt-2); }
.duel-etat { font-size: 12px; color: var(--txt-3); }
.duel-cadre {
  position: relative; width: 100%; max-width: 380px; margin: 0 auto;
  aspect-ratio: 1 / 1; overflow: hidden;
  border: 1px solid var(--bord-fort); background: var(--fond-3);
  touch-action: none; cursor: ew-resize; user-select: none;
}
.duel-cadre canvas { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }
.duel-cadre .dessus { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.duel-poignee { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px;
  background: #f6f1e6; transform: translateX(-1px); box-shadow: 0 0 0 1px rgba(20,17,14,.45); }
.duel-poignee::after { content: ''; position: absolute; top: 50%; left: 50%;
  width: 40px; height: 40px; transform: translate(-50%,-50%);
  border: 2px solid #f6f1e6; border-radius: 50%; background: rgba(20,17,14,.30); }
.duel-etq { position: absolute; bottom: 10px; z-index: 2; font: 500 10px/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase; padding: 5px 9px;
  background: rgba(20,17,14,.72); color: #f6f1e6; }
.duel-etq.g { left: 10px; } .duel-etq.d { right: 10px; }
.duel-note { margin: 0 auto; max-width: 52ch; text-align: center;
  font-family: var(--serif); font-size: 13.5px; line-height: 1.5; color: var(--txt-2); }
.duel-tete { max-width: 380px; margin: 0 auto; width: 100%; }
.duel-cadre:focus-visible { outline: 2px solid var(--vif); outline-offset: 2px; }
@media (max-width: 560px) { .duel-note { font-size: 13px; } }

/* ------------------------------------------- la confidentialite, chiffree

   Le bloc portait un second depot de fichier et un verdict en texte, deux
   fois la meme chose que le heros. Il porte maintenant ce que le heros ne
   peut pas montrer : les trois compteurs du test de bout en bout, qui sont
   la preuve de la phrase « rien ne sort de votre machine ». */

.preuve-conf { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.conf-titre { margin: 0; font: 500 10.5px/1.4 var(--sans); letter-spacing: .16em;
  text-transform: uppercase; color: var(--txt-3); }
.conf-liste { list-style: none; margin: 0; padding: 0; width: 100%;
  border-top: 1px solid var(--bord); }
.conf-liste li { display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--bord); }
.conf-liste span { font-family: var(--serif); font-size: 15.5px; color: var(--txt-2); }
.conf-liste b { font: 500 30px/1 var(--nb); color: var(--vif); font-variant-numeric: tabular-nums; }
.conf-note { margin: 0; font-family: var(--serif); font-size: 15px; line-height: 1.6;
  color: var(--txt-2); max-width: 46ch; }

/* Sur un telephone, la comparaison des acces est posee en blocs, mais la
   legende gardait son rendu de table : « Ce que chaque acces ouvre » tenait
   dans 67 px, un mot par ligne, et l'intitule de chaque ligne gardait ses
   24 % de large. Les deux prennent la largeur de l'ecran. */
@media (max-width: 760px) {
  .compare caption { display: block; width: auto; }
  .compare tbody th { width: auto; }
}
/* Le bouton qui bascule le plan en paysage : 28 px de haut, c'est trop
   peu pour un pouce. */
@media (max-width: 620px) {
  .livrable-orientation { padding: 8px 0; }
  .livrable-choix button { min-height: 44px; padding: 12px 4px; }
}

/* ============================================================= mobile 2
   La version telephone ne miniaturise plus la maquette de revue : elle en
   reprend la hierarchie avec des blancs plus francs, des actions au pouce et
   des blocs suffisamment detaches pour etre lus pendant un defilement. */
@media (max-width: 620px) {
  .landing .bloc { padding-inline: 24px; }
  .landing .espace { padding-top: 72px; }

  .landing main::before { inset-block-start: -80px; height: 620px; }
  .landing h1 {
    max-width: 12ch; font-size: clamp(44px, 12.8vw, 56px);
    line-height: .98; letter-spacing: -.025em;
  }
  .landing h2 { font-size: clamp(32px, 9.5vw, 40px); line-height: 1.06; }
  .landing .conduite { font-size: 19px; line-height: 1.58; }
  .landing .pastille-e {
    margin-bottom: 28px; font-size: 10.5px; line-height: 1.4;
    letter-spacing: .17em;
  }
  .landing .sur { margin-bottom: 16px; letter-spacing: .24em; }
  .filet-h { margin-bottom: 24px; }

  .duo-agir { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; }
  .agir, .agir-2 {
    width: 100%; min-height: 52px; padding: 15px 20px;
    white-space: normal; line-height: 1.35; text-align: center;
  }

  .vitrine {
    margin-top: 38px; padding: 8px; width: calc(100% + 16px);
    margin-left: -8px;
  }
  .duel-vif { padding: 18px 14px 16px; gap: 14px; }
  .duel-tete { align-items: flex-start; gap: 8px; }
  .duel-titre { font-size: 14px; }
  .duel-etat { font-size: 10.5px; text-align: right; }
  .duel-note { font-size: 14px; line-height: 1.58; }
  .depose { margin-top: 20px; padding: 22px 18px; }
  .depose strong { line-height: 1.45; }

  .preuves { grid-template-columns: 1fr 1fr; gap: 12px; border-top: 0; }
  .preuves li {
    display: flex; padding: 22px 18px; min-width: 0;
    border: 1px solid var(--bord); background: rgba(255,255,255,.32);
  }
  .preuves .nbr { font-size: 30px; }
  .preuves .quoi { margin-top: 8px; font-size: 15px; line-height: 1.45; }

  .duel-bloc, .duel-bloc.inverse { gap: 40px; }
  .section-livrable .liste-pt { display: block; margin-top: 26px; }
  .section-livrable .livrable-demo { display: block; }
  .mobile-points { display: none; }
  .liste-pt li { padding-block: 15px; font-size: 17px; line-height: 1.5; }
  .livrable-demo {
    padding: 22px 18px; border: 1px solid var(--bord);
    background: rgba(255,255,255,.32);
  }
  .livrable-tete { flex-direction: column; gap: 4px; }
  .livrable-orientation { min-height: 44px; margin: -4px 0 -8px; }
  .livrable-commandes { gap: 22px; padding-block: 20px; }
  .livrable-choix { gap: 8px; }
  .livrable-choix button { min-height: 48px; }
  .livrable-cotes div { padding-block: 11px; }

  #essai .liste-pt { display: block; margin-top: 26px; }
  #essai .preuve-conf {
    display: flex; padding: 24px 20px; border: 1px solid var(--bord);
    background: var(--fond-2);
  }
  .mobile-conf { display: none; }
  .conf-liste li { gap: 12px; padding-block: 15px; }
  .conf-liste span { font-size: 16px; line-height: 1.4; }

  .offre-grille { gap: 14px; margin-top: 34px; }
  .offre-grille .offre {
    padding: 26px 22px; border: 1px solid var(--bord);
    border-top-color: var(--txt); background: rgba(255,255,255,.26);
  }
  .offre-grille .offre-ultra { border-color: var(--txt); background: var(--txt); }
  .offre .somme { font-size: 42px; }
  .offre-actions { margin-top: 28px; }

  .bureau-seul { display: inline; }
  .mobile-seul, .offre-mobile { display: none; }
  .offre-grille { display: grid; grid-template-columns: 1fr; }
  .offre-inclus { display: block; margin-inline: auto; font-size: 16px; line-height: 1.55; }

  .compare { margin-top: 30px; font-size: 16px; text-align: left; }
  .compare caption { padding-bottom: 18px; line-height: 1.5; }
  .compare tbody { display: grid; gap: 14px; }
  .compare tr {
    padding: 20px; border: 1px solid var(--bord);
    background: rgba(255,255,255,.32);
  }
  .compare tbody th {
    padding: 0 0 14px; border: 0; color: var(--vif); font-size: 11px;
  }
  .compare td { padding: 11px 0 0; border-top: 1px solid var(--bord); line-height: 1.5; }
  .compare td + td { margin-top: 11px; }
  .compare td::before { display: block; margin-bottom: 4px; content: attr(data-col);
    color: var(--txt-3); font: 600 10px/1.3 var(--sans); letter-spacing: .14em;
    text-transform: uppercase; }
  .section-presse { display: block; }
}

@media (max-width: 360px) {
  .landing .bloc { padding-inline: 20px; }
  .landing h1 { font-size: 43px; }
  .preuves { grid-template-columns: 1fr; }
}