@page { size: A4; margin: 0; }
* { box-sizing: border-box; }
:root { --n:#1d3b53; --b:#2aa7dc; --g:#7ab648; --y:#f6c945; --r:#e85d5d; --l:#eef7fc; --lg:#eef5e6; --gr:#6b7c89; --pk:#e8806f; }
body { margin:0; font-family: 'Nunito', 'Segoe UI', Arial, sans-serif; color: var(--n); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ar { font-family: 'Noto Naskh Arabic', 'Times New Roman', serif; unicode-bidi: isolate; }
.page { width:210mm; height:297mm; padding: 9mm 13mm 8mm; position:relative; overflow:hidden; page-break-after: always; display:flex; flex-direction:column; }
.page::before { content:''; position:absolute; top:0; left:0; right:0; height:3mm; background: var(--b); }
header { display:flex; justify-content:space-between; align-items:flex-start; }
.logo { height: 19mm; margin-left:-2mm; }
.hr { text-align:right; padding-top:3mm; }
.carnet { color: var(--b); font-weight:800; font-size: 11pt; }
.tag3 { color: var(--gr); font-size: 8.5pt; }
.tt { margin-top: 1mm; }
.fnum { color: var(--g); font-weight: 800; font-size: 9.5pt; display:flex; gap:8px; align-items:center; }
.kind { font-size: 7.5pt; padding: 2px 8px; border-radius: 10px; color:#fff; letter-spacing:.5px; }
.ka { background: var(--b); } .kb { background: var(--g); }
h1 { margin: 1mm 0 0; font-size: 22pt; line-height:1.1; }
.sub { color: var(--gr); font-size: 9.5pt; margin-top: 1mm; }
main { flex:1; display:flex; flex-direction:column; gap: 3.2mm; margin-top: 3mm; }
footer { display:flex; justify-content:space-between; font-size: 7.5pt; color: var(--gr); border-top: 1px solid #dde6ec; padding-top: 2mm; }

.but { display:flex; gap:8px; align-items:center; background:#fff8e1; border:1.5px solid var(--y); border-radius: 10px; padding: 2.2mm 3.5mm; font-size: 9.5pt; }
.bi { font-size: 15pt; }

.cards { display:grid; gap: 2.4mm; }
.c2 { grid-template-columns: repeat(2,1fr); } .c3 { grid-template-columns: repeat(3,1fr); } .c4 { grid-template-columns: repeat(4,1fr); } .c5 { grid-template-columns: repeat(5,1fr); } .c6 { grid-template-columns: repeat(6,1fr); }
.card { background: var(--l); border-radius: 10px; padding: 2mm 2.4mm; display:flex; flex-direction:column; align-items:center; text-align:center; gap: 1mm; border: 1px solid #d6eaf6; }
.cimg { height: 15mm; display:flex; align-items:center; justify-content:center; }
.cimg svg { height: 100%; width:auto; max-width: 26mm; }
.cards.big .cimg { height: 19mm; }
.card.sm .cimg { height: 11mm; }
.cv { font-size: 19pt; line-height: 1.35; display:block; }
.cfr { font-weight: 700; font-size: 8.6pt; line-height:1.2; }
.ctr { color: var(--gr); font-size: 8pt; font-style: italic; }
.tag { font-size: 6.5pt; padding: 0 5px; border-radius: 6px; color:#fff; font-weight: 700; vertical-align: 1px; }
.tg { background: var(--b); } .tf { background: var(--pk); }
.kg { color: var(--b); } .kf { color: var(--pk); } .kr { color: var(--r); } .kv { color: #3f9b3a; }

.por { display:inline-block; border-radius:50%; border: 2.5px solid #fff; box-shadow: 0 0 0 1.5px var(--b); background-repeat:no-repeat; flex: none; }

.dlg { background: #fbfdff; border: 1.5px dashed #b9dcef; border-radius: 12px; padding: 2.5mm 3.5mm; display:flex; flex-direction:column; gap: 1.6mm; }
.h3 { font-weight: 800; color: var(--b); font-size: 9.5pt; text-transform: uppercase; letter-spacing: .3px; }
.bl { display:flex; gap: 3mm; align-items:center; }
.bl.l { flex-direction: row-reverse; }
.bb { background:#fff; border: 1.5px solid #cfe3ef; border-radius: 14px; padding: 1.2mm 4mm; position:relative; max-width: 80%; }
.bl.r .bb { border-top-left-radius: 3px; } .bl.l .bb { border-top-right-radius: 3px; text-align:right; }
.bn { font-size: 7pt; font-weight: 800; color: var(--g); text-transform: uppercase; }
.ba { font-size: 17pt; display:block; line-height:1.45; }
.btr { font-size: 8pt; color: var(--gr); font-style: italic; }
.bfr { font-size: 8pt; }

.box { border-radius: 12px; padding: 2.6mm 4mm; font-size: 9.3pt; line-height: 1.45; }
.box.g { background: var(--lg); } .box.b { background: var(--l); }
.bt { font-weight: 800; color: #4c8a28; font-size: 9.5pt; margin-bottom: .5mm; text-transform: uppercase; }
.box.b .bt { color: var(--b); }
.truc { display:flex; gap: 3mm; align-items:center; border-left: 5px solid var(--y); background: #fffbea; padding: 2mm 3.5mm; border-radius: 0 10px 10px 0; font-size: 9.3pt; line-height:1.45; }
.tb { background: var(--y); color: var(--n); font-weight: 900; font-size: 7.5pt; padding: 3px 7px; border-radius: 6px; white-space: nowrap; }
.truc .ar { font-size: 15pt; }
.souv { display:flex; gap: 3mm; align-items:center; border: 1.5px solid #c7b8e8; background: #f6f2fd; padding: 1.8mm 3.5mm; border-radius: 10px; font-size: 9pt; }
.sb { background: #9b7fd1; color:#fff; font-weight: 800; font-size: 7pt; padding: 3px 7px; border-radius: 6px; white-space: nowrap; }
.souv .ar { font-size: 14pt; }

.ex { border: 1.5px solid #d4e6f1; border-radius: 12px; padding: 2.2mm 3.5mm 2.6mm; break-inside: avoid; }
.exh { display:flex; align-items:center; gap: 2.5mm; margin-bottom: 1.8mm; font-size: 9.3pt; }
.exn { background: var(--g); color:#fff; font-weight: 900; width: 6mm; height: 6mm; border-radius: 50%; display:flex; align-items:center; justify-content:center; font-size: 9pt; flex:none; }
.ext { font-weight: 800; color: var(--g); white-space: nowrap; font-size: 8.5pt; text-transform: uppercase; }
.exc { font-weight: 600; }
.exb { font-size: 9.3pt; }
.exb .ar { font-size: 16pt; }

.rel { display:grid; grid-template-columns: 1fr 22mm 1fr; row-gap: 1.6mm; align-items:center; }
.rl, .rr { display:flex; align-items:center; gap: 2mm; min-height: 11mm; }
.rl { justify-content: flex-end; text-align:right; } .rr { justify-content:flex-start; }
.dot { width: 3mm; height: 3mm; border-radius:50%; background: var(--n); flex:none; }
.rel svg { height: 11mm; width:auto; }

.chx { display:inline-flex; gap: 3mm; }
.opt { border: 1.3px dashed #9fb6c4; border-radius: 16px; padding: 0 3mm; background:#fff; }

.trace { display:flex; gap: 4mm; align-items:center; position:relative; padding-bottom: 1mm; direction: rtl; }
.trace .ar { font-size: 24pt !important; line-height: 1.5; }
.tmodel .ar { color: var(--n); }
.tghost .ar { color: transparent; -webkit-text-stroke: 1px #9fb6c4; }
.tline { flex: 1; border-bottom: 1.6px dotted #9fb6c4; height: 9mm; min-width: 25mm; }
.wline { display:inline-block; border-bottom: 1.6px dotted #8aa1b0; height: 8mm; }
.trou { display:inline-block; border-bottom: 1.6px dotted #8aa1b0; height: 7mm; vertical-align: -1mm; }
.banque { display:flex; gap: 4mm; flex-wrap: wrap; align-items:center; background: #f4f8fb; border-radius: 8px; padding: .5mm 3mm; font-size: 8.5pt; color: var(--gr); }
.banque .ar { font-size: 15pt; color: var(--n); }

.auto { display:flex; gap: 5mm; align-items:center; justify-content:center; font-size: 9pt; padding: 1.5mm; border-top: 1px dashed #c9d8e2; margin-top: auto; }
.ah { color: var(--gr); }
.ai { display:flex; gap: 1.5mm; align-items:center; font-weight: 700; }
.star { font-size: 16pt; color: transparent; -webkit-text-stroke: 1.2px var(--y); }

.row { display:flex; gap: 3mm; } .row > * { flex:1; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap: 3mm; }
.grid3 { display:grid; grid-template-columns: repeat(3,1fr); gap: 2.5mm; }
.center { text-align:center; } .small { font-size: 8pt; color: var(--gr); }
.pic { border-radius: 12px; width:100%; object-fit: cover; display:block; }
.ic { display:inline-flex; vertical-align: middle; } .ic svg { height: 10mm; width:auto; }
.frame { border: 2px dashed #b9cbd6; border-radius: 12px; }
.ques { display:flex; align-items:center; gap: 3mm; padding: 1mm 0; }
.ques svg { height: 12mm; width:auto; }
.tree { display:flex; flex-direction:column; gap: 2mm; align-items:center; }
.gen { display:flex; justify-content:center; gap: 3mm; }
.mem { display:flex; flex-direction:column; align-items:center; width: 27mm; text-align:center; }
.mem svg { height: 15mm; width:auto; }
.mem .ar { font-size: 16pt; line-height: 1.3; }
.mem .f { font-size: 7.5pt; font-weight: 700; line-height: 1.1; }
.mem .t { font-size: 7pt; color: var(--gr); font-style: italic; }
.side { border-radius: 12px; padding: 1.5mm 2mm; display:flex; gap: 2mm; }
.sp { background: #e3f2fb; border: 1.5px solid #9fd2ee; } .sm2 { background: #fdecea; border: 1.5px solid #f3b8ae; }
.sideh { font-size: 7pt; font-weight: 800; text-transform: uppercase; text-align:center; }
.slot { border-bottom: 1.6px dotted #8aa1b0; width: 24mm; height: 8mm; }
.cover { justify-content: center; align-items:center; text-align:center; gap: 6mm; }
table.t { width:100%; border-collapse: collapse; font-size: 9pt; }
table.t td, table.t th { border: 1px solid #d4e3ec; padding: 1.2mm 2mm; vertical-align: middle; }
table.t th { background: var(--l); color: var(--b); font-size: 8pt; text-transform: uppercase; }
table.t .ar { font-size: 15pt; }
.cor { font-size: 8.6pt; line-height: 1.4; }
.cor h4 { margin: 2mm 0 .5mm; color: var(--b); font-size: 9pt; }
.cor .ar { font-size: 13pt; }
.cor ol { margin: 0; padding-left: 5mm; }

/* ── V3.1 ajustements */
.logo { height: 15mm; }
.tt { margin-top: 2.5mm; }
.cv { line-height: 1.65; margin-bottom: -.5mm; }
.kA .cimg { height: 19mm; }
.kA .cards.big .cimg { height: 26mm; }
.kA .card.sm .cimg { height: 15mm; }
.kA .cv { font-size: 22pt; }
.kA .card { padding: 2.6mm 2.4mm; }
.kA main { gap: 4mm; }
.posb { display:flex; justify-content:center; }
.posb svg { height: 100%; width: auto; }
.rl, .rr { min-height: 9.5mm; }
.rel svg { height: 9.5mm; }
.rel { row-gap: 1mm; }
.trace .ar { font-size: 22pt !important; line-height: 1.3; }
.ex { padding: 1.8mm 3.5mm 2.2mm; }
.exh { margin-bottom: 1.2mm; }
.kB main { gap: 2.6mm; }
.mem { width: 31mm; }
.mem svg { height: 20mm; }
.mem .ar { font-size: 19pt; }
.cor ul { direction: ltr; }
.cor li .ar { unicode-bidi: isolate; }
.side .mem { width: 25.5mm; }
.side .mem .f { font-size: 7pt; }
.kA .card.sm .cimg { height: 12mm; }
.kA .card.sm .cv { font-size: 19pt; }
.trace { margin-bottom: 1.5mm; flex-wrap: nowrap; }
.trace .ar { line-height: 1.7; }
.kA .cards.big .cimg svg { max-width: 48mm; }
.kA .cards.big .cimg { height: 24mm !important; }
.famimg { height: 100%; width: auto; max-width: 100%; border-radius: 10px; display: inline-block; box-shadow: 0 0 0 1.5px #dbe7ee; object-fit: cover; }
.mem .famimg { height: 21mm; width: 16.8mm; }
.moiframe { aspect-ratio: .8; border: 2px dashed #9fb6c4; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; color: #9fb6c4; font-size: 20pt; font-weight: 800; background: #fff; }
.cimg .famimg { height: 100%; width: auto; }
.cimg > span > .famimg + .famimg, .rr .famimg + .famimg { margin-left: 1mm; }
.rr .famimg { height: 10mm; width: 8mm; }
.kA .dlg { gap: 1mm; padding: 2mm 3.5mm; }
.kA .dlg .ba { font-size: 16pt; line-height: 1.35; }
.famimg.hyg { box-shadow: none; border-radius: 8px; }
.rel .famimg { height: 10mm; width: auto; }
.cimg .famimg.hyg { height: 100%; }
.hue-savon { filter: hue-rotate(105deg) saturate(1.3); }
.hue-shampoing { filter: hue-rotate(295deg) saturate(1.3); }
/* Noto Naskh : cartes un peu plus compactes */
.kA .card.sm .cv { font-size: 18pt; line-height: 1.4; }
.kA .card.sm { padding: 2mm 2.2mm; gap: .6mm; }
.kA .card.sm .cimg { height: 11mm; }
.truc { padding: 1.6mm 3.5mm; line-height: 1.35; }
.truc .ar { font-size: 14pt; }
.kB .ex { padding: 1.5mm 3.5mm 1.8mm; }
.kB main { gap: 2.2mm; }