/* pikari.fr (PIKARI) : le carnet de comptes partagé (23 octobre 2026) */
:root {
  --creme: #fbf7ec;
  --feuille: #fffdf7;
  --encre: #1d2433;
  --gris: #5f6573;
  --regle: #dfe6f0;
  --marge: #d4442e;
  --filet: #e6dfcc;
  --banque: #1e3a8a; --cagnottes: #be185d; --argent: #047857; --travail: #b45309; --entreprise: #475569;
  --titre: 'Arvo', Georgia, serif;
  --texte: 'Open Sans', system-ui, sans-serif;
  --mono: 'Inconsolata', ui-monospace, monospace;
  --large: 1200px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--creme); color: var(--encre); font: 400 17px/1.7 var(--texte); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--banque); text-underline-offset: 3px; }
.saut { position: absolute; left: -999px; }
.saut:focus { left: 12px; top: 12px; z-index: 9; background: var(--encre); color: #fff; padding: 8px 12px; }
.picto { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* couleurs d'onglet, par rubrique */
.onglet--banque, .fiche--banque, .intercalaire--banque, .feuille--banque, .titre-r--banque { --c: var(--banque); }
.onglet--cagnottes, .fiche--cagnottes, .intercalaire--cagnottes, .feuille--cagnottes, .titre-r--cagnottes { --c: var(--cagnottes); }
.onglet--argent, .fiche--argent, .intercalaire--argent, .feuille--argent, .titre-r--argent { --c: var(--argent); }
.onglet--travail, .fiche--travail, .intercalaire--travail, .feuille--travail, .titre-r--travail { --c: var(--travail); }
.onglet--entreprise, .fiche--entreprise, .intercalaire--entreprise, .feuille--entreprise, .titre-r--entreprise { --c: var(--entreprise); }

/* ---- la couverture (en-tête) : le nom, puis les onglets du carnet ---- */
.couverture { background: var(--feuille); border-bottom: 2px solid var(--encre); }
.couverture__in { max-width: var(--large); margin: 0 auto; padding: 0 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 28px; flex-wrap: wrap; }
.logo { padding: 26px 0 18px; font: 700 48px/1 var(--titre); letter-spacing: .12em; color: var(--encre); text-decoration: none; }
.onglets { display: flex; gap: 8px; flex-wrap: wrap; }
.onglet .picto { width: 20px; height: 20px; }
.onglet { display: inline-flex; align-items: center; gap: 9px; padding: 14px 22px 13px; font: 600 16.5px/1 var(--texte); color: var(--encre); text-decoration: none;
  background: color-mix(in srgb, var(--c) 9%, white); border: 1px solid color-mix(in srgb, var(--c) 30%, white); border-bottom: 0; border-radius: 8px 8px 0 0; }
.onglet .picto { color: var(--c); }
.onglet:hover, .onglet[aria-current] { background: var(--c); color: #fff; border-color: var(--c); }
.onglet:hover .picto, .onglet[aria-current] .picto { color: #fff; }

/* ---- accueil ---- */
.page-de-garde { max-width: var(--large); margin: 0 auto; padding: 34px 24px 6px; }
.page-de-garde h1 { margin: 0; max-width: 40ch; font: 700 clamp(24px, 2.8vw, 32px)/1.3 var(--titre); }
.double { max-width: var(--large); margin: 0 auto; padding: 26px 24px 0; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.double .bloc { padding: 0; }
.bloc { max-width: var(--large); margin: 0 auto; padding: 30px 24px 0; }
.bloc__t { margin: 0 0 16px; font: 700 24px/1.2 var(--titre); padding-bottom: 8px; border-bottom: 2px solid var(--encre); }

/* les fiches (cartes d'article, toujours illustrées) */
.fiches { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.fiches--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fiches--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fiches > * { min-width: 0; }
.fiche { display: flex; flex-direction: column; height: 100%; background: var(--feuille); border: 1px solid var(--filet); border-left: 4px solid var(--c); color: var(--encre); text-decoration: none; }
.fiche:hover .fiche__t { color: var(--c); }
.fiche__img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--filet); }
.fiche__img img { width: 100%; height: 100%; object-fit: cover; }
.fiche__c { padding: 13px 16px 15px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.fiche__r { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--c); }
.fiche__t { font: 700 17.5px/1.35 var(--titre); overflow-wrap: anywhere; }
.fiche__d { margin-top: auto; font: 400 14px/1.3 var(--mono); color: var(--gris); }

/* le relevé des libellés */
.releve { position: sticky; top: 16px; background: var(--feuille); border: 1px solid var(--filet); padding: 18px 18px 16px 30px;
  background-image: linear-gradient(90deg, transparent 18px, var(--marge) 18px 20px, transparent 20px), repeating-linear-gradient(180deg, transparent 0 31px, var(--regle) 31px 32px); }
.releve__t { margin: 0 0 4px; font: 700 21px/1.25 var(--titre); }
.releve__s { margin: 0 0 12px; color: var(--gris); font-size: 14.5px; line-height: 1.45; }
.releve__table { width: 100%; border-collapse: collapse; font-size: 15px; }
.releve__table th { text-align: left; font: 600 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--gris); padding: 6px 0; border-bottom: 1px solid var(--encre); }
.releve__table td { padding: 7px 0; border-bottom: 1px dashed var(--filet); vertical-align: middle; }
.releve__table td:last-child { text-align: right; }
.releve__lib { font: 600 15.5px/1.3 var(--mono); letter-spacing: .02em; }
.releve__table a { font-weight: 600; }
.releve__tous { display: inline-block; margin-top: 12px; font-weight: 600; font-size: 15px; }

/* les intercalaires (un par rubrique) */
.intercalaire { max-width: var(--large); margin: 40px auto 0; padding: 0 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 22px; align-items: stretch; }
.intercalaire__fiche { background: color-mix(in srgb, var(--c) 8%, white); border-top: 6px solid var(--c); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.intercalaire__fiche h2 { margin: 0; font: 700 26px/1.15 var(--titre); }
.intercalaire__fiche h2 a { color: var(--encre); text-decoration: none; }
.intercalaire__fiche p { margin: 0; color: var(--gris); font-size: 15px; line-height: 1.5; }
.intercalaire__tous { margin-top: auto; font-weight: 600; font-size: 15px; color: var(--c); }
.intercalaire__picto { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--c, var(--encre)); color: #fff; }
.intercalaire__picto .picto { width: 24px; height: 24px; }

/* listes serrées (page auteur) */
.lignes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.ligne { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; background: var(--feuille); border: 1px solid var(--filet); color: var(--encre); text-decoration: none; }
.ligne__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--filet); }
.ligne__img img { width: 100%; height: 100%; object-fit: cover; }
.ligne__t { display: block; font: 700 15.5px/1.35 var(--titre); overflow-wrap: anywhere; }
.ligne__d { display: block; margin-top: 4px; font: 400 13.5px/1.3 var(--mono); color: var(--gris); }

/* ---- la feuille (article) ---- */
.feuille { max-width: 800px; margin: 30px auto 0; padding: 30px 34px 10px 56px; background: var(--feuille); border: 1px solid var(--filet);
  background-image: linear-gradient(90deg, transparent 32px, var(--marge) 32px 34px, transparent 34px); }
.feuille__onglet { margin: 0; }
.feuille__onglet a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; background: var(--c); color: #fff; font: 600 14px/1 var(--texte); text-decoration: none; border-radius: 6px; }
.feuille__tete h1 { margin: 16px 0 12px; font: 700 clamp(28px, 3.8vw, 40px)/1.2 var(--titre); overflow-wrap: anywhere; }
.feuille__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 22px; padding: 8px 0; border-top: 1px dashed var(--filet); border-bottom: 1px dashed var(--filet); font: 400 15px/1.3 var(--mono); color: var(--gris); }
.feuille__img { margin: 0 0 28px; }
.feuille--page { margin-bottom: 10px; }

/* ---- le texte ---- */
.texte { min-width: 0; overflow-wrap: break-word; }
.texte h2 { margin: 36px 0 12px; font: 700 25px/1.3 var(--titre); }
.texte h3 { margin: 26px 0 8px; font: 700 20px/1.35 var(--titre); }
.texte h4 { margin: 20px 0 6px; font: 600 17.5px/1.35 var(--texte); }
.texte p, .texte ul, .texte ol { margin: 0 0 18px; }
.texte li { margin: 4px 0; }
.texte img { margin: 20px auto; }
.texte figure { margin: 24px 0; }
.texte figcaption { font-size: 14px; color: var(--gris); }
.texte blockquote { margin: 24px 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--c, var(--encre)); color: var(--gris); }
.texte table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 15px; background: #fff; display: block; overflow-x: auto; }
.texte th, .texte td { padding: 9px 12px; border: 1px solid var(--filet); text-align: left; vertical-align: top; }
.texte th { background: #f3eedf; font-weight: 600; }
.texte iframe { max-width: 100%; }

/* le formulaire de contact */
.formulaire { margin-top: 26px; padding: 22px; background: #fff; border: 1px solid var(--encre); }
.formulaire label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.formulaire input, .formulaire textarea { width: 100%; padding: 10px 12px; font: inherit; border: 1px solid #bdb59f; background: #fff; }
.formulaire button { padding: 12px 22px; font: 700 16px/1 var(--texte); color: #fff; background: var(--banque); border: 0; cursor: pointer; }
.formulaire__ok { padding: 10px 14px; background: #e6f4ea; border-left: 4px solid var(--argent); }
.formulaire__piege { position: absolute; left: -9999px; }

/* ---- titre de rubrique ---- */
.titre-r { max-width: var(--large); margin: 0 auto; padding: 36px 24px 0; display: flex; gap: 18px; align-items: center; }
.titre-r .intercalaire__picto { width: 70px; height: 70px; flex: 0 0 auto; }
.titre-r .intercalaire__picto .picto { width: 34px; height: 34px; }
.titre-r h1 { margin: 0 0 6px; font: 700 clamp(32px, 4.4vw, 44px)/1.1 var(--titre); }
.titre-r p { margin: 0; max-width: 66ch; color: var(--gris); }

/* ---- le talon (pied de page) ---- */
.talon { margin-top: 70px; background: var(--feuille); border-top: 2px solid var(--encre); }
.talon__in { max-width: var(--large); margin: 0 auto; padding: 34px 24px 26px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 30px;
  background-image: repeating-linear-gradient(90deg, var(--filet) 0 8px, transparent 8px 14px); background-size: 100% 2px; background-repeat: no-repeat; }
.talon__logo { margin: 0 0 8px; font: 700 26px/1 var(--titre); letter-spacing: .14em; }
.talon__nom p:last-child { margin: 0; color: var(--gris); font-size: 15px; line-height: 1.5; }
.talon__rubriques { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.talon__rubriques a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--encre); text-decoration: none; font-weight: 600; }
.talon__rubriques .picto { color: var(--c); }
.talon__pages { display: flex; flex-direction: column; gap: 7px; font-size: 15px; }
.talon__pages a { color: var(--encre); }
.talon__avis { grid-column: 1 / -1; margin: 0; padding-top: 14px; border-top: 1px solid var(--filet); font: 400 14px/1.5 var(--mono); color: var(--gris); }

/* ---- écrans moyens et petits ---- */
@media (max-width: 1000px) {
  .double { grid-template-columns: minmax(0, 1fr); }
  .releve { position: static; }
  .intercalaire { grid-template-columns: minmax(0, 1fr); }
  .fiches--trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .talon__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .talon__nom { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .couverture__in { padding: 0 16px; }
  .logo { padding: 18px 0 12px; font-size: 34px; }
  .onglets { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding-bottom: 8px; }
  .onglet { border-radius: 6px; border-bottom: 1px solid color-mix(in srgb, var(--c) 30%, white); justify-content: center; padding: 9px 6px; font-size: 14px; }
  .page-de-garde { padding: 24px 16px 0; }
  .double, .bloc { padding-left: 16px; padding-right: 16px; }
  .intercalaire { padding: 0 16px; margin-top: 32px; }
  .fiches--deux, .fiches--trois, .lignes { grid-template-columns: minmax(0, 1fr); }
  .feuille { margin: 0; padding: 22px 16px 6px 30px; border-left: 0; border-right: 0; background-image: linear-gradient(90deg, transparent 14px, var(--marge) 14px 16px, transparent 16px); }
  .titre-r { padding: 26px 16px 0; align-items: flex-start; }
  .titre-r .intercalaire__picto { width: 52px; height: 52px; }
  .talon__in { grid-template-columns: minmax(0, 1fr); padding: 28px 16px 22px; }
}