/* HandiFormaBanques : le chéquier (15 octobre 2026), toujours clair */
:root {
  --papier: #f7faf8; --blanc: #ffffff; --eau: #e6f3ef; --eau-2: #cfe6df; --encre: #1f4e8c; --encre-pale: #e3ecf7;
  --or: #b8973e; --texte: #23302d; --gris: #64716d; --filet: #dbe5e1;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--papier); color: var(--texte); font: 400 1.04rem/1.72 'Sofia Sans', system-ui, sans-serif; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--encre); text-underline-offset: .2em; }
h1, h2, h3, h4 { font-family: Bellefair, Georgia, serif; font-weight: 400; line-height: 1.15; color: var(--encre); }
.endos { position: absolute; left: -999px; }
.endos:focus { left: 1rem; top: 1rem; background: var(--eau-2); padding: .5rem 1rem; z-index: 9; }

/* l'agence */
.agence { background: var(--blanc); border-bottom: 1px solid var(--filet); }
.agence__in { max-width: 1120px; margin: 0 auto; padding: .9rem 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.4rem; }
.agence__nom { font: 400 1.7rem/1 Bellefair, serif; color: var(--encre); text-decoration: none; }
.agence__nom span { color: var(--or); }
.agence__nav { display: flex; flex-wrap: wrap; gap: .2rem .9rem; }
.agence__nav a { color: var(--texte); text-decoration: none; font-size: .88rem; font-weight: 600; padding: .35rem 0; border-bottom: 2px solid transparent; }
.agence__nav a:hover, .agence__nav a[aria-current] { color: var(--encre); border-color: var(--or); }

main { max-width: 1120px; margin: 0 auto; padding: 0 1rem 3rem; }

/* le filigrane */
.filigrane { padding: 2.8rem 0 1.4rem; text-align: center; }
.filigrane h1 { margin: 0 auto .8rem; max-width: 820px; font-size: clamp(2rem, 4.6vw, 3.1rem); }
.filigrane p { margin: 0 auto; max-width: 680px; color: var(--gris); }
.filigrane--rubrique { padding-bottom: 1rem; }

/* le chéquier */
.chequier { display: grid; gap: 1rem; margin: 1rem 0 3rem; }
.cheque { position: relative; background: var(--eau); border: 1px solid var(--eau-2); border-radius: 6px; padding: 1rem 1.4rem .8rem 2.6rem;
  background-image: repeating-radial-gradient(circle at 80% 50%, rgba(31,78,140,.05) 0 2px, transparent 2px 8px), repeating-linear-gradient(45deg, rgba(255,255,255,.4) 0 1px, transparent 1px 7px); }
.cheque::before { content: ""; position: absolute; left: 1.2rem; top: 0; bottom: 0; border-left: 2px dashed var(--eau-2); }
.cheque__haut { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0 0 .6rem; font-size: .8rem; color: var(--gris); }
.cheque__haut a { font: 400 1.5rem/1 Bellefair, serif; color: var(--encre); text-decoration: none; }
.cheque__lignes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1.4rem; }
.cheque__lignes a { display: grid; grid-template-columns: 48px 1fr; gap: .7rem; align-items: center; text-decoration: none; color: var(--texte); padding: .35rem 0; border-bottom: 1px solid rgba(31,78,140,.35); font-style: italic; }
.cheque__lignes a > span:last-child { overflow-wrap: anywhere; line-height: 1.3; }
.cheque__lignes a:hover > span:last-child { color: var(--encre); text-decoration: underline; }
.cheque__img { width: 48px; height: 48px; overflow: hidden; border-radius: 4px; background: var(--filet); }
.cheque__img img { width: 100%; height: 100%; object-fit: cover; }
.cheque__bas { display: flex; justify-content: space-between; align-items: flex-end; margin: .7rem 0 0; font-size: .75rem; color: var(--gris); }
.cheque__signature { font: 400 1.3rem/1 Bellefair, serif; color: var(--encre); border-bottom: 1px solid var(--encre); padding: 0 1.4rem .2rem; transform: rotate(-3deg); }

/* le conseiller (listes) */
.conseiller { margin-top: 2.6rem; }
.conseiller h2 { font-size: 2rem; margin: 0 0 1rem; }
.releve-lignes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.releve-lignes > * { min-width: 0; }
.releve-ligne { display: grid; gap: .35rem; text-decoration: none; color: var(--texte); background: var(--blanc); border: 1px solid var(--filet); border-radius: 8px; padding: .6rem .6rem 1rem; }
.releve-ligne:hover { border-color: var(--encre); }
.releve-ligne__img { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; background: var(--filet); }
.releve-ligne__img img { width: 100%; height: 100%; object-fit: cover; }
.releve-ligne__r { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--or); }
.releve-ligne__t { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.releve-ligne__m { font-size: .82rem; color: var(--gris); }

/* le bordereau (article) */
.bordereau-remise { max-width: 800px; margin: 0 auto; }
.bordereau-remise__tete { padding: 2.4rem 0 1rem; }
.bordereau-remise__r { display: inline-block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--encre); background: var(--encre-pale); padding: .35rem .7rem; border-radius: 4px; text-decoration: none; margin-bottom: .8rem; }
.bordereau-remise__tete h1 { margin: 0 0 .6rem; font-size: clamp(1.9rem, 4.2vw, 2.7rem); overflow-wrap: anywhere; }
.bordereau-remise__m { margin: 0; color: var(--gris); font-size: .9rem; }
.bordereau-remise__img { margin: .6rem 0 1.6rem; }
.bordereau-remise__img img { border-radius: 8px; }
.bordereau-remise__texte { background: var(--blanc); border: 1px solid var(--filet); border-radius: 8px; padding: 1.6rem clamp(1rem, 4vw, 2.4rem); overflow-wrap: anywhere; }
.bordereau-remise__texte h2 { font-size: 1.8rem; margin: 2rem 0 .7rem; }
.bordereau-remise__texte h3 { font-size: 1.4rem; margin: 1.5rem 0 .5rem; }
.bordereau-remise__texte table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .93rem; display: block; overflow-x: auto; }
.bordereau-remise__texte th, .bordereau-remise__texte td { border: 1px solid var(--filet); padding: .55rem .7rem; text-align: left; vertical-align: top; }
.bordereau-remise__texte th { background: var(--eau); }
.bordereau-remise__texte blockquote { margin: 1.2rem 0; padding: .9rem 1.2rem; background: var(--eau); border-left: 4px solid var(--encre); }

/* le talon (pied) */
.talon { margin-top: 3.5rem; padding: 2.4rem 1rem 2.2rem; }
.talon__in { max-width: 520px; margin: 0 auto; background: var(--eau); border: 1px solid var(--eau-2); border-left: 2px dashed var(--encre); border-radius: 4px; padding: 1.4rem 1.4rem 1.2rem; text-align: left; }
.talon__nom { margin: 0 0 .4rem; font: 400 1.5rem/1 Bellefair, serif; color: var(--encre); }
.talon__mot { margin: 0 0 .9rem; font-style: italic; color: var(--gris); }
.talon__rubriques { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem 1rem; font-size: .9rem; }
.talon__rubriques a { color: var(--texte); text-decoration: none; border-bottom: 1px dotted var(--gris); }
.talon__pages a { color: var(--encre); font-size: .88rem; }

@media (max-width: 680px) { .cheque__lignes { grid-template-columns: 1fr; } .cheque { padding-left: 2rem; } }