/* La vitrine de phoss.tech. Jetons : six rôles, un accent, deux arrêts (noir puis jaune à la fin).
   Mouvement : transform, opacity et clip-path seulement. Aucune règle n'anime width, height, top ou left.
   Le cadre (la fenêtre Phoss) et la gemme sont la couche fixe ; les quatorze coupes défilent. */

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --fond: #0B0B0C;
  --surface: #141416;
  --surface-douce: #1D1E21;
  --bordure: #2A2B2E;
  --encre: #F4F2ED;
  --encre-douce: #B8B4AA;
  --encre-attenuee: #A8A49A;
  --accent: #F5B400;
  --accent-encre: #0B0B0C;
  --encre-sur-jaune: #3A3000;
  --papier: #F4F2ED;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace;
  --sortie: cubic-bezier(0.23, 1, 0.32, 1);
  --barre-h: 64px;
  --gouttiere: clamp(16px, 4vw, 56px);
  --gemme-taille: clamp(110px, 15vw, 230px);
}

html { background: var(--fond); color: var(--encre); overflow-x: clip; }
body.vitrine { margin: 0; font-family: var(--sans); background: var(--fond); color: var(--encre); overflow-x: clip; -webkit-font-smoothing: antialiased; }
.mono { font-family: var(--mono); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
mark { background: var(--accent); color: var(--accent-encre); padding: 0 0.08em; border-radius: 0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ——— La barre, bruyante : mot-marque, langues, prix au même poids ————————————————— */
.barre { position: fixed; inset: 0 0 auto 0; height: var(--barre-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--gouttiere); z-index: 30; border-bottom: 1px solid var(--bordure); background: color-mix(in srgb, var(--fond) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background 0.5s var(--sortie), color 0.5s var(--sortie); }
.barre__marque { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; text-decoration: none; }
.barre__langues .bascule-langue { display: flex; gap: 6px; margin: 0; }
.barre__langues a { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font: 600 12px var(--mono); letter-spacing: 0.06em; color: var(--encre-douce); background: none; border: 0; padding: 10px 8px; min-height: 44px; min-width: 44px; cursor: pointer; border-radius: 8px; }
.barre__langues a:hover { color: var(--encre); background: var(--surface-douce); }
.barre__prix { background: var(--accent); color: var(--accent-encre); font-size: 15px; font-weight: 800; padding: 11px 18px; border-radius: 999px; text-decoration: none; white-space: nowrap; transition: transform 0.15s var(--sortie), background 0.5s var(--sortie), color 0.5s var(--sortie); }
.barre__prix:hover { transform: translateY(-1px); }
.barre__prix:active { transform: scale(0.97); }
.barre--inverse { background: color-mix(in srgb, var(--accent) 88%, transparent); color: var(--accent-encre); border-bottom-color: rgba(11, 11, 12, 0.25); }
.barre--inverse .barre__langues a { color: var(--encre-sur-jaune); }
.barre--inverse .barre__prix { background: var(--accent-encre); color: var(--accent); }

/* ——— Les coupes ——————————————————————————————————————————————————————————————— */
.coupes { position: relative; z-index: 2; }
.coupe { min-height: 100svh; box-sizing: border-box; display: grid; padding: calc(var(--barre-h) + 6vh) var(--gouttiere) 8vh; width: 46vw; }
.coupe--haut { align-content: start; }
.coupe--milieu { align-content: center; }
.coupe--bas { align-content: end; }
.coupe--etroite .coupe__corps { max-width: 30ch; }
.coupe--large { width: 100%; }
.coupe--1 { width: 52vw; }
.coupe--droite { justify-items: end; text-align: right; }
.coupe__corps { display: grid; gap: clamp(18px, 2.4vh, 30px); max-width: 44ch; }
.titre { margin: 0; font-weight: 900; letter-spacing: -0.035em; line-height: 0.95; text-wrap: balance; font-size: clamp(34px, 4.6vw, 64px); }
.titre--h1 { font-size: clamp(40px, 5.6vw, 84px); line-height: 0.92; }
.texte { margin: 0; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.4; color: var(--encre-douce); max-width: 36ch; text-wrap: pretty; }
.silence { margin: 0; font-size: 13px; letter-spacing: 0.04em; color: var(--encre-attenuee); }
.modules { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: clamp(15px, 1.2vw, 19px); font-weight: 600; color: var(--encre-douce); }
.modules li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); margin-right: 10px; vertical-align: 0.15em; }
.faits { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; font-size: clamp(30px, 4.2vw, 60px); font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.faits li { display: inline-block; justify-self: end; background: var(--accent); color: var(--accent-encre); padding: 0.12em 0.28em; clip-path: inset(0 0 0 0); }

/* Le mouvement des mots : posé par le script (.mot), le texte reste entier sans lui. */
.mot { display: inline-block; transition: opacity 0.55s var(--sortie), transform 0.65s var(--sortie); transition-delay: calc(var(--i, 0) * 70ms); }
html.js .coupe:not(.est-active) .mot { opacity: 0; transform: translateY(0.35em); }
html.js .coupe:not(.est-active) .texte, html.js .coupe:not(.est-active) .modules, html.js .coupe:not(.est-active) .silence { opacity: 0; transform: translateY(14px); }
.texte, .modules, .silence { transition: opacity 0.6s var(--sortie) 0.35s, transform 0.7s var(--sortie) 0.35s; }
html.js .coupe--12:not(.est-active) .faits li { clip-path: inset(0 100% 0 0); }
.faits li { transition: clip-path 0.7s var(--sortie); }
.faits li:nth-child(2) { transition-delay: 0.12s; }
.faits li:nth-child(3) { transition-delay: 0.24s; }

/* ——— La fin : le jaune envahit tout, le chiffre est coupé par le bord, le bouton tient en bas à droite ——— */
.coupe--fin { width: 100%; background: var(--accent); color: var(--accent-encre); padding: calc(var(--barre-h) + 4vh) var(--gouttiere) 0; grid-template-rows: 1fr auto; min-height: 100svh; }
.coupe__corps--fin { max-width: none; align-content: end; gap: 0; }
.prix { margin: 0 0 0 -0.09em; font-size: clamp(160px, 34vw, 520px); font-weight: 900; letter-spacing: -0.07em; line-height: 0.82; }
.fin__bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding: 3vh 0 5vh; }
.fin__texte { display: grid; gap: 12px; max-width: 640px; }
.texte--fin { color: var(--accent-encre); font-size: clamp(20px, 2.1vw, 30px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; max-width: none; }
.fin__petit { margin: 0; font-size: 13px; line-height: 1.5; color: var(--encre-sur-jaune); }
.bouton { display: inline-block; text-decoration: none; border-radius: 999px; font-weight: 800; letter-spacing: -0.01em; transition: transform 0.15s var(--sortie); }
.bouton:active { transform: scale(0.97); }
.bouton--fin { background: var(--accent-encre); color: var(--accent); font-size: clamp(18px, 1.6vw, 22px); padding: 20px 34px; margin-left: auto; }
.bouton--fin:hover { transform: translateY(-2px); }
.pied { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 20px 0 max(20px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(11, 11, 12, 0.25); font-size: 12px; color: var(--encre-sur-jaune); }
.pied p { margin: 0; max-width: 70ch; line-height: 1.5; }
.pied__liens { display: flex; gap: 18px; flex-wrap: wrap; }
.pied__liens a { color: var(--accent-encre); font-weight: 600; text-decoration: none; padding: 10px 0; }
.pied__liens a:hover { text-decoration: underline; }

/* ——— Le cadre : la fenêtre Phoss, fixée, qui déborde du bord droit au bureau ———————————————— */
.cadre { position: fixed; z-index: 1; top: 12svh; right: -6vw; width: 60vw; height: 76svh; transform-origin: 100% 100%; transition: transform 0.9s var(--sortie), opacity 0.6s var(--sortie); }
.appli { position: relative; height: 100%; display: grid; grid-template-columns: 180px minmax(0, 1fr); background: var(--surface); border: 1px solid var(--bordure); border-radius: 14px; overflow: hidden; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6); transform-style: preserve-3d; }
.cadre::before, .cadre::after, .appli::before, .appli::after { content: ""; position: absolute; width: 18px; height: 18px; border: 0 solid var(--accent); pointer-events: none; z-index: 2; }
.cadre::before { left: -10px; top: -10px; border-left-width: 2px; border-top-width: 2px; }
.cadre::after { left: -10px; bottom: -10px; border-left-width: 2px; border-bottom-width: 2px; }
.appli::before { right: 10px; top: 10px; border-right-width: 2px; border-top-width: 2px; }
.appli::after { right: 10px; bottom: 10px; border-right-width: 2px; border-bottom-width: 2px; }
html.js .cadre:not(.est-visible) { opacity: 0; transform: scale(0.94) translateY(20px); }
.cadre[data-etat="facture"] { z-index: 3; transform: translateX(-7vw) scale(1.04); }
.cadre[data-etat="telephone"] { opacity: 0; transform: translateX(-8vw) scale(0.9); }
.cadre[data-etat="efface"] { opacity: 0.12; transform: scale(0.96); }
.cadre[data-etat="vignette"] { opacity: 0.9; transform: translate(-3vw, 4vh) scale(0.42); }
.cadre[data-etat="replie"] { opacity: 0; transform: translate(-75vw, -70vh) scale(0.05); }
.cadre__note { position: absolute; left: 0; right: 6vw; bottom: -30px; margin: 0; font-size: 11px; color: var(--encre-attenuee); }

.appli__menu { display: flex; flex-direction: column; gap: 4px; padding: 18px 12px; border-right: 1px solid var(--bordure); }
.appli__marque { display: grid; gap: 2px; padding: 6px 12px 14px; }
.appli__nom { font-size: 15px; font-weight: 900; letter-spacing: -0.02em; }
.appli__societe { font-size: 11px; color: var(--encre-attenuee); }
.menu__item { padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--encre-douce); transition: background 0.3s var(--sortie), color 0.3s var(--sortie), box-shadow 0.3s var(--sortie); }
.menu__item--bas { margin-top: auto; }
.cadre[data-etat="ouvre"] .menu--tableau, .cadre[data-etat="tableau"] .menu--tableau, .cadre[data-etat="pulse"] .menu--tableau, .cadre[data-etat="compte"] .menu--tableau, .cadre[data-etat="revient"] .menu--tableau,
.cadre[data-etat="attend"] .menu--devis, .cadre[data-etat="tape"] .menu--devis,
.cadre[data-etat="accepte"] .menu--ventes,
.cadre[data-etat="facture"] .menu--factures,
.cadre[data-etat="fiche"] .menu--tiers,
.cadre[data-etat="coche"] .menu--taches { background: var(--surface-douce); color: var(--encre); box-shadow: inset 3px 0 0 var(--accent); }

.ecran { position: relative; min-width: 0; }
.panneau { position: absolute; inset: 0; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--sortie), transform 0.6s var(--sortie); pointer-events: none; overflow: hidden; }
.cadre[data-etat="ouvre"] .panneau--tableau, .cadre[data-etat="tableau"] .panneau--tableau, .cadre[data-etat="pulse"] .panneau--tableau, .cadre[data-etat="compte"] .panneau--tableau, .cadre[data-etat="revient"] .panneau--tableau, .cadre[data-etat="telephone"] .panneau--tableau, .cadre[data-etat="efface"] .panneau--tableau, .cadre[data-etat="vignette"] .panneau--tableau, .cadre[data-etat="replie"] .panneau--tableau,
.cadre[data-etat="attend"] .panneau--devis, .cadre[data-etat="tape"] .panneau--devis,
.cadre[data-etat="accepte"] .panneau--vente,
.cadre[data-etat="facture"] .panneau--facture,
.cadre[data-etat="fiche"] .panneau--fiche,
.cadre[data-etat="coche"] .panneau--taches { opacity: 1; transform: none; }
.panneau__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.panneau__titre { margin: 0; font-size: 18px; font-weight: 700; }
.panneau__heure { font-size: 12px; color: var(--encre-attenuee); }
.panneau__pied { margin: 0; font-size: 12px; }
.etiq { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-attenuee); }
.tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tuile { background: var(--surface-douce); border: 1px solid var(--bordure); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; transition: border-color 0.4s var(--sortie), transform 0.4s var(--sortie); }
.tuile--accent { border-color: var(--accent); }
.tuile--accent .etiq, .tuile--accent .valeur { color: var(--accent); }
.valeur { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.valeur small { font-size: 14px; font-weight: 600; color: var(--encre-attenuee); }
.valeur--grande { font-size: 40px; }
.valeur--petite { font-size: 16px; }
.tuile__delta { font-size: 11px; color: var(--encre-douce); }
.cadre[data-etat="pulse"] .tuiles .tuile { animation: pulse 0.9s var(--sortie) both; }
.cadre[data-etat="pulse"] .tuiles .tuile:nth-child(2) { animation-delay: 0.15s; }
.cadre[data-etat="pulse"] .tuiles .tuile:nth-child(3) { animation-delay: 0.3s; }
.cadre[data-etat="pulse"] .tuiles .tuile:nth-child(4) { animation-delay: 0.45s; }
@keyframes pulse { 0% { transform: none; } 40% { transform: scale(1.04); border-color: var(--accent); } 100% { transform: none; } }
.tuile--graphe { flex-grow: 1; gap: 12px; }
.graphe { display: flex; align-items: flex-end; gap: 10px; height: 110px; }
.graphe i { flex-grow: 1; background: #3A3B3F; border-radius: 4px; transform-origin: bottom; transition: transform 0.9s var(--sortie); }
.graphe i:nth-child(1) { height: 42%; } .graphe i:nth-child(2) { height: 58%; } .graphe i:nth-child(3) { height: 37%; } .graphe i:nth-child(4) { height: 66%; }
.graphe i:nth-child(5) { height: 51%; } .graphe i:nth-child(6) { height: 74%; } .graphe i:nth-child(7) { height: 92%; background: var(--accent); }
.cadre[data-etat="compte"] .graphe i { animation: pousse 0.9s var(--sortie) both; }
@keyframes pousse { from { transform: scaleY(0.15); } to { transform: none; } }
.actes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12px; color: var(--encre-douce); }

/* Devis : les lignes se tapent, le total se calcule. */
.lignes { display: grid; }
.ligne { display: grid; grid-template-columns: minmax(0, 1fr) 44px 90px 100px; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bordure); font-size: 13px; font-variant-numeric: tabular-nums; }
.ligne span:nth-child(n + 2) { text-align: right; }
.ligne--tete { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-attenuee); }
.ligne--total { border-bottom: 0; font-size: 16px; font-weight: 800; }
html.js .cadre[data-etat="attend"] .ligne--tape, html.js .cadre[data-etat="attend"] .ligne--total, html.js .cadre[data-etat="attend"] .panneau__pied { opacity: 0; }
.ligne--tape, .ligne--total, .panneau__pied { transition: opacity 0.4s var(--sortie); }
html.js .cadre.tape-en-cours .ligne--tape:not(.est-tapee) { opacity: 0; }
html.js .cadre.tape-en-cours .ligne--total:not(.est-tapee), html.js .cadre.tape-en-cours .panneau__pied:not(.est-tapee) { opacity: 0; }
.curseur { position: absolute; left: 24px; top: 88px; width: 2px; height: 22px; background: var(--accent); animation: cligne 1s steps(2, start) infinite; opacity: 0; }
.cadre[data-etat="attend"] .curseur { opacity: 1; }
@keyframes cligne { to { visibility: hidden; } }
.statut { display: inline-block; justify-self: start; padding: 4px 10px; border-radius: 999px; font: 600 11px var(--mono); letter-spacing: 0.04em; }
.statut--envoye { background: var(--surface-douce); color: var(--encre); border: 1px solid var(--bordure); }
.statut--accepte { background: var(--accent); color: var(--accent-encre); }

