/* =============================================================================
   lecture.css — les pages de lecture de phixel.app (refonte « Studio », 25 octobre 2026), chargé APRÈS base.css :
   Terms, Privacy, Delete account et Legal (bilingues, une adresse, la partie française en #fr), l'invitation
   (/i/<code>) et la page 404. Ancien nom : pages.css (renommé pour qu'un pages.css d'avant, gardé en cache par un
   navigateur, ne s'applique jamais aux nouvelles pages).
   Tout est rangé sous des classes propres à ces pages ; aucune couleur en dur (les jetons de base.css) ; or = la
   monnaie seulement (la pièce de l'invitation) ; aucun mouvement en prefers-reduced-motion.
   Dans la partie française, les titres des parties sont des h3 (sous le h2 « Conditions d'utilisation »…), au même
   style que les h2 de la partie anglaise : d'où les :is(h2,h3).
   ============================================================================= */

/* ─── 0. Comportements de ces pages ───────────────────────────────────────────────────────────────────────────
   Le défilement doux après le premier geste (html.doux) et la zone principale sans cadre au focus sont dans base.css.
   Le gris posé sur le papier millimétré (--attenue-papier, un peu plus d'encre pour rester AA là où il croise une
   ligne du quadrillage) est aussi dans base.css, avec le papier : l'aide peut le prendre. */

/* ─── 1. La tête d'une page bilingue : le titre dans les deux langues, la date, les deux langues ──────────────── */
.tete-doc{padding-bottom:55px}
.tete-doc h1{max-width:22ch}
.h1-autre{display:block;color:var(--attenue)}
.maj{display:flex;flex-wrap:wrap;gap:5px 21px;margin-top:21px !important;font-size:15px;line-height:1.5;color:var(--attenue-papier);font-variant-numeric:tabular-nums}
.choix-langue{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.choix-langue a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border-radius:var(--r-m);background:var(--carte);box-shadow:var(--ombre-carte);font-size:15px;font-weight:600;color:var(--encre);text-decoration:none}
.choix-langue a::after{content:'↓';content:'↓' / '';font-weight:500;color:var(--attenue)}
@media (hover:hover){.choix-langue a:hover{box-shadow:var(--ombre-survol)}}
@media (min-width:600px){.tete-doc{padding-bottom:89px}}

