/* tech2market.fr : la calculatrice de poche (16 octobre 2026). Boîtier crème, touches blanches, écran LCD vert pâle. */
:root {
  --boitier: #efe9dc;
  --boitier-fonce: #e3dccb;
  --touche: #ffffff;
  --ombre: #cfc7b4;
  --lcd: #d5e1c8;
  --lcd-clair: #e4ecdb;
  --lcd-encre: #2c3a2a;
  --encre: #22252a;
  --gris: #5d6068;
  --egal: #e8743b;
  --egal-fonce: #c75a24;
  --filet: #d9d2c1;
  --mono: 'Share Tech Mono', ui-monospace, monospace;
  --titre: 'Anybody', 'Arial Narrow', sans-serif;
  --texte: 'Reddit Sans', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--boitier); color: var(--encre); font: 400 1.0625rem/1.7 var(--texte); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.passer { position: absolute; left: -999px; top: 0; background: var(--touche); padding: .5rem 1rem; z-index: 10; }
.passer:focus { left: 1rem; }

/* --- le boîtier (en-tête) */
.boitier { background: linear-gradient(#f6f1e6, var(--boitier)); border-bottom: 1px solid var(--filet); }
.boitier__in { max-width: 1180px; margin: 0 auto; padding: 1.1rem 1rem .6rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.ecran-logo { display: inline-flex; align-items: baseline; gap: .75rem; background: var(--lcd); color: var(--lcd-encre); text-decoration: none; padding: .45rem .9rem; border-radius: 8px; box-shadow: inset 0 2px 6px rgba(44, 58, 42, .25); }
.ecran-logo__chiffres { font: 1.7rem/1 var(--mono); letter-spacing: .08em; }
.ecran-logo__nom { font: 800 1.15rem/1 var(--titre); letter-spacing: .02em; }
.boitier__devise { margin: 0; flex: 1 1 280px; color: var(--gris); font-size: .92rem; line-height: 1.45; }
.rangee { max-width: 1180px; margin: 0 auto; padding: .3rem 1rem 1rem; display: flex; gap: .55rem; flex-wrap: wrap; }
.touche { display: inline-flex; align-items: center; gap: .5rem; background: var(--touche); text-decoration: none; padding: .5rem .95rem; border-radius: 10px; font: 700 .98rem/1 var(--titre); box-shadow: 0 4px 0 var(--ombre); transition: transform .08s, box-shadow .08s; }
.touche:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--ombre); }
.touche__op { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 6px; background: var(--boitier-fonce); font: 1rem/1 var(--mono); }
.touche--enfoncee { transform: translateY(3px); box-shadow: 0 1px 0 var(--ombre); background: #fdf7ee; }
.touche--enfoncee .touche__op { background: var(--egal); color: #fff; }

main { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.titre-bloc { font: 800 1.35rem/1.2 var(--titre); margin: 0 0 1rem; display: flex; align-items: center; gap: .6rem; }
.titre-bloc span { font-family: var(--mono); color: var(--egal-fonce); }
.egal { display: inline-block; background: var(--egal); color: #fff; text-decoration: none; padding: .45rem .9rem; border-radius: 10px; font: 700 .95rem/1.2 var(--titre); box-shadow: 0 4px 0 var(--egal-fonce); }
.egal--bloc { margin-top: 1.25rem; }
.pastille { display: inline-flex; align-items: center; gap: .35rem; font: 700 .78rem/1 var(--titre); text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.pastille b { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 4px; background: var(--lcd); color: var(--lcd-encre); font: .85rem/1 var(--mono); }

/* vignettes ; sans image, un petit écran */
.vign, .carte__img, .cle__img, .memoire__img, .affichage__img { display: block; overflow: hidden; border-radius: 10px; background: var(--lcd); }
.vign img, .carte__img img, .cle__img img, .memoire__img img, .affichage__img img { width: 100%; height: 100%; object-fit: cover; }
.vign--ecran, .carte__img--ecran, .cle__img--ecran, .memoire__img--ecran, .affichage__img--ecran { display: grid; place-items: center; background: repeating-linear-gradient(0deg, var(--lcd) 0 3px, var(--lcd-clair) 3px 4px); color: var(--lcd-encre); font: 2.4rem/1 var(--mono); box-shadow: inset 0 2px 8px rgba(44, 58, 42, .2); }

/* --- accueil : l'écran */
.affichage__ecran { background: var(--lcd-clair); border: 10px solid #fbf8f1; border-radius: 22px; box-shadow: 0 6px 0 var(--ombre), inset 0 3px 12px rgba(44, 58, 42, .18); padding: 1.6rem; }
.affichage__etiquette { margin: 0 0 .4rem; font: .95rem/1.3 var(--mono); color: var(--lcd-encre); letter-spacing: .04em; }
.affichage__h1 { margin: 0 0 1.4rem; font: 800 clamp(1.6rem, 3.6vw, 2.5rem)/1.12 var(--titre); color: var(--lcd-encre); max-width: 22ch; }
.affichage__calcul { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.5rem; align-items: center; text-decoration: none; background: #fbfdf8; border-radius: 14px; padding: 1.2rem; }
.affichage__calcul > * { min-width: 0; }
.affichage__q { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.affichage__t { font: 700 clamp(1.25rem, 2.4vw, 1.7rem)/1.2 var(--titre); }
.affichage__chapo { color: var(--gris); }
.affichage__img { aspect-ratio: 16 / 9; }
.affichage__calcul:hover .affichage__t { text-decoration: underline; text-decoration-thickness: 2px; }

/* --- le clavier */
.clavier { margin-top: 2.6rem; }
.clavier__grille { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.clavier__grille > * { min-width: 0; }
.cle { background: var(--touche); border-radius: 16px; box-shadow: 0 6px 0 var(--ombre); padding: .8rem; display: flex; flex-direction: column; gap: .7rem; }
.cle__tete { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.cle__op { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 9px; background: var(--egal); color: #fff; font: 1.35rem/1 var(--mono); box-shadow: 0 3px 0 var(--egal-fonce); }
.cle__nom { font: 800 1.1rem/1.1 var(--titre); }
.cle__une { display: flex; flex-direction: column; gap: .45rem; text-decoration: none; font: 600 .95rem/1.35 var(--texte); }
.cle__img { aspect-ratio: 3 / 2; }
.cle__deux { border-top: 1px dashed var(--filet); padding-top: .55rem; font-size: .9rem; line-height: 1.4; text-decoration: none; color: var(--gris); }
.cle a:hover span, .cle__deux:hover { text-decoration: underline; }

/* --- les mémoires */
.memoires { margin-top: 2.8rem; }
.memoires__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.memoires__liste > * { min-width: 0; }
.memoire { position: relative; display: flex; flex-direction: column; gap: .55rem; text-decoration: none; }
.memoire__m { position: absolute; top: .6rem; left: .6rem; z-index: 1; background: var(--lcd); color: var(--lcd-encre); font: 1rem/1 var(--mono); padding: .3rem .5rem; border-radius: 6px; }
.memoire__img { aspect-ratio: 16 / 10; }
.memoire__t { font: 700 1.12rem/1.3 var(--titre); }
.memoire:hover .memoire__t { text-decoration: underline; }

/* --- l'historique et les lignes */
.historique { margin-top: 2.8rem; }
.lignes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .2rem 2rem; }
.lignes > * { min-width: 0; }
.ligne { display: grid; grid-template-columns: 96px 1fr; gap: .9rem; align-items: center; text-decoration: none; padding: .75rem 0; border-bottom: 1px solid var(--filet); }
.ligne .vign { width: 96px; height: 64px; }
.ligne .vign--ecran { font-size: 1.6rem; }
.ligne__txt { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.ligne__t { font: 700 1rem/1.3 var(--titre); overflow-wrap: anywhere; }
.ligne__m, .carte__m { font: .82rem/1.3 var(--mono); color: var(--gris); }
.ligne:hover .ligne__t { text-decoration: underline; }

/* --- cartes (rubriques, même touche) */
.cartes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.cartes > * { min-width: 0; }
.carte { display: flex; flex-direction: column; gap: .5rem; text-decoration: none; background: var(--touche); border-radius: 14px; padding: .7rem; box-shadow: 0 5px 0 var(--ombre); height: 100%; }
.carte__img { aspect-ratio: 16 / 10; }
.carte__t { font: 700 1.04rem/1.3 var(--titre); overflow-wrap: anywhere; }
.carte:hover .carte__t { text-decoration: underline; }
.rubrique { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.8rem; }
.rubrique__op { display: grid; place-items: center; flex: none; width: 4.4rem; height: 4.4rem; border-radius: 16px; background: var(--egal); color: #fff; font: 2.3rem/1 var(--mono); box-shadow: 0 6px 0 var(--egal-fonce); }
.rubrique h1 { margin: 0; font: 800 clamp(1.8rem, 4vw, 2.6rem)/1.1 var(--titre); }
.rubrique p { margin: .3rem 0 0; color: var(--gris); }

/* --- article */
.fiche { max-width: 780px; margin: 0 auto; }
.fiche__ecran { background: var(--lcd-clair); border-radius: 18px; padding: 1.3rem 1.4rem; box-shadow: inset 0 3px 10px rgba(44, 58, 42, .16); border: 8px solid #fbf8f1; }
.saisie { font: .92rem/1.4 var(--mono); color: var(--lcd-encre); margin-bottom: .5rem; }
.saisie a { text-decoration: none; }
.saisie a:hover { text-decoration: underline; }
.saisie span { margin: 0 .3rem; color: var(--egal-fonce); }
.fiche h1 { margin: 0; font: 800 clamp(1.6rem, 3.4vw, 2.3rem)/1.15 var(--titre); color: var(--lcd-encre); }
.fiche__m { margin: .7rem 0 0; font: .88rem/1.4 var(--mono); color: var(--gris); }
.fiche__img { margin: 1.5rem 0 0; }
.fiche__img img { border-radius: 14px; width: 100%; }
.fiche__texte { background: #fffdf8; border-radius: 16px; padding: 1.6rem clamp(1rem, 4vw, 2.4rem); margin-top: 1.5rem; box-shadow: 0 4px 0 var(--ombre); overflow-wrap: anywhere; }
.fiche__texte h2 { font: 800 1.45rem/1.25 var(--titre); margin: 2rem 0 .7rem; padding-left: .8rem; border-left: 5px solid var(--egal); }
.fiche__texte h3 { font: 700 1.18rem/1.3 var(--titre); margin: 1.6rem 0 .5rem; }
.fiche__texte a { color: #1d5a8a; text-underline-offset: 2px; }
.fiche__texte table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .95rem; display: block; overflow-x: auto; }
.fiche__texte th, .fiche__texte td { border: 1px solid var(--filet); padding: .5rem .65rem; text-align: left; vertical-align: top; }
.fiche__texte th { background: var(--lcd); color: var(--lcd-encre); font-family: var(--titre); }
.fiche__texte tr:nth-child(even) td { background: #faf7f0; }
.fiche__texte img { border-radius: 10px; margin: 1rem auto; }
.fiche__texte blockquote { margin: 1.2rem 0; padding: .8rem 1.1rem; background: var(--lcd-clair); border-radius: 10px; }
.fiche__texte iframe { max-width: 100%; }
.fiche__texte ul, .fiche__texte ol { padding-left: 1.3rem; }
.fiche--page .fiche__texte { margin-top: 1.2rem; }
.meme-touche { max-width: 1180px; margin: 3rem auto 0; }

/* --- la plaque du dos */
.dos { background: var(--boitier-fonce); border-top: 1px solid var(--filet); position: relative; }
.dos::before { content: ''; display: block; height: 14px; background: repeating-linear-gradient(90deg, transparent 0 18px, var(--ombre) 18px 54px, transparent 54px 72px); opacity: .55; }
.dos__in { max-width: 1180px; margin: 0 auto; padding: 2rem 1rem 2.4rem; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.dos__in > * { min-width: 0; }
.dos__plaque { background: #f7f3ea; border-radius: 12px; padding: 1.1rem 1.2rem; position: relative; box-shadow: inset 0 0 0 1px var(--filet); }
.dos__plaque::before, .dos__plaque::after { content: ''; position: absolute; top: .6rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--ombre); box-shadow: inset 0 0 0 2px #b8af9a; }
.dos__plaque::before { left: .6rem; }
.dos__plaque::after { right: .6rem; }
.dos__nom { margin: 0 0 .4rem; font: 800 1.2rem/1.2 var(--titre); }
.dos__mot { margin: 0; color: var(--gris); font-size: .92rem; line-height: 1.5; }
.dos__label { margin: 0 0 .5rem; font: .82rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--gris); }
.dos ul { list-style: none; margin: 0; padding: 0; }
.dos li { margin: .3rem 0; }
.dos a { text-decoration: none; font-size: .95rem; }
.dos a:hover { text-decoration: underline; }

@media (max-width: 1000px) {
  .clavier__grille { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .affichage__calcul { grid-template-columns: 1fr; }
  .affichage__img { order: -1; }
  .clavier__grille { grid-template-columns: 1fr 1fr; }
  .memoires__liste, .cartes, .lignes { grid-template-columns: 1fr; }
  .dos__in { grid-template-columns: 1fr; gap: 1.2rem; }
  .affichage__ecran { padding: 1rem; border-width: 6px; }
}
@media (max-width: 420px) {
  .clavier__grille { grid-template-columns: 1fr; }
  .touche { padding: .45rem .7rem; font-size: .9rem; }
}