/* Vente : le devis accepté bascule en vente, en une coupe. */
.bascule { display: grid; gap: 14px; }
.bascule__avant, .bascule__apres { background: var(--surface-douce); border: 1px solid var(--bordure); border-radius: 12px; padding: 16px 18px; display: grid; gap: 8px; transition: transform 0.6s var(--sortie), opacity 0.5s var(--sortie); }
.bascule__apres { border-color: var(--accent); }
html.js .cadre[data-etat="accepte"] .bascule__apres { animation: arrive 0.7s var(--sortie) 0.35s both; }
@keyframes arrive { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }

/* Facture : le papier clair dans la fenêtre sombre, le QR réel, le tampon. */
.panneau--facture { flex-direction: row; gap: 18px; }
.papier { position: relative; flex-grow: 1; min-width: 0; background: var(--papier); color: #0B0B0C; border-radius: 8px; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.papier__tete { display: grid; gap: 3px; }
.papier__titre { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.papier__meta { font-size: 11px; color: #5A5750; }
.papier__adresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; font-size: 11px; line-height: 1.5; color: #3A3830; }
.papier .ligne { border-bottom-color: #D9D6CE; grid-template-columns: minmax(0, 1fr) 36px 80px 90px; padding: 7px 0; font-size: 12px; }
.papier .ligne--sous { border-bottom: 0; color: #5A5750; padding: 4px 0; }
.papier .ligne--total { font-size: 16px; padding-top: 8px; }
.papier__paiement { margin-top: auto; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; border-top: 1px dashed #0B0B0C; padding-top: 12px; }
.qr { position: relative; display: block; width: 96px; height: 96px; background: #FFFFFF; padding: 4px; box-sizing: border-box; }
.qr img { display: block; width: 100%; height: 100%; }
.qr__croix { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%); background: #0B0B0C; }
.qr__croix::before, .qr__croix::after { content: ""; position: absolute; background: #FFFFFF; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.qr__croix::before { width: 2px; height: 8px; } .qr__croix::after { width: 8px; height: 2px; }
.papier__compte { font-size: 11px; line-height: 1.6; color: #3A3830; }
.papier__compte b { color: #0B0B0C; }
.tampon { position: absolute; top: 18px; right: 20px; background: #0B0B0C; color: var(--accent); padding: 5px 14px; font-size: 22px; font-weight: 600; letter-spacing: 0.1em; transform: rotate(-8deg); opacity: 0; transition: opacity 0.3s var(--sortie), transform 0.5s var(--sortie); }
.cadre[data-etat="facture"] .tampon { opacity: 1; transition-delay: 1.1s; }
html.js .cadre[data-etat="facture"] .tampon { animation: tampon 0.45s var(--sortie) 1.1s both; }
@keyframes tampon { from { opacity: 0; transform: rotate(-8deg) scale(1.35); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
.facture__cote { width: 210px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
.bouton--appli { margin-top: auto; background: var(--encre); color: var(--accent-encre); font-size: 14px; padding: 13px 18px; text-align: center; transition: transform 0.25s var(--sortie); }
.cadre[data-etat="facture"] .bouton--appli { transform: scale(0.96); transition-delay: 0.8s; }

/* Fiche et tâches */
.fiche { display: grid; gap: 12px; }
.fiche__identite { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: center; font-size: 14px; line-height: 1.45; }
.fiche__identite .mono { font-size: 11px; color: var(--encre-attenuee); }
.fiche__lettre { width: 48px; height: 48px; border-radius: 14px; background: var(--accent); color: var(--accent-encre); display: grid; place-items: center; font-weight: 900; font-size: 20px; }
.historique { list-style: none; margin: 0; padding: 0; display: grid; }
.historique li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--bordure); font-size: 13px; }
.historique .mono { font-size: 11px; color: var(--encre-attenuee); }
html.js .cadre[data-etat="fiche"] .historique li { animation: arrive 0.6s var(--sortie) both; }
.cadre[data-etat="fiche"] .historique li:nth-child(2) { animation-delay: 0.15s; } .cadre[data-etat="fiche"] .historique li:nth-child(3) { animation-delay: 0.3s; } .cadre[data-etat="fiche"] .historique li:nth-child(4) { animation-delay: 0.45s; }
.taches { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tache { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start; background: var(--surface-douce); border: 1px solid var(--bordure); border-radius: 12px; padding: 14px 16px; font-size: 14px; line-height: 1.4; }
.tache .mono { font-size: 11px; color: var(--encre-attenuee); }
.case { width: 20px; height: 20px; border: 2px solid var(--encre-attenuee); border-radius: 6px; margin-top: 1px; position: relative; transition: background 0.3s var(--sortie), border-color 0.3s var(--sortie); }
.case::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--accent-encre); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform 0.3s var(--sortie); }
.tache.est-cochee .case { background: var(--accent); border-color: var(--accent); }
.tache.est-cochee .case::after { transform: rotate(45deg) scale(1); }
.tache.est-cochee > span { text-decoration: line-through; color: var(--encre-attenuee); }

/* ——— Le téléphone : la même page, resserrée ——————————————————————————————————— */
.telephone { position: fixed; z-index: 1; top: 12svh; right: 14vw; width: min(300px, 24vw); aspect-ratio: 390 / 780; background: var(--surface); border: 1px solid var(--bordure); border-radius: 28px; padding: 14px; box-sizing: border-box; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6); opacity: 0; transform: translateY(30px) scale(0.92); transition: opacity 0.6s var(--sortie), transform 0.8s var(--sortie); }
.cadre[data-etat="telephone"] ~ .telephone { opacity: 1; transform: none; }
.telephone__ecran { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.telephone .panneau__titre { font-size: 14px; }
.tuiles--tel { gap: 8px; }
.tuiles--tel .tuile { padding: 10px 12px; border-radius: 10px; gap: 5px; }
.tuiles--tel .etiq { font-size: 9px; }
.tuiles--tel .valeur { font-size: 18px; }
.graphe--tel { flex-grow: 1; height: auto; gap: 6px; }
.telephone__barre { margin-top: auto; display: flex; justify-content: space-between; border-top: 1px solid var(--bordure); padding-top: 10px; font-size: 9px; font-weight: 600; color: var(--encre-attenuee); }
.telephone__barre span { display: grid; gap: 4px; justify-items: center; }
.telephone__barre span::before { content: ""; width: 22px; height: 4px; border-radius: 2px; background: #3A3B3F; }
.telephone__barre .est-actif { color: var(--accent); }
.telephone__barre .est-actif::before { background: var(--accent); }

/* ——— La gemme : rendu 3D réel, composée en fusion « screen », pilotée au défilement et au pointeur ——— */
.gemme { position: fixed; left: 0; top: 0; z-index: 5; width: var(--gemme-taille); aspect-ratio: 1; pointer-events: none; transform: translate(38vw, 12vh); transition: transform 0.9s var(--sortie), opacity 0.6s var(--sortie); will-change: transform; }
html.js .gemme:not([data-etat]) { transform: translate(34vw, -45vh); }
.gemme__ressort { width: 100%; height: 100%; transform-origin: 50% 90%; }
.gemme__corps { display: block; width: 100%; height: 100%; mix-blend-mode: screen; will-change: transform; }
.gemme[data-etat="entree"] { transform: translate(38vw, 12vh); }
.gemme[data-etat="entree"] .gemme__ressort { animation: ecrase 0.8s var(--sortie) 0.9s both; }
@keyframes ecrase { 0% { transform: none; } 35% { transform: scale(1.18, 0.78); } 70% { transform: scale(0.94, 1.08); } 100% { transform: none; } }
.gemme[data-etat="haut"] { transform: translate(41vw, 6vh) rotate(-6deg); }
.gemme[data-etat="devis"] { transform: translate(47vw, 28vh) rotate(4deg); }
.gemme[data-etat="vente"] { transform: translate(53vw, 46vh) rotate(-3deg) scale(0.9); }
.gemme[data-etat="bouton"] { transform: translate(72vw, 64vh) scale(0.68); }
.gemme[data-etat="bouton"] .gemme__ressort { animation: appuie 0.7s var(--sortie) 0.75s both; }
@keyframes appuie { 0% { transform: none; } 45% { transform: scale(1.1, 0.8); } 100% { transform: none; } }
.gemme[data-etat="droite-haut"] { transform: translate(86vw, 14vh) rotate(8deg) scale(0.85); }
.gemme[data-etat="droite-bas"] { transform: translate(84vw, 62vh) rotate(-8deg) scale(0.8); }
.gemme[data-etat="telephone"] { transform: translate(58vw, 16vh) scale(0.9); }
.gemme[data-etat="efface"] { transform: translate(50vw, 40vh) scale(0.6); opacity: 0.35; }
.gemme[data-etat="vignette"] { transform: translate(90vw, 82vh) scale(0.4); }
.gemme[data-etat="replie"] { transform: translate(1vw, -1vh) scale(0.14); opacity: 0; }

/* ——— Sept formats. Tablette couchée et bureau : texte à gauche, cadre à droite ————————— */
@media (max-width: 1400px) { .appli { grid-template-columns: 150px minmax(0, 1fr); } .facture__cote { width: 170px; } }
@media (max-width: 1180px) { .appli__menu { display: none; } .appli { grid-template-columns: minmax(0, 1fr); } .cadre { width: 56vw; } }

/* Téléphone couché et iPhone SE couché : cadre à droite, plus étroit, corps réduit d'un rang. */
@media (max-height: 520px) and (min-width: 640px) {
  :root { --barre-h: 52px; }
  .barre__marque { font-size: 18px; } .barre__prix { padding: 8px 14px; font-size: 13px; }
  .coupe { width: 48vw; padding-top: calc(var(--barre-h) + 4vh); min-height: 100svh; }
  .titre--h1 { font-size: clamp(30px, 6.2vw, 60px); } .titre { font-size: clamp(24px, 3.8vw, 44px); } .texte { font-size: 14px; }
  .cadre { top: calc(var(--barre-h) + 8px); right: -4vw; width: 54vw; height: calc(100svh - var(--barre-h) - 16px); }
  .appli__menu { display: none; } .appli { grid-template-columns: minmax(0, 1fr); }
  .panneau { padding: 12px 14px; gap: 8px; } .tuile { padding: 8px 10px; gap: 4px; } .valeur { font-size: 18px; } .etiq { font-size: 9px; }
  .tuile--graphe, .tuile--actes, .actes, .papier__adresses, .facture__cote, .ligne--tete { display: none; }
  .papier { padding: 12px 14px; gap: 8px; } .papier__titre { font-size: 14px; } .papier .ligne { font-size: 10px; padding: 4px 0; grid-template-columns: minmax(0, 1fr) 24px 56px 64px; }
  .papier__paiement { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; padding-top: 8px; } .qr { width: 56px; height: 56px; padding: 2px; } .qr__croix { width: 8px; height: 8px; } .papier__compte { font-size: 8px; line-height: 1.4; }
  .tampon { font-size: 14px; top: 10px; right: 12px; padding: 3px 8px; }
  .telephone { top: calc(var(--barre-h) + 8px); right: 6vw; width: min(180px, 22vw); }
  .cadre__note { display: none; }
  .cadre[data-etat="facture"] { transform: translateX(-6vw) scale(1.02); }
  .prix { font-size: clamp(120px, 30vh, 200px); }
  .gemme { --gemme-taille: 90px; }
  .gemme[data-etat="entree"], .gemme[data-etat="haut"] { transform: translate(44vw, 6vh); }
  .gemme[data-etat="devis"], .gemme[data-etat="vente"] { transform: translate(50vw, 40vh) scale(0.9); }
  .gemme[data-etat="bouton"] { transform: translate(80vw, 60vh) scale(0.7); }
  .gemme[data-etat="droite-haut"], .gemme[data-etat="droite-bas"], .gemme[data-etat="telephone"] { transform: translate(86vw, 20vh) scale(0.8); }
}

/* Téléphone debout, Android étroit, tablette debout : le cadre fixé en haut, les coupes dessous. */
@media (max-width: 1023px) and (min-height: 521px), (max-width: 639px) {
  .coupe { width: 100%; padding: calc(var(--barre-h) + 46svh + 24px) var(--gouttiere) 6vh; min-height: 100svh; align-content: start; }
  .coupe--bas, .coupe--milieu { align-content: start; }
  .coupe--large, .coupe--fin { padding-top: calc(var(--barre-h) + 8vh); }
  .coupe--large { align-content: center; }
  .coupe__corps { max-width: 40ch; }
  .titre--h1 { font-size: clamp(38px, 11vw, 72px); } .titre { font-size: clamp(30px, 8.4vw, 54px); }
  .faits { font-size: clamp(24px, 7.2vw, 48px); }
  .cadre { top: calc(var(--barre-h) + 10px); left: 12px; right: 12px; width: auto; height: 46svh; transform-origin: 50% 0; }
  .appli__menu { display: none; } .appli { grid-template-columns: minmax(0, 1fr); border-radius: 12px; }
  .cadre::before, .cadre::after, .appli::before, .appli::after { display: none; }
  .panneau { padding: 14px 14px; gap: 10px; } .panneau__titre { font-size: 15px; } .panneau__heure { font-size: 10px; }
  .tuiles { gap: 8px; } .tuile { padding: 10px 12px; gap: 5px; border-radius: 10px; } .valeur { font-size: 20px; } .etiq { font-size: 9px; }
  .tuile--actes { display: none; } .graphe { height: 60px; gap: 6px; }
  .ligne { grid-template-columns: minmax(0, 1fr) 30px 64px 72px; gap: 8px; font-size: 11px; padding: 7px 0; } .ligne--total { font-size: 14px; }
  .panneau--facture { flex-direction: column; gap: 10px; } .facture__cote { width: auto; flex-direction: row; } .facture__cote .tuile:last-of-type, .bouton--appli { display: none; }
  .papier { padding: 12px 14px; gap: 8px; } .papier__titre { font-size: 14px; } .papier__adresses { display: none; }
  .papier .ligne { font-size: 10px; padding: 4px 0; grid-template-columns: minmax(0, 1fr) 24px 52px 60px; } .papier .ligne--total { font-size: 13px; }
  .papier__paiement { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding-top: 8px; } .qr { width: 52px; height: 52px; padding: 2px; } .qr__croix { width: 8px; height: 8px; } .papier__compte { font-size: 8px; line-height: 1.4; }
  .tampon { font-size: 14px; top: 10px; right: 12px; padding: 3px 8px; }
  .historique li { grid-template-columns: 36px minmax(0, 1fr); gap: 8px; font-size: 12px; padding: 6px 0; } .historique li .mono:last-child { display: none; }
  .tache { padding: 10px 12px; font-size: 13px; }
  .cadre[data-etat="facture"] { transform: scale(1.02); }
  .cadre[data-etat="vignette"] { transform: translate(0, -2vh) scale(0.5); }
  .cadre[data-etat="replie"] { transform: translate(-40vw, -20vh) scale(0.05); }
  .cadre__note { left: 12px; right: 12px; bottom: -22px; font-size: 10px; }
  .telephone { top: calc(var(--barre-h) + 10px); right: 8vw; width: min(200px, 44vw); }
  .prix { font-size: clamp(150px, 42vw, 300px); }
  .fin__bas { padding-bottom: 4vh; }
  .bouton--fin { width: 100%; text-align: center; box-sizing: border-box; }
  .pied { flex-direction: column; }
  .gemme { --gemme-taille: clamp(84px, 24vw, 130px); }
  html.js .gemme:not([data-etat]) { transform: translate(70vw, -30vh); }
  .gemme[data-etat="entree"] { transform: translate(68vw, 8vh); }
  .gemme[data-etat="haut"] { transform: translate(72vw, 6vh) rotate(-6deg); }
  .gemme[data-etat="devis"], .gemme[data-etat="vente"] { transform: translate(70vw, 34vh) rotate(4deg) scale(0.85); }
  .gemme[data-etat="bouton"] { transform: translate(74vw, 40vh) scale(0.6); }
  .gemme[data-etat="droite-haut"], .gemme[data-etat="droite-bas"] { transform: translate(72vw, 10vh) rotate(8deg) scale(0.75); }
  .gemme[data-etat="telephone"] { transform: translate(26vw, 20vh) scale(0.7); }
  .gemme[data-etat="efface"] { transform: translate(40vw, 30vh) scale(0.6); }
  .gemme[data-etat="vignette"] { transform: translate(78vw, 70vh) scale(0.45); }
}

/* Moins de mouvement : les états changent en opacité, rien ne se déplace. */
@media (prefers-reduced-motion: reduce) {
  .mot, .texte, .modules, .silence, .faits li, .cadre, .gemme, .panneau, .telephone, .bascule__apres, .graphe i { transition-duration: 0.01ms; animation: none; }
  html.js .coupe:not(.est-active) .mot, html.js .coupe:not(.est-active) .texte, html.js .coupe:not(.est-active) .modules { transform: none; }
  html.js .cadre:not(.a-compte) .graphe i { transform: none; }
  .gemme__ressort, .gemme__corps { animation: none; }
}

/* Cibles tactiles : le mot-marque de la barre reste un lien de 44 px de haut, même quand la barre se réduit. */
.barre__marque { display: inline-flex; align-items: center; min-height: 44px; }
.pied__liens a { display: inline-flex; align-items: center; min-height: 44px; }

/* ——— Clair et sombre, comme dans l'application : cookie phoss_theme, data-theme sur <html>. Sombre par défaut. ——— */
:root { --accent-texte: #F5B400; --barre-graphe: #3A3B3F; --ombre: 0 40px 80px rgba(0, 0, 0, 0.6); --ombre-tel: 0 30px 70px rgba(0, 0, 0, 0.6); }
html[data-theme="clair"] { --fond: #F5F5F5; --surface: #FFFFFF; --surface-douce: #FAFAFA; --bordure: #E5E5E5; --encre: #0A0A0A; --encre-douce: #525252; --encre-attenuee: #6B6B6B; --accent: #F0B100; --accent-encre: #0A0A0A; --accent-texte: #7A5A00; --encre-sur-jaune: #3A3000; --papier: #FFFFFF; --barre-graphe: #D4D4D4; --ombre: 0 30px 70px rgba(20, 20, 20, 0.18); --ombre-tel: 0 24px 60px rgba(20, 20, 20, 0.18); }
html[data-theme="clair"] .papier { border: 1px solid #E5E5E5; }
.graphe i, .telephone__barre span::before { background: var(--barre-graphe); }
.appli { box-shadow: var(--ombre); }
.telephone { box-shadow: var(--ombre-tel); }
.bouton--appli { color: var(--surface); }
.tuile--accent .etiq, .tuile--accent .valeur { color: var(--accent-texte); }
.telephone__barre .est-actif { color: var(--accent-texte); }
.gemme__corps { mix-blend-mode: normal; }
.barre__theme { font: 600 12px var(--mono); letter-spacing: 0.06em; color: var(--encre-douce); background: none; border: 1px solid var(--bordure); border-radius: 999px; padding: 0 14px; min-height: 44px; cursor: pointer; transition: color 0.3s var(--sortie), border-color 0.3s var(--sortie); }
.barre__theme:hover { color: var(--encre); border-color: var(--encre-attenuee); }
.barre--inverse .barre__theme { color: var(--encre-sur-jaune); border-color: rgba(11, 11, 12, 0.35); }
/* La porte vers l'application : un lien discret à côté du prix, icône seule au téléphone. */
.barre__connexion { display: inline-flex; align-items: center; gap: 8px; font: 600 12px var(--mono); letter-spacing: 0.06em; color: var(--encre-douce); text-decoration: none; border: 1px solid var(--bordure); border-radius: 999px; padding: 0 14px; min-height: 44px; white-space: nowrap; transition: color 0.15s var(--sortie), border-color 0.15s var(--sortie); }
.barre__connexion svg { width: 16px; height: 16px; flex: none; }
.barre__connexion:hover { color: var(--encre); border-color: var(--encre-attenuee); }
.barre--inverse .barre__connexion { color: var(--encre-sur-jaune); border-color: rgba(11, 11, 12, 0.35); }
@media (max-width: 639px) {
  .barre__connexion { width: 44px; padding: 0; justify-content: center; }
  .barre__connexion span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .barre > * { flex-shrink: 0; }
}
@media (max-width: 639px) { .barre__theme { padding: 0 10px; font-size: 11px; } .barre__langues a { min-width: 36px; padding: 10px 6px; } }

/* Retouches après la planche : la note ne touche plus le titre au téléphone, la gemme quitte l'heure, la barre tient sur 360 px. */
@media (max-width: 1023px) and (min-height: 521px), (max-width: 639px) {
  .coupe { padding-top: calc(var(--barre-h) + 46svh + 52px); }
  .coupe--large, .coupe--fin { padding-top: calc(var(--barre-h) + 8vh); }
  .gemme[data-etat="entree"] { transform: translate(72vw, 44vh) scale(0.9); }
  .gemme[data-etat="haut"] { transform: translate(74vw, 42vh) rotate(-6deg) scale(0.85); }
}
@media (max-width: 639px) {
  .barre { gap: 8px; }
  .barre__marque { font-size: 18px; }
  .barre__prix { padding: 9px 12px; font-size: 13px; }
  .barre__theme { width: 44px; padding: 0; font-size: 0; display: inline-grid; place-items: center; }
  .barre__theme::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--encre-attenuee); background: linear-gradient(90deg, var(--encre) 50%, var(--fond) 50%); }
}
html[data-theme="clair"] .gemme__corps { mix-blend-mode: multiply; }

/* ——— Reprise après la vidéo de Johann (27.09, « phoss catastrophe ») : une composition tenue dans 1440 px, le cadre
   entier et posé à droite comme sur les planches, un seul titre par écran, la gemme SOUS le texte, aux coins du cadre,
   déplaçable au curseur ou au doigt. Le cadre ne passe plus devant le texte. ——— */
:root { --largeur: min(100vw, 1440px); --marge: calc((100vw - var(--largeur)) / 2); --cadre-gauche: calc(var(--marge) + var(--largeur) * 0.47); --cadre-largeur: calc(var(--largeur) * 0.53 - var(--gouttiere)); --cadre-hauteur: min(70svh, 660px); --cadre-haut: calc(50svh - var(--cadre-hauteur) / 2 + 24px); }
.coupes { z-index: 3; }
.gemme { z-index: 2; }
.cadre, .telephone, .cadre[data-etat="facture"] { z-index: 1; }
.cadre__coins { display: none; position: absolute; inset: 0; pointer-events: none; }
.gemme__corps { pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none; }
.gemme.est-saisie .gemme__corps { cursor: grabbing; }
html[data-theme="clair"] { --fond: #F3F3F1; --bordure: #DADAD6; --encre-attenuee: #66665F; }
@media (min-width: 1024px) and (min-height: 521px) {
  .coupes { max-width: 1440px; margin: 0 auto; }
  .coupe, .coupe--1 { width: 46%; align-content: center; padding: calc(var(--barre-h) + 4vh) var(--gouttiere) 4vh; }
  .coupe--haut, .coupe--bas, .coupe--milieu { align-content: center; }
  .coupe--large { width: 100%; }
  .coupe--fin { align-content: end; padding-bottom: 0; }
  .titre--h1 { font-size: clamp(56px, 6.6vw, 100px); }
  .titre { font-size: clamp(36px, 4.4vw, 64px); }
  .cadre { top: var(--cadre-haut); left: var(--cadre-gauche); right: auto; width: var(--cadre-largeur); height: var(--cadre-hauteur); transform-origin: 50% 50%; }
  .cadre[data-etat="facture"] { transform: scale(1.04); }
  .cadre[data-etat="telephone"] { transform: scale(0.9); }
  .cadre[data-etat="vignette"] { transform: translate(calc(var(--cadre-largeur) * 0.28), calc(var(--cadre-hauteur) * 0.3)) scale(0.42); }
  .cadre[data-etat="replie"] { transform: translate(calc(-1 * var(--cadre-gauche)), calc(-1 * var(--cadre-haut))) scale(0.05); }
  .cadre__note { right: 0; bottom: -30px; }
  .appli::before, .appli::after { display: none; }
  .cadre__coins { display: block; }
  .cadre__coins::before, .cadre__coins::after { content: ""; position: absolute; width: 18px; height: 18px; border: 0 solid var(--accent); right: -10px; }
  .cadre__coins::before { top: -10px; border-right-width: 2px; border-top-width: 2px; }
  .cadre__coins::after { bottom: -10px; border-right-width: 2px; border-bottom-width: 2px; }
  .tuile--graphe { flex-grow: 0; }
  .panneau--devis, .panneau--vente, .panneau--fiche, .panneau--taches { justify-content: center; }
  .telephone { top: var(--cadre-haut); left: calc(var(--cadre-gauche) + var(--cadre-largeur) / 2 - min(150px, 12vw)); right: auto; width: min(300px, 24vw); }
  .gemme { --gemme-taille: clamp(120px, 12vw, 190px); }
  html.js .gemme:not([data-etat]) { transform: translate(calc(var(--cadre-gauche) - var(--gemme-taille) * 0.45), -40vh); }
  .gemme[data-etat="entree"] { transform: translate(calc(var(--cadre-gauche) - var(--gemme-taille) * 0.45), calc(var(--cadre-haut) - var(--gemme-taille) * 0.35)); }
  .gemme[data-etat="haut"] { transform: translate(calc(var(--cadre-gauche) - var(--gemme-taille) * 0.45), calc(var(--cadre-haut) - var(--gemme-taille) * 0.35)) rotate(-6deg); }
  .gemme[data-etat="devis"], .gemme[data-etat="vente"] { transform: translate(calc(var(--cadre-gauche) - var(--gemme-taille) * 0.5), calc(var(--cadre-haut) + var(--cadre-hauteur) - var(--gemme-taille) * 0.6)) rotate(4deg) scale(0.9); }
  .gemme[data-etat="bouton"] { transform: translate(calc(var(--cadre-gauche) + var(--cadre-largeur) - var(--gemme-taille) * 0.55), calc(var(--cadre-haut) + var(--cadre-hauteur) - var(--gemme-taille) * 0.75)) scale(0.7); }
  .gemme[data-etat="droite-haut"], .gemme[data-etat="telephone"] { transform: translate(calc(var(--cadre-gauche) + var(--cadre-largeur) - var(--gemme-taille) * 0.5), calc(var(--cadre-haut) - var(--gemme-taille) * 0.4)) rotate(8deg) scale(0.85); }
  .gemme[data-etat="droite-bas"] { transform: translate(calc(var(--cadre-gauche) + var(--cadre-largeur) - var(--gemme-taille) * 0.5), calc(var(--cadre-haut) + var(--cadre-hauteur) - var(--gemme-taille) * 0.5)) rotate(-8deg) scale(0.8); }
  .gemme[data-etat="efface"] { transform: translate(calc(var(--cadre-gauche) + var(--cadre-largeur) * 0.5 - var(--gemme-taille) * 0.5), calc(var(--cadre-haut) + var(--cadre-hauteur) * 0.4)) scale(0.6); opacity: 0.35; }
  .gemme[data-etat="vignette"] { transform: translate(calc(var(--cadre-gauche) + var(--cadre-largeur) - var(--gemme-taille) * 0.6), calc(var(--cadre-haut) + var(--cadre-hauteur) - var(--gemme-taille) * 0.3)) scale(0.45); }
  .gemme[data-etat="replie"] { transform: translate(calc(var(--marge) + var(--gouttiere)), 8px) scale(0.14); opacity: 0; }
}

/* La facture respire : le menu s'efface pendant l'acte 7, le papier reprend sa largeur, le tampon descend sous le titre.
   La gemme sort davantage du cadre pour ne couvrir ni la marque ni les tuiles. */
@media (min-width: 1024px) and (min-height: 521px) {
  .cadre[data-etat="facture"] .appli { grid-template-columns: minmax(0, 1fr); }
  .cadre[data-etat="facture"] .appli__menu { display: none; }
  .papier .ligne { grid-template-columns: minmax(0, 1fr) 28px 76px 88px; }
  .tampon { top: 64px; }
  .gemme[data-etat="entree"] { transform: translate(calc(var(--cadre-gauche) - var(--gemme-taille) * 0.62), calc(var(--cadre-haut) - var(--gemme-taille) * 0.55)); }
  .gemme[data-etat="haut"] { transform: translate(calc(var(--cadre-gauche) - var(--gemme-taille) * 0.62), calc(var(--cadre-haut) - var(--gemme-taille) * 0.55)) rotate(-6deg); }
  .gemme[data-etat="devis"], .gemme[data-etat="vente"] { transform: translate(calc(var(--cadre-gauche) - var(--gemme-taille) * 0.62), calc(var(--cadre-haut) + var(--cadre-hauteur) - var(--gemme-taille) * 0.45)) rotate(4deg) scale(0.9); }
  .gemme[data-etat="droite-haut"], .gemme[data-etat="telephone"] { transform: translate(calc(var(--cadre-gauche) + var(--cadre-largeur) - var(--gemme-taille) * 0.4), calc(var(--cadre-haut) - var(--gemme-taille) * 0.55)) rotate(8deg) scale(0.85); }
  .gemme[data-etat="droite-bas"] { transform: translate(calc(var(--cadre-gauche) + var(--cadre-largeur) - var(--gemme-taille) * 0.4), calc(var(--cadre-haut) + var(--cadre-hauteur) - var(--gemme-taille) * 0.45)) rotate(-8deg) scale(0.8); }
}

/* Le tampon tombe dans le blanc du papier, sous les totaux ; « Total CHF » tient sur une ligne. */
@media (min-width: 1024px) and (min-height: 521px) {
  .tampon { top: 56%; right: 28px; }
  .papier .ligne--total span:nth-child(3) { white-space: nowrap; }
}

/* La marque Phoss dans la barre : le picto suit l'encre, le point reste jaune. */
.barre__marque { gap: 10px; }
.barre__picto { display: block; flex-shrink: 0; }

/* Quatre langues dans la barre (28.09.2026) : au téléphone, le mot-marque cède la place au picto, et le bouton de
   thème, les langues et le prix ne se laissent plus écraser sous 44 px. */
.barre__marque { display: inline-flex; align-items: center; gap: 8px; }
.barre__theme, .barre__prix, .barre__langues a { flex: none; }
@media (max-width: 639px) {
  .barre__mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .barre__langues .bascule-langue { gap: 2px; }
}


/* La fin, au grand écran : le chiffre prend la hauteur, le texte et le bouton grandissent avec lui, le bouton
   tient en bas à droite, le pied respire. Retour de Johann du 28.09 : « les éléments sont trop petits ». */
@media (min-width: 1024px) and (min-height: 521px) {
  .coupe--fin { padding-top: calc(var(--barre-h) + 2vh); }
  .coupe__corps--fin { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 48px; }
  .prix { grid-column: 1 / -1; font-size: clamp(200px, min(36vw, 62svh), 760px); line-height: 0.8; margin-left: -0.08em; }
  .fin__bas { grid-column: 1 / -1; padding: 4vh 0 5vh; align-items: flex-end; }
  .fin__texte { max-width: 56ch; gap: 16px; }
  .texte--fin { font-size: clamp(26px, 2.6vw, 44px); line-height: 1.15; letter-spacing: -0.025em; }
  .fin__petit { font-size: clamp(14px, 1.1vw, 17px); line-height: 1.5; }
  .bouton--fin { font-size: clamp(20px, 1.8vw, 28px); padding: 26px 46px; }
  .pied { font-size: 14px; padding: 26px 0 max(28px, env(safe-area-inset-bottom)); }
  .pied__liens { gap: 28px; }
}

/* La fin déborde du conteneur de 1440 px : le jaune couvre toute la largeur de l'écran, le chiffre tient sous la barre. */
@media (min-width: 1024px) and (min-height: 521px) {
  .coupe--fin { width: 100%; position: relative; }
  .coupe--fin::before { content: ""; position: absolute; top: 0; bottom: 0; left: -100vw; right: -100vw; background: var(--accent); z-index: -1; }
  .prix { font-size: clamp(180px, min(30vw, 50svh), 640px); }
}
@media (min-width: 1024px) and (min-height: 521px) { .texte--fin { max-width: 22ch; } }

/* Actes 12 et 13 au grand écran : les trois faits en bandes jaunes à l'échelle de la page, en escalier vers le bord
   droit ; « Un compte. Une licence. » à la taille du héros. Retour de Johann du 28.09. */
@media (min-width: 1024px) and (min-height: 521px) {
  .coupe--12 .coupe__corps { max-width: none; width: 100%; }
  .faits { font-size: clamp(44px, 6.6vw, 104px); gap: 22px; }
  .faits li { padding: 0.1em 0.32em; }
  .faits li:nth-child(1) { margin-right: 14%; }
  .faits li:nth-child(2) { margin-right: 7%; }
  .coupe--13 .coupe__corps { max-width: 62%; gap: 28px; }
  .coupe--13 .titre { font-size: clamp(56px, 6.6vw, 100px); }
  .coupe--13 .texte { font-size: clamp(22px, 2vw, 32px); max-width: 30ch; }
}
@media (min-width: 1024px) and (min-height: 521px) { .faits { font-size: clamp(40px, 5.6vw, 84px); } }

/* ——— Téléphone et tablette debout, reprise du 27.09 (« les textes chevauchent le cadre, la sphère gêne la lecture ») :
   le cadre et la gemme vivent dans une scène fixe au fond opaque ; le texte qui remonte passe DESSOUS et s'efface
   dans un fondu, il ne croise plus jamais la fenêtre. La gemme se range au coin du cadre, hors des tuiles, et ne
   confisque plus le défilement au doigt (glisser vertical = défiler, horizontal = la déplacer). ——— */
.scene { display: none; }
@media (max-width: 1023px) and (min-height: 521px), (max-width: 639px) {
  :root { --scene-bas: calc(var(--barre-h) + 10px + 46svh); --scene-h: calc(var(--scene-bas) + 66px); }
  .scene { display: block; position: fixed; z-index: 4; left: 0; right: 0; top: 0; height: var(--scene-h); pointer-events: none; background: linear-gradient(to bottom, var(--fond) calc(100% - 14px), color-mix(in srgb, var(--fond) 0%, transparent)); transition: opacity 0.6s var(--sortie), clip-path 0.9s var(--sortie); clip-path: inset(0 0 0 0); }
  html.js body[data-acte="12"] .scene, html.js body[data-acte="14"] .scene { opacity: 0; }
  html.js body[data-acte="13"] .scene { clip-path: inset(0 0 calc(100% - var(--barre-h) - 23svh - 24px) 0); }
  html:not(.js) .scene { display: none; }
  .coupe { padding-top: calc(var(--scene-h) + 16px); }
  .coupe--large, .coupe--fin { padding-top: calc(var(--barre-h) + 8vh); }
  .coupe--13 { align-content: start; padding-top: calc(var(--barre-h) + 23svh + 44px); }
  .cadre, .cadre[data-etat="facture"], .telephone { z-index: 5; }
  .cadre__note { top: calc(100% + 8px); bottom: auto; right: calc(var(--gemme-taille) * 0.6 + 8px); line-height: 1.35; }
  .cadre[data-etat="replie"] { transform: translate(-40vw, -20svh) scale(0.05); }
  .cadre[data-etat="vignette"] { transform: translate(0, -2svh) scale(0.5); }

  .gemme { z-index: 6; --gemme-taille: clamp(60px, 16vw, 96px); }
  html.js body[data-acte="12"] .gemme { z-index: 2; }
  .gemme__corps { touch-action: pan-y; }
  html.js .gemme:not([data-etat]) { transform: translate(calc(100vw - 14px - var(--gemme-taille) * 0.55), -30svh); }
  .gemme[data-etat="entree"] { transform: translate(calc(100vw - 14px - var(--gemme-taille) * 0.55), calc(var(--scene-bas) - var(--gemme-taille) * 0.42)); }
  .gemme[data-etat="haut"] { transform: translate(calc(100vw - 14px - var(--gemme-taille) * 0.55), calc(var(--scene-bas) - var(--gemme-taille) * 0.42)) rotate(-6deg); }
  .gemme[data-etat="devis"], .gemme[data-etat="vente"] { transform: translate(calc(100vw - 14px - var(--gemme-taille) * 0.55), calc(var(--scene-bas) - var(--gemme-taille) * 0.42)) rotate(4deg) scale(0.9); }
  .gemme[data-etat="bouton"] { transform: translate(calc(100vw - 14px - var(--gemme-taille) * 0.55), calc(var(--scene-bas) - var(--gemme-taille) * 0.42)) scale(0.8); }
  .gemme[data-etat="droite-haut"], .gemme[data-etat="droite-bas"] { transform: translate(calc(100vw - 14px - var(--gemme-taille) * 0.55), calc(var(--scene-bas) - var(--gemme-taille) * 0.42)) rotate(8deg) scale(0.9); }
  .gemme[data-etat="telephone"] { transform: translate(calc(24vw - var(--gemme-taille) * 0.5), calc(var(--barre-h) + 20svh)) scale(1.1); }
  .gemme[data-etat="efface"] { transform: translate(calc(100vw - 16px - var(--gemme-taille)), calc(100svh - 24px - var(--gemme-taille))) scale(0.6); opacity: 0.35; }
  .gemme[data-etat="vignette"] { transform: translate(calc(50vw + (100vw - 24px) / 4 - var(--gemme-taille) * 0.5), calc(var(--barre-h) + 10px + 21svh - var(--gemme-taille) * 0.5)) scale(0.6); }
}

/* Le téléphone miniature de l'acte 11, au téléphone : un peu plus large, les chiffres tiennent sur une ligne, l'en-tête
   s'empile, les onglets restent lisibles au lieu de se coller. */
@media (max-width: 1023px) and (min-height: 521px), (max-width: 639px) {
  .telephone { width: min(220px, 52vw); padding: 12px; border-radius: 24px; }
  .telephone .panneau__tete { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  .telephone .panneau__tete .mono { font-size: 10px; color: var(--encre-attenuee); }
  .tuiles--tel .tuile { padding: 8px 9px; min-width: 0; }
  .tuiles--tel .valeur { font-size: clamp(12px, 3.6vw, 16px); white-space: nowrap; letter-spacing: -0.02em; }
  .tuiles--tel .etiq { font-size: 8px; }
  .telephone__barre { font-size: 7px; gap: 2px; }
  .telephone__barre span { min-width: 0; }
  .telephone__barre span::before { width: 16px; }
}

/* Acte 12 au grand écran : les faits occupent la droite, la gemme estompée se pose en bas à gauche, hors des bandes. */
@media (min-width: 1024px) and (min-height: 521px) {
  .gemme[data-etat="efface"] { transform: translate(calc(var(--marge) + var(--gouttiere)), calc(100svh - var(--gemme-taille) - 4svh)) scale(0.6); opacity: 0.35; }
}

/* Téléphone couché, reprise du 27.09 : le cadre ne déborde plus du bord droit (les montants étaient coupés), il ne
   glisse plus vers le texte à la facture, et la gemme quitte les tuiles pour le coin bas-droit du cadre. */
@media (max-height: 520px) and (min-width: 640px) {
  .cadre { right: 12px; width: 50vw; transform-origin: 100% 50%; }
  .cadre[data-etat="facture"] { transform: scale(1.02); }
  .ligne { grid-template-columns: minmax(0, 1fr) 22px 58px 62px; gap: 6px; font-size: 10px; padding: 5px 0; }
  .panneau__tete { flex-wrap: wrap; row-gap: 2px; } .panneau__titre { font-size: 14px; } .panneau__heure { font-size: 9px; }
  .gemme { --gemme-taille: 56px; }
  html.js .gemme:not([data-etat]) { transform: translate(calc(100vw - 14px - var(--gemme-taille) * 0.5), -30svh); }
  .gemme[data-etat="entree"], .gemme[data-etat="haut"] { transform: translate(calc(100vw - 14px - var(--gemme-taille) * 0.5), calc(100svh - 8px - var(--gemme-taille) * 0.45)) rotate(-6deg); }
  .gemme[data-etat="devis"], .gemme[data-etat="vente"] { transform: translate(calc(100vw - 14px - var(--gemme-taille) * 0.5), calc(100svh - 8px - var(--gemme-taille) * 0.45)) rotate(4deg) scale(0.9); }
  .gemme[data-etat="bouton"] { transform: translate(calc(100vw - 14px - var(--gemme-taille) * 0.5), calc(100svh - 8px - var(--gemme-taille) * 0.45)) scale(0.8); }
  .gemme[data-etat="droite-haut"], .gemme[data-etat="droite-bas"] { transform: translate(calc(100vw - 14px - var(--gemme-taille) * 0.5), calc(100svh - 8px - var(--gemme-taille) * 0.45)) rotate(8deg) scale(0.9); }
  .gemme[data-etat="telephone"] { transform: translate(56vw, 34svh); }
  .telephone { padding: 10px; border-radius: 20px; }
  .telephone .panneau__tete { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  .telephone .panneau__tete .mono { font-size: 9px; color: var(--encre-attenuee); }
  .tuiles--tel { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .tuiles--tel .tuile:nth-child(n+3) { display: none; }
  .tuiles--tel .tuile { padding: 7px 9px; }
  .tuiles--tel .valeur { font-size: 15px; white-space: nowrap; }
  .telephone__barre { font-size: 6px; gap: 2px; } .telephone__barre span { min-width: 0; } .telephone__barre span::before { width: 14px; }
}
/* Au doigt, la gemme laisse passer le défilement vertical ; on la déplace d'un glissé horizontal. */
@media (pointer: coarse) { .gemme__corps { touch-action: pan-y; } }

/* Android courant (360 px) : cinq éléments dans la barre, on resserre les espaces, jamais les cibles. */
@media (max-width: 379px) {
  .barre { gap: 4px; }
  .barre__langues .bascule-langue { gap: 2px; }
  .barre__langues a { min-width: 32px; padding: 10px 4px; }
}

/* Lex dans la barre (Johann, 02.10.2026) : la même pilule que « Se connecter », l'enveloppe de Lex en tête.
   Au téléphone, elle se réduit à l'enveloppe, comme la connexion à sa flèche. */
.barre__lex { display: inline-flex; align-items: center; gap: 8px; flex: none; font: 600 12px var(--mono); letter-spacing: 0.06em; color: var(--encre-douce); text-decoration: none; border: 1px solid var(--bordure); border-radius: 999px; padding: 0 14px; min-height: 44px; box-sizing: border-box; transition: color 0.3s var(--sortie), border-color 0.3s var(--sortie); }
.barre__lex svg { width: 16px; height: 16px; flex: none; }
.barre__lex:hover { color: var(--encre); border-color: var(--encre-attenuee); }
.barre--inverse .barre__lex { color: var(--encre-sur-jaune); border-color: rgba(11, 11, 12, 0.35); }
@media (max-width: 1023px) {
  .barre__lex { width: 44px; padding: 0; justify-content: center; }
  .barre__lex span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Le lien « Lex » du pied, trois lettres : il garde une cible de 44 px au doigt. */
.pied__liens a { min-width: 44px; }
/* Au téléphone étroit, la barre porte une pilule de plus depuis Lex (02.10.2026) : sans rien retirer, chaque
   contrôle cède quelques pixels (cibles de 36 px, au-dessus des 24 px du minimum), la gouttière et les
   espacements aussi, et la barre tient sur 360 px sans rogner le prix. */
@media (max-width: 400px) {
  .barre { gap: 2px; padding: 0 8px; }
  .barre__lex, .barre__theme, .barre__connexion { width: 36px; box-sizing: border-box; }
  .barre__langues .bascule-langue { gap: 0; }
  .barre__langues a { min-width: 32px; padding: 10px 4px; }
  .barre__prix { padding: 8px 9px; }
}
/* Téléphone couché (667 px, 03.10.2026) : « Se connecter » gardait son texte et poussait « 9.- par mois » hors de
   l'écran de 45 px, sous la racine qui rogne. La connexion se réduit à sa flèche, comme debout. */
@media (max-width: 1023px) and (max-height: 520px) {
  .barre { gap: 10px; }
  .barre__connexion { width: 44px; padding: 0; justify-content: center; }
  .barre__connexion span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* 12.10.2026 — Les langues dans un petit menu (Johann) : DE EN ES côte à côte serraient l'en-tête au téléphone.
   Le menu ne prend que la place d'un bouton ; la liste s'ouvre sous lui, par-dessus la page. Les liens de la
   liste sont nommés plus précisément que `.barre__langues a` (et que la barre inversée, jaune) : sans cela ils
   héritaient du format des boutons DE EN ES, centrés, en capitales grises, et du brun sur jaune sur fond sombre.
   La liste s'aligne sur le bord de DÉBUT du bouton : au téléphone le menu suit le logo, et alignée sur sa fin,
   elle sortait de 18 px à gauche de l'écran (banc, format étroit). */
.choix-langue { position: relative; flex: none; }
.choix-langue > summary { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 10px 8px; border-radius: 8px; font: 600 12px var(--mono); letter-spacing: .06em; color: var(--encre-douce); cursor: pointer; list-style: none; }
.choix-langue > summary::-webkit-details-marker { display: none; }
.choix-langue > summary::after { content: ""; width: 5px; height: 5px; margin-block-start: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.choix-langue[open] > summary::after { margin-block-start: 3px; transform: rotate(-135deg); }
.choix-langue > summary:hover { color: var(--encre); background: var(--surface-douce); }
.barre--inverse .choix-langue > summary { color: var(--encre-sur-jaune); }
.choix-langue__liste { position: absolute; inset-inline-start: 0; inset-block-start: calc(100% + 6px); z-index: 60; display: grid; min-width: 150px; padding: 6px; background: var(--surface); border: 1px solid var(--bordure); border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
.barre__langues .choix-langue__liste a, .barre--inverse .barre__langues .choix-langue__liste a { display: flex; justify-content: flex-start; width: 100%; min-width: 0; padding: 0 12px; font: 500 14px var(--sans); letter-spacing: 0; color: var(--encre); }
.barre__langues .choix-langue__liste a:hover, .barre__langues .choix-langue__liste a:focus-visible { background: var(--surface-douce); }

/* --- La signature des développeurs (17.10.2026) ---------------------------
   « Développé par Octaforge.fr et hybridbusiness.ch », demandée par Johann
   sur tous les sites de HBS : discrète, sur une rangée à elle sous les liens
   du pied (vitrine et pages, qui chargent toutes deux cette feuille). 12 px,
   le plancher de lecture au doigt ; l'encre du pied qui la porte. Soulignée
   d'un trait fin : dans une phrase, la couleur seule ne fait pas un lien. */
.pied__credit { width: 100%; margin: 0; font-size: 12px; line-height: 1.5; letter-spacing: .02em; }
.pied__credit a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.pied__credit a:hover, .pied__credit a:focus-visible { text-decoration-thickness: 2px; }

/* --- Le tutoriel sur la vitrine (19.10.2026). Un bloc plein au-dessus du cadre fixe
   (z-index 3, comme les coupes), sur la surface sombre du site : le film, lui, est clair,
   dans son cadre de téléphone. Le téléphone vertical fait au plus 360 px de large ; au
   téléphone il passe sous le texte, centré. --- */
.tuto-site { position: relative; z-index: 3; background: var(--surface); color: var(--encre); padding: 12vh var(--gouttiere); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 5vw, 80px); align-items: center; border-top: 1px solid var(--bordure); }
.tuto-site .titre { color: var(--encre); font-size: clamp(30px, 3.6vw, 52px); }
.tuto-site .texte { color: var(--encre-douce); max-width: 46ch; }
.tuto-site__texte { display: grid; gap: clamp(16px, 2vh, 24px); max-width: 560px; }
.tuto-site__sur { margin: 0; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--encre-attenuee); }
.tuto-site__cadre { width: min(360px, 100%); justify-self: center; aspect-ratio: 9 / 16; border-radius: 28px; background: #000; padding: 10px; box-sizing: border-box; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--bordure); }
.tuto-site__video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; background: #F5F5F5; }
.bouton--tuto { justify-self: start; display: inline-flex; align-items: center; gap: 10px; background: var(--accent); color: var(--accent-encre); padding: 14px 22px; border-radius: 999px; font-weight: 800; text-decoration: none; min-height: 44px; box-sizing: border-box; }
.bouton--tuto .mono { font-size: 11px; opacity: 0.75; }
@media (max-width: 760px) {
  .tuto-site { grid-template-columns: minmax(0, 1fr); }
  .tuto-site__cadre { width: min(300px, 100%); }
}