/* L'ouverture de la partie française : le même papier, le titre français (un h2). */
.doc-langue{padding-bottom:55px}
.doc-langue:last-child{padding-bottom:var(--section)}
.ouverture-fr{margin-bottom:21px;padding:89px 0 55px}
.ouverture-fr .repere{color:var(--attenue-papier)}
.ouverture-titre{max-width:22ch;font-family:var(--titre);font-size:clamp(30px,3.4vw + 12px,44px);font-weight:600;line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
@media (min-width:600px){.ouverture-fr{margin-bottom:34px;padding:89px 0}}

/* ─── 2. La colonne de lecture (68 caractères) et son sommaire ─────────────────────────────────────────────────
   Sur ordinateur (1100 px et plus), le sommaire colle à droite et suit la partie lue (base.js, aria-current) ; plus
   étroit, il se replie en haut de chaque langue. */
.doc{max-width:68ch}
.doc-intro{margin-bottom:55px;font-size:clamp(18px,.9vw + 14px,21px);line-height:1.5;color:var(--attenue)}
/* Les parties se touchent (l'espace est à l'intérieur) : la ligne que suit le sommaire tombe toujours dans l'une. */
.partie+.partie{padding-top:55px;scroll-margin-top:-34px}
.partie>:is(h2,h3){font-family:var(--titre);font-size:27px;line-height:1.2;letter-spacing:-.018em}
/* Sur téléphone, le h1 compact fait 30 px : les titres des parties descendent à 22 px pour rester en dessous. */
@media (max-width:599px){.partie>:is(h2,h3){font-size:22px;line-height:1.25;letter-spacing:-.014em}}
.partie>*+*{margin-top:1em}
.partie>:is(h2,h3)+*{margin-top:13px}
.doc strong{color:var(--encre)}
.doc-renvoi{margin-top:55px;color:var(--attenue)}

/* Puces : un pixel gris, comme les listes de l'app. */
.pixels{padding:0;list-style:none}
.pixels:first-child{margin-top:0}
.pixels:last-child{margin-bottom:0}
.pixels>li{position:relative;padding-left:21px}
.pixels>li+li{margin-top:13px}
.pixels>li::before{content:'';position:absolute;left:3px;top:calc(.8em - 3px);width:6px;height:6px;background:var(--attenue)}

/* Tableau de texte (Privacy : où sont les données) : il tient sans défiler, de 360 px à l'ordinateur. */
.donnees{width:100%;border-collapse:collapse;border-top:1px solid var(--encre);font-size:15px;line-height:1.5}
.donnees th,.donnees td{padding:13px 13px 13px 0;border-bottom:1px solid var(--trait);text-align:left;vertical-align:top}
.donnees :is(th,td):last-child{padding-right:0}
.donnees thead th{font-size:13px;font-weight:600;line-height:1.4;color:var(--attenue)}
.donnees tbody th{width:38%;font-weight:600}
@media (min-width:600px){.donnees{font-size:16px}}

/* Le sommaire collant (ordinateur). */
.doc-rail{display:none}
.rail-titre{margin-bottom:8px;font-size:13px;font-weight:600;line-height:1.4;color:var(--attenue)}
.doc-rail a{padding:5px 0 5px 13px;font-size:14px;line-height:1.45}
@media (min-width:1100px){
  .avec-rail{display:grid;grid-template-columns:minmax(0,68ch) 233px;justify-content:space-between;column-gap:55px;align-items:start}
  .doc-rail{display:block;position:sticky;top:calc(var(--entete) + 34px);max-height:calc(100vh - var(--entete) - 68px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
}

/* Le sommaire replié (téléphone, tablette) : une carte, un « + » qui devient « − ». */
.sommaire-plie{margin-bottom:55px;border-radius:var(--r-l);background:var(--carte);box-shadow:var(--ombre-carte)}
.sommaire-plie>summary{position:relative;display:flex;align-items:center;min-height:56px;padding:0 55px 0 21px;border-radius:var(--r-l);font-weight:600;cursor:pointer;list-style:none}
.sommaire-plie>summary::-webkit-details-marker{display:none}
.sommaire-plie>summary::before,.sommaire-plie>summary::after{content:'';position:absolute;right:21px;top:50%;width:13px;height:2px;margin-top:-1px;background:var(--attenue)}
.sommaire-plie>summary::after{transform:rotate(90deg)}
.sommaire-plie[open]>summary::after{transform:rotate(90deg) scaleX(0)}
.sommaire-plie ol{margin:0;padding:0 21px 8px;list-style:none}
.sommaire-plie li{border-top:1px solid var(--trait)}
.sommaire-plie a{display:flex;align-items:center;min-height:44px;padding:8px 0;font-size:15px;line-height:1.4;color:var(--encre);text-decoration:none}
@media (min-width:1100px){.sommaire-plie{display:none}}
@media (prefers-reduced-motion:no-preference){
  .sommaire-plie>summary::before,.sommaire-plie>summary::after{transition:transform 300ms var(--ressort)}
  .sommaire-plie{interpolate-size:allow-keywords}
  .sommaire-plie::details-content{block-size:0;overflow:clip;transition:block-size 300ms var(--ressort),content-visibility 300ms allow-discrete}
  .sommaire-plie[open]::details-content{block-size:auto}
}

/* Ce qui ressemble à un bouton répond au doigt (touche 4) : les pastilles de langue et le sommaire replié
   s'enfoncent un peu à l'appui, puis reviennent sur le ressort sans rebond. */
@media (prefers-reduced-motion:no-preference){
  .choix-langue a{transition:scale 300ms var(--ressort)}
  .choix-langue a:active{scale:.96;transition-duration:90ms}
  .sommaire-plie>summary{transition:scale 300ms var(--ressort)}
  .sommaire-plie>summary:active{scale:.985;transition-duration:90ms}
}

/* ─── 3. Delete account : le chemin dans l'app, en étapes ; les 30 jours, en frise ─────────────────────────────── */
.chemin-carte{padding:13px;border-radius:var(--r-l);background:var(--carte);box-shadow:var(--ombre-objet)}
.chemin-carte>p{margin:0;padding:21px 8px 8px;color:var(--attenue)}
.chemin{display:flex;flex-direction:column;gap:5px;margin:0;padding:0;list-style:none}
.chemin li{position:relative;display:flex;align-items:center;gap:13px;min-height:52px;padding:8px 16px 8px 8px;border-radius:var(--r-m);background:var(--fond);font-weight:500;line-height:1.35}
.chemin-n{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:var(--r-s);background:var(--carte);box-shadow:var(--ombre-carte);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
@media (min-width:600px){
  .chemin-carte{padding:21px}
  .chemin-carte>p{padding:21px 0 0}
}
.email-carte{padding:21px;border-radius:var(--r-l);background:var(--carte);box-shadow:var(--ombre-carte)}
.email-carte>*+*{margin-top:1em}
.doc.large{max-width:none}
.deux-voies{display:grid;gap:55px}
.deux-voies>.partie+.partie{padding-top:0;scroll-margin-top:0}
.deux-voies>.partie{max-width:68ch}
/* La frise : verticale sur téléphone et tablette, horizontale (trois colonnes) sur ordinateur. Ses titres ont la
   taille des autres titres de la page (même niveau, même taille). */
.frise{position:relative;margin-top:55px;padding-left:34px}
.frise::before{content:'';position:absolute;left:5px;top:13px;bottom:13px;width:2px;background:var(--trait)}
.frise-etape{position:relative;max-width:68ch}
.frise>.partie+.partie{margin-top:55px;padding-top:0;scroll-margin-top:0}
.frise-etape::before{content:'';position:absolute;left:-34px;top:10px;width:12px;height:12px;background:var(--encre);box-shadow:0 0 0 5px var(--fond)}
@media (min-width:600px){.frise{margin-top:89px}}
@media (min-width:1100px){
  .deux-voies{grid-template-columns:minmax(0,1.618fr) minmax(0,1fr);align-items:start}
  /* Deux rangées partagées (sous-grille) : un titre sur deux lignes ne décale plus la liste de sa colonne. */
  .frise{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;gap:13px 55px;padding:34px 0 0}
  .frise::before{left:0;right:0;top:5px;bottom:auto;width:auto;height:2px}
  .frise>.partie+.partie{margin-top:0}
  .frise-etape{display:grid;grid-row:span 2;grid-template-rows:subgrid;align-content:start}
  .frise-etape>:is(h2,h3)+*{margin-top:0}
  .frise-etape::before{left:0;top:-34px}
}

/* ─── 4. Legal : une fiche, l'intitulé à gauche, le contenu à droite ──────────────────────────────────────────── */
.fiche{border-top:1px solid var(--encre)}
.fiche-ligne{display:grid;gap:8px 55px;padding:34px 0;border-bottom:1px solid var(--trait)}
.fiche-ligne>:is(h2,h3){font-family:var(--sans);font-size:19px;line-height:1.35;letter-spacing:-.01em}
.fiche-contenu{max-width:68ch}
.fiche-contenu>*+*{margin-top:1em}
@media (min-width:900px){.fiche-ligne{grid-template-columns:233px minmax(0,1fr)}.fiche-ligne>:is(h2,h3){padding-top:2px}}

/* ─── 5. L'invitation (/i/<code>) : une carte sur le papier, le code, la pièce, les trois étapes ──────────────
   Toute la carte tient dans le premier écran d'un ordinateur (1440 × 900, 1280 × 800). */
.invitation{padding:21px 0 89px}
.carte-invit{max-width:480px;margin-inline:auto;padding:34px 21px 13px;border-radius:21px;background:var(--carte);box-shadow:var(--ombre-objet);text-align:center}
.carte-invit .phi-pixels{width:56px;height:72px;margin-bottom:21px}
.carte-invit h1{font-size:clamp(34px,2.4vw + 24px,44px);line-height:1.08;letter-spacing:-.03em}
.accroche{max-width:32ch;margin:13px auto 0;color:var(--attenue);text-wrap:balance}
.code{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:34px}
.code-valeur{display:flex;align-items:center;justify-content:center;min-height:56px;padding:0 18px;border-radius:var(--r-m);background:var(--fond);box-shadow:inset 0 0 0 1px var(--trait-fort);font-family:var(--sans);font-size:26px;font-weight:600;letter-spacing:.04em;white-space:nowrap;user-select:all}
.code .btn{min-height:56px;padding:0 21px}
.gain{margin-top:13px;font-size:15px;font-weight:600;color:var(--or-texte);text-wrap:balance}
.gain::before{content:'';display:inline-block;width:16px;height:16px;margin-right:8px;vertical-align:-3px;background:var(--piece) 0 0 / 100% 100% no-repeat;image-rendering:pixelated}
.etapes-invit{max-width:300px;margin:21px auto 0;padding:0;list-style:none;counter-reset:e;text-align:left}
/* Un bloc, pas un flex : le texte de l'étape 3 (texte, libellé de l'app d'un seul tenant, texte) reste un seul
   paragraphe. Une ligne de 23 px + 2 × 10,5 px = 44 px ; le numéro est centré sur la hauteur de l'étape. */
.etapes-invit li{position:relative;min-height:44px;padding:10.5px 0 10.5px 44px;counter-increment:e;line-height:1.35}
.etapes-invit li+li{margin-top:5px}
.etapes-invit li::before{content:counter(e);content:counter(e) / '';position:absolute;left:0;top:50%;display:grid;place-items:center;width:28px;height:28px;margin-top:-14px;border-radius:var(--r-s);background:var(--fond);box-shadow:inset 0 0 0 1px var(--trait-fort);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.carte-invit .stores{justify-content:center;margin-top:21px}
a.store{color:var(--store-texte);text-decoration:none}
.precision{margin-top:13px;font-size:13px;line-height:1.5;color:var(--attenue)}
.precision:empty{display:none}
.precision+.precision{margin-top:5px}
.liens-invit{display:flex;flex-wrap:wrap;justify-content:center;column-gap:8px;margin-top:21px;padding-top:8px;border-top:1px solid var(--trait);font-size:15px;color:var(--attenue)}
.liens-invit a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:var(--attenue);text-decoration:none;transition:color 150ms}
.liens-invit a:hover{color:var(--encre)}
/* Sans JavaScript, la page ne lit pas le code : ni code « — », ni bouton Copy inerte, ni étape qui demande ce code. */
html:not(.js) .code,html:not(.js) #gain,html:not(.js) #e3{display:none}
@media (max-width:399px){.carte-invit{padding-inline:16px}.carte-invit .store{padding-inline:10px}}
@media (min-width:600px){
  .carte-invit{padding:55px 55px 21px}
  .code-valeur{padding:0 21px;font-size:30px}
}
/* Écran d'ordinateur peu haut (1280 × 800) : la carte se resserre pour tenir encore en entier (φ à 6 px par case). */
@media (min-width:600px) and (max-height:860px){
  .invitation{padding-top:13px}
  .carte-invit{padding-top:34px;padding-bottom:8px}
  .carte-invit .phi-pixels{width:42px;height:54px;margin-bottom:13px}
  .code{margin-top:21px}
  .liens-invit{margin-top:13px;padding-top:0}
}

/* ─── 6. La page 404 : le φ qui se dessine, puis les deux langues côte à côte ──────────────────────────────────── */
.introuvable{padding:55px 0 89px;text-align:center}
.introuvable .phi-pixels{margin-bottom:55px}
.introuvable-langues{display:grid;gap:55px;max-width:880px;margin-inline:auto}
.introuvable h1,.introuvable h2{font-size:clamp(30px,3.4vw + 12px,44px);line-height:1.08;letter-spacing:-.025em}
.introuvable-bloc>p{margin-top:13px;color:var(--attenue-papier)}
.introuvable-bloc>.introuvable-liens{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:34px}
@media (min-width:600px){.introuvable{padding:89px 0 144px}}
@media (min-width:768px){
  .introuvable-langues{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .introuvable-bloc{padding:0 34px}
  .introuvable-bloc+.introuvable-bloc{box-shadow:inset 1px 0 0 var(--trait)}
}

/* ─── 8. Impression : le texte seul, en noir sur blanc, la partie française sur une nouvelle page ─────────────── */
@media print{
  @page{margin:16mm 14mm}
  .entete .navigation,.choix-langue,.sommaire-plie,.doc-rail,.pied nav,.pied .marque,.liens-invit,.carte-invit .stores{display:none !important}
  .sur-papier::before{display:none}
  body{font-size:11pt;line-height:1.5}
  .conteneur{width:auto}
  .tete-page{padding:0 0 18pt}
  .tete-doc h1{font-size:22pt;max-width:none}
  .ouverture-fr{margin:0;padding:0 0 12pt;break-before:page}
  .ouverture-titre{font-size:18pt}
  .doc,.fiche-contenu{max-width:none}
  .doc-intro{margin-bottom:12pt;font-size:12pt}
  .partie+.partie{padding-top:14pt}
  .partie>:is(h2,h3),.fiche-ligne>:is(h2,h3),.frise-etape>:is(h2,h3){font-size:13pt;break-after:avoid}
  .doc-langue{padding-bottom:0}
  .fiche-ligne{padding:10pt 0;break-inside:avoid}
  .chemin-carte{box-shadow:none;border:1px solid #888}
  .chemin li{background:none}
  .doc a[href^="http"]::after,.fiche-contenu a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em}
  .pied{padding:18pt 0 0}
}