/*
  Kit de communication SmartUniversityCongo — plaquettes A4 imprimables (Ctrl P → PDF).
  Identité des applications : bleu saphir, boutons noirs, or du « Congo », papier quadrillé bleu
  pâle, et quelques annotations manuscrites à l'encre bleue (Kalam). Chaque .page fait exactement
  une feuille A4 ; à l'écran, les feuilles sont posées sur un fond gris.
*/
:root {
  --papier: #e9edf3;
  --feuille: #ffffff;
  --encre: #101828;
  --encre-douce: #344054;
  --ardoise: #5d6470;
  --trait: #e4e7ec;
  --bleu: #1b55b0;
  --bleu-fonce: #183a73;
  --bleu-nuit: #0f2449;
  --bleu-vif: #2f7de1;
  --bleu-pale: #eff5ff;
  --quadrillage: #d6e3f8;
  --or: #f2c94c;
  --or-fonce: #e6b400;
  --or-pale: #fdf3d7;
  --rouge: #c23a3a;
  --rouge-pale: #fdecec;

  --titre: 'Scoutie Sans', 'Segoe UI', system-ui, sans-serif;
  --texte: 'Scoutie Sans', 'Segoe UI', system-ui, sans-serif;
  --chiffres: 'IBM Plex Mono', ui-monospace, monospace;
  --main: 'Kalam', 'Comic Sans MS', cursive;
}

* { box-sizing: border-box; }
html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body { margin: 0; background: var(--papier); color: var(--encre); font-family: var(--texte); font-size: 10.2pt; line-height: 1.5; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--titre); font-weight: 700; margin: 0; letter-spacing: -0.025em; line-height: 1.08; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 700; }
a { color: inherit; }
.chiffre { font-family: var(--chiffres); font-weight: 600; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --- Barre d'outils (écran seulement) --- */
.outils { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 10px 16px; background: rgba(15, 36, 73, .97); color: #fff; font-size: 13px; }
.outils .retours { display: flex; gap: 8px; flex-wrap: wrap; }
.outils a, .outils button { font: inherit; color: #fff; text-decoration: none; background: transparent; border: 1px solid rgba(255, 255, 255, .3); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
.outils .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.outils .principal { background: var(--or); color: var(--encre); border-color: var(--or); font-weight: 700; }
.outils .aide { color: rgba(255, 255, 255, .65); }

/* --- Feuille A4 --- */
@page { size: A4; margin: 0; }
.page { position: relative; width: 210mm; height: 297mm; margin: 24px auto; background: var(--feuille); overflow: hidden; box-shadow: 0 2px 18px rgba(16, 24, 40, .16); padding: 14mm 15mm 22mm; display: flex; flex-direction: column; gap: 5.5mm; }
@media print {
  body { background: #fff; }
  .outils, .ecran-seulement { display: none !important; }
  .page { margin: 0; box-shadow: none; break-after: page; }
}
@media screen and (max-width: 840px) {
  .page { width: 100%; height: auto; min-height: 0; margin: 0 0 12px; padding: 22px 16px 70px; }
}
.quadrille {
  background-color: #fff;
  background-image: linear-gradient(var(--quadrillage) 1px, transparent 1px), linear-gradient(90deg, var(--quadrillage) 1px, transparent 1px);
  background-size: 5mm 5mm;
}

/* Bandeau et pied de page */
.bandeau { display: flex; justify-content: space-between; align-items: center; gap: 4mm; }
.marque { display: flex; align-items: center; gap: 2.4mm; font-family: var(--titre); font-weight: 700; font-size: 12pt; color: var(--bleu); letter-spacing: -0.02em; line-height: 1.1; }
.marque b { color: var(--or-fonce); }
.marque img { width: 10mm; height: 10mm; }
.marque small { display: block; font-family: var(--texte); font-weight: 500; font-size: 7.2pt; color: var(--ardoise); letter-spacing: 0; }
.theme { font-size: 7.6pt; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bleu); background: var(--bleu-pale); border-radius: 999px; padding: 1.2mm 3.4mm; }
.pied { position: absolute; left: 15mm; right: 15mm; bottom: 8mm; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 7.6pt; color: var(--ardoise); border-top: 0.6pt solid var(--trait); padding-top: 3mm; }
.pied .contact { text-align: right; }
.pied b { color: var(--bleu); }
.pied b i { font-style: normal; color: var(--or-fonce); }
@media screen and (max-width: 840px) { .pied { left: 16px; right: 16px; bottom: 16px; flex-direction: column; align-items: flex-start; } .pied .contact { text-align: left; } }

/* Titres */
.surtitre { font-size: 7.8pt; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bleu); margin-bottom: 2mm; }
.titre-page { font-size: 21pt; }
.chapo { font-size: 11pt; color: var(--encre-douce); max-width: 160mm; }
.annotation { font-family: var(--main); color: var(--bleu); font-size: 13pt; line-height: 1.15; transform: rotate(-2deg); display: inline-block; }
.souligne { background: linear-gradient(transparent 62%, rgba(242, 201, 76, .75) 62%, rgba(242, 201, 76, .75) 92%, transparent 92%); padding: 0 1mm; }

/* Couverture */
.couverture { padding: 0; gap: 0; background: var(--bleu-nuit); color: #fff; }
.couverture .haut { padding: 14mm 15mm 10mm; display: flex; flex-direction: column; gap: 5mm; color: var(--encre); }
.couverture h1 { font-size: 34pt; }
.couverture .visuel { position: relative; flex: 1; overflow: hidden; background: radial-gradient(120% 90% at 85% 10%, #2f7de1 0%, #1a468e 45%, #0f2449 100%); }
.couverture .legende { padding: 6mm 15mm 22mm; color: rgba(255, 255, 255, .86); font-size: 9.6pt; }
.couverture .legende .annotation { color: var(--or); font-size: 15pt; }
.couverture .pied { color: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .18); }
.couverture .pied b { color: #fff; }
.promesses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; }
.promesse { border-left: 3px solid var(--or-fonce); padding: 1mm 0 1mm 3mm; }
.promesse strong { display: block; font-family: var(--titre); font-size: 12pt; letter-spacing: -0.01em; }
.promesse span { font-size: 8.6pt; color: var(--encre-douce); }

/* Composition « ordinateur + téléphone » */
.compo { position: absolute; inset: 0; }
.compo .fenetre { position: absolute; left: 12%; top: 12%; width: 84%; transform: rotate(-2deg); }
.compo .tel { position: absolute; left: 4%; bottom: -8%; width: 22%; transform: rotate(-5deg); }
.compo .tel--2 { left: auto; right: 6%; bottom: -10%; transform: rotate(4deg); }
.compo .note { position: absolute; right: 6%; top: 3%; color: var(--or); font-family: var(--main); font-size: 14pt; transform: rotate(-3deg); }
.fenetre { border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 14px 34px -12px rgba(15, 36, 73, .55), 0 0 0 1px rgba(15, 36, 73, .08); }
.fenetre::before { content: ''; display: block; height: 4.5mm; background: #f2f4f7 radial-gradient(circle at 4mm 50%, #ff5f57 1mm, transparent 1.1mm), radial-gradient(circle at 7.5mm 50%, #febc2e 1mm, transparent 1.1mm); background-color: #f2f4f7; border-bottom: 1px solid var(--trait); }
.tel { border-radius: 6mm; padding: 1.2mm; background: #0f172a; box-shadow: 0 14px 30px -10px rgba(15, 36, 73, .65); }
.tel img { border-radius: 5mm; }

/* Blocs */
.grille-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3mm; }
.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; }
.carte { display: flex; gap: 3mm; align-items: flex-start; border: 1px solid var(--trait); border-radius: 12px; padding: 3.2mm; background: #fff; }
.carte h3 { font-size: 10.6pt; margin-bottom: .6mm; }
.carte p { font-size: 8.6pt; color: var(--encre-douce); }
.icone { display: grid; place-items: center; width: 8.5mm; height: 8.5mm; border-radius: 2.6mm; background: var(--bleu-pale); color: var(--bleu); flex: none; }
.icone svg { width: 4.8mm; height: 4.8mm; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.carte:nth-child(3n+2) .icone { background: var(--or-pale); color: #9a7408; }
.carte:nth-child(3n) .icone { background: #f2f4f7; color: var(--encre); }
.liste-coches { display: grid; gap: 1.6mm; }
.liste-coches li { display: flex; gap: 2mm; font-size: 9.4pt; }
.liste-coches li::before { content: ''; flex: none; width: 3.6mm; height: 3.6mm; margin-top: .9mm; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7de1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.sombre .liste-coches li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2c94c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.capture { position: relative; }
.capture .fenetre { transform: rotate(-1deg); }
.capture .tel { position: absolute; right: 2%; bottom: -6%; width: 22%; transform: rotate(4deg); }
.capture .annotation { position: absolute; right: 26%; top: -6mm; }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; align-items: center; }
.encadre { border-radius: 14px; padding: 5mm 6mm; background: var(--bleu-pale); border: 1px solid #cfe0fb; }
.encadre h3 { font-size: 12pt; margin-bottom: 1.5mm; }
.encadre p { font-size: 9.2pt; color: var(--encre-douce); }
.sombre { background: var(--bleu-nuit); color: #fff; border-color: transparent; }
.sombre p { color: rgba(255, 255, 255, .82); }
.or { background: var(--or-pale); border-color: #f6e3a6; }
.telephones { display: flex; justify-content: center; gap: 6mm; }
.telephones .tel { width: 42mm; }
.telephones .tel:nth-child(odd) { transform: rotate(-3deg); margin-top: 6mm; }
.telephones .tel:nth-child(even) { transform: rotate(3deg); }

/* Avant / après */
.entetes, .scene { display: grid; grid-template-columns: 26mm 1fr 1fr; gap: 3mm; }
.entetes { font-size: 7.8pt; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.scenes { display: grid; gap: 2.4mm; }
.scene .moment { font-family: var(--titre); font-weight: 700; font-size: 10pt; padding-top: 2.4mm; color: var(--bleu); }
.scene .moment small { display: block; font-family: var(--texte); font-weight: 400; font-size: 7.6pt; color: var(--ardoise); }
.scene .avant, .scene .apres { border-radius: 10px; padding: 2.4mm 3.4mm; font-size: 8.8pt; line-height: 1.45; }
.scene .avant { background: var(--rouge-pale); color: #7a2424; }
.scene .apres { background: var(--bleu-nuit); color: rgba(255, 255, 255, .88); }
.scene .apres strong { color: var(--or); }

/* Étapes */
.etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; counter-reset: etape; }
.etape { border: 1px solid var(--trait); border-radius: 12px; padding: 3mm; background: #fff; }
.etape::before { counter-increment: etape; content: counter(etape); display: block; font-family: var(--main); font-size: 18pt; color: var(--or-fonce); line-height: 1; margin-bottom: 1mm; }
.etape h3 { font-size: 9.6pt; margin-bottom: .6mm; }
.etape p { font-size: 8pt; color: var(--encre-douce); }

/* Tarifs */
.tranches { display: grid; gap: 2mm; }
.tranche { display: flex; justify-content: space-between; align-items: baseline; padding: 2.6mm 4mm; border-radius: 10px; background: #fff; border: 1px solid var(--trait); font-size: 9.6pt; }
.tranche b { font-family: var(--chiffres); font-size: 13pt; }
.tranche b small { font-family: var(--texte); font-size: 7.6pt; color: var(--ardoise); font-weight: 500; }

/* Appel à l'action */
.offre { background: var(--encre); color: #fff; border-radius: 14px; padding: 5mm 6mm; display: flex; justify-content: space-between; align-items: center; gap: 5mm; }
.offre h3 { font-size: 15pt; }
.offre h3 em { font-style: normal; color: var(--or); }
.offre p { font-size: 9.2pt; color: rgba(255, 255, 255, .86); }
.offre .coordonnees { text-align: right; font-size: 9.6pt; line-height: 1.6; white-space: nowrap; }
.offre .coordonnees b { color: var(--or); font-family: var(--chiffres); font-size: 12pt; }
.citation { font-family: var(--main); font-size: 13pt; color: var(--bleu); border-left: 3px solid var(--or-fonce); padding-left: 4mm; }
.chiffres-cles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; }
.chiffres-cles div { border-radius: 12px; padding: 3.4mm; background: var(--bleu-pale); }
.chiffres-cles b { display: block; font-family: var(--chiffres); font-size: 16pt; color: var(--bleu); line-height: 1.1; }
.chiffres-cles span { font-size: 8.2pt; color: var(--encre-douce); }
.etiquette-or { display: inline-block; background: var(--or); color: var(--encre); font-weight: 700; font-size: 7.6pt; letter-spacing: .1em; text-transform: uppercase; border-radius: 6px; padding: .8mm 2.4mm; }
.flex-1 { flex: 1; min-height: 0; overflow: hidden; }
.capture.flex-1 { padding-top: 7mm; }
.telephones--petits .tel { width: 29mm; }
@media screen and (max-width: 840px) {
  .promesses, .grille-2, .grille-3, .deux-colonnes, .scene, .entetes, .etapes, .chiffres-cles { grid-template-columns: 1fr; }
  .couverture .visuel { min-height: 300px; }
  .offre { flex-direction: column; align-items: flex-start; }
  .offre .coordonnees { text-align: left; }
}

/* Guides pas à pas */
.etapes-guide { display: grid; gap: 4mm; flex: 1; }
.pas { display: grid; grid-template-columns: 33mm 1fr; gap: 6mm; align-items: center; }
.pas .tel { width: 33mm; transform: none; }
.pas__numero { display: inline-grid; place-items: center; width: 9mm; height: 9mm; border-radius: 999px; background: var(--or); color: var(--encre); font-weight: 700; font-size: 12pt; margin-bottom: 2mm; }
.pas h3 { font-size: 14pt; margin-bottom: 1.5mm; }
.pas p { font-size: 10pt; color: var(--encre-douce); }
.pas .liste-coches { margin-top: 2mm; }
.astuce { margin-top: 2.5mm; font-size: 9pt; background: var(--bleu-pale); border-radius: 8px; padding: 2mm 3mm; color: var(--encre-douce); }
.astuce b { color: var(--bleu); }
@media screen and (max-width: 840px) { .pas { grid-template-columns: 30% 1fr; gap: 12px; } .pas .tel { width: 100%; } }