/* ==========================================================================
   clubenfants.be — feuille de style
   Idée : le cahier quadrillé de l'école + les écussons brodés d'un club.
   ========================================================================== */

@font-face { font-family: "Lilita One"; src: url("/fonts/lilita-one-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --encre: #1C2541;
  --encre-douce: #46506E;
  --papier: #F6F9FF;
  --quadrillage: rgba(46, 74, 168, .075);
  --cobalt: #2E4AA8;
  --soleil: #FFD449;
  --rouge: #E8414F;
  --rouge-ombre: #A92533;
  --turquoise: #4FB3A9;
  --blanc: #FFFFFF;
  --zone: var(--cobalt);
  --titre: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --texte: "Atkinson Hyperlegible", "Segoe UI", Verdana, sans-serif;
  --largeur: 1120px;
  --rayon: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font: 400 1.0625rem/1.6 var(--texte);
  color: var(--encre);
  background-color: var(--papier);
  background-image:
    linear-gradient(var(--quadrillage) 1px, transparent 1px),
    linear-gradient(90deg, var(--quadrillage) 1px, transparent 1px);
  background-size: 24px 24px;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--cobalt); text-underline-offset: .18em; }
a:hover { color: var(--rouge); }
:focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 400; line-height: 1.12; letter-spacing: .005em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
.chapo { font-size: 1.2rem; color: var(--encre-douce); max-width: 38em; }

.evitement { position: absolute; left: -999px; top: 0; background: var(--encre); color: #fff; padding: .6em 1em; z-index: 100; }
.evitement:focus { left: 1rem; }

/* --- Boutons : la pastille rouge du jeu, avec son relief ---------------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  font: 400 1.1rem/1 var(--titre); letter-spacing: .02em;
  color: #fff; background: var(--rouge);
  border: 0; border-radius: 999px; padding: .8em 1.4em;
  box-shadow: 0 4px 0 var(--rouge-ombre);
  text-decoration: none; cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
.bouton:hover { color: #fff; background: #F04D5B; }
.bouton:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--rouge-ombre); }
.bouton[disabled] { background: #B9BFCF; box-shadow: 0 4px 0 #8C93A8; cursor: not-allowed; }
.bouton-grand { font-size: 1.35rem; padding: .85em 1.6em; }
.bouton-petit { font-size: .98rem; padding: .6em 1.05em; box-shadow: 0 3px 0 var(--rouge-ombre); }
.bouton-second { color: var(--encre); background: var(--blanc); box-shadow: 0 4px 0 var(--encre); outline: 3px solid var(--encre); outline-offset: -3px; }
.bouton-second:hover { color: var(--encre); background: #FFF3C4; }
.bouton-second:active { box-shadow: 0 1px 0 var(--encre); }
.bouton-zone { background: var(--zone); box-shadow: 0 4px 0 color-mix(in srgb, var(--zone) 65%, #000); }
.bouton-zone:hover { background: color-mix(in srgb, var(--zone) 88%, #fff); }
.bouton-danger { background: var(--encre); box-shadow: 0 4px 0 #000; }
.lien-fort { font-weight: 700; }

/* --- En-tête ------------------------------------------------------------ */
.entete { position: sticky; top: 0; z-index: 20; background: var(--blanc); border-bottom: 3px solid var(--encre); }
.entete-in { max-width: var(--largeur); margin: 0 auto; padding: .55rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.logo { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--encre); font: 400 1.45rem/1 var(--titre); }
.logo:hover { color: var(--encre); }
.nav { display: flex; align-items: center; gap: 1.25rem; }
.nav a:not(.bouton) { color: var(--encre); text-decoration: none; font-weight: 700; white-space: nowrap; }
.nav a:not(.bouton):hover, .nav a[aria-current="page"] { color: var(--cobalt); text-decoration: underline; text-decoration-thickness: 3px; }
.nav-etoiles[hidden] { display: none; }
.nav-etoiles { display: inline-block; min-width: 1.6em; padding: .05em .45em; margin-left: .2em; border-radius: 999px; background: var(--soleil); font-size: .85em; text-align: center; }
@media (max-width: 720px) {
  .entete-in { flex-wrap: wrap; }
  .nav { width: 100%; justify-content: space-between; gap: .5rem; font-size: .9rem; }
  .logo span { font-size: 1.25rem; }
}

main { max-width: var(--largeur); margin: 0 auto; padding: 0 1.25rem 3rem; }

/* --- Héros d'accueil ---------------------------------------------------- */
.hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding: clamp(2rem, 6vw, 4.5rem) 0 2.5rem; }
.hero h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); margin-bottom: .35em; }
.actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } }

/* --- Carte de membre : l'élément signature ------------------------------ */
.carte {
  position: relative; max-width: 420px; width: 100%; justify-self: center;
  background: var(--blanc); border: 3px solid var(--encre); border-radius: 20px;
  box-shadow: 8px 10px 0 var(--encre); overflow: hidden;
  transform: rotate(-2deg);
}
.p-accueil .carte { animation: tampon .7s cubic-bezier(.2, 1.4, .4, 1) .15s both; }
@keyframes tampon { from { opacity: 0; transform: translateY(24px) rotate(6deg) scale(.94); } to { opacity: 1; transform: rotate(-2deg); } }
.carte-bande { display: flex; justify-content: space-between; align-items: center; padding: .7rem 1.1rem; background: var(--cobalt); color: #fff; font: 400 1.1rem/1 var(--titre); }
.carte-num { font-family: var(--texte); font-weight: 700; font-size: .9rem; letter-spacing: .06em; }
.carte-corps { display: flex; gap: 1rem; align-items: center; padding: 1.1rem 1.1rem .4rem; }
.carte-robot { flex: none; }
.carte-nom { font: 400 1.75rem/1.1 var(--titre); margin: 0 0 .2em; word-break: break-word; }
.carte-rang { margin: 0; color: var(--encre-douce); }
.carte-jauge { padding: .4rem 1.1rem .2rem; }
.carte-jauge p { font-size: .95rem; margin: .5em 0 .8em; }
.jauge { height: 16px; border: 2px solid var(--encre); border-radius: 999px; background: #EEF2FB; overflow: hidden; }
.jauge span { display: block; height: 100%; background: repeating-linear-gradient(-45deg, var(--soleil) 0 10px, #FFC21A 10px 20px); transition: width .6s ease; }
.carte-defi { display: block; padding: .8rem 1.1rem; border-top: 2px dashed var(--encre); background: #FFF6CF; color: var(--encre); font-weight: 700; text-decoration: none; }
.carte-defi:hover { background: var(--soleil); color: var(--encre); }

/* --- Capture d'écran ---------------------------------------------------- */
.capture { margin: 1rem auto 3rem; max-width: 900px; }
.capture img { display: block; width: 100%; border: 3px solid var(--encre); border-radius: var(--rayon); }
.capture figcaption { margin-top: .6rem; color: var(--encre-douce); font-size: .95rem; }

/* --- Blocs de contenu --------------------------------------------------- */
.bloc { padding: 2.5rem 0 1rem; }
.bloc-intro { max-width: 42em; color: var(--encre-douce); }

/* --- La route des zones (une vraie séquence) ---------------------------- */
.route { list-style: none; margin: 1.5rem 0 0; padding: 0; position: relative; }
.route::before { content: ""; position: absolute; left: 37px; top: 30px; bottom: 30px; border-left: 4px dashed var(--encre); opacity: .25; }
.etape { position: relative; display: grid; grid-template-columns: 76px 1fr auto; gap: 1.25rem; align-items: center; padding: 1.1rem 0; }
.etape .ecusson { position: relative; z-index: 1; filter: drop-shadow(3px 4px 0 rgba(28, 37, 65, .85)); }
.etape h3 { font-size: 1.55rem; margin-bottom: .2em; }
.etape h3 a { color: var(--zone); text-decoration: none; }
.etape h3 a:hover { text-decoration: underline; }
.etape p { margin: 0 0 .3em; max-width: 40em; }
.etape-classe { font-weight: 700; font-size: .92rem; color: var(--encre-douce); margin-bottom: .3em; }
.etape-etoiles { font-size: .92rem; color: var(--encre-douce); min-height: 1.4em; }
@media (max-width: 640px) {
  .etape { grid-template-columns: 60px 1fr; }
  .etape .ecusson { width: 60px; height: 60px; }
  .route::before { left: 29px; }
  .etape .bouton-zone { grid-column: 2; justify-self: start; }
}

/* --- Trois temps -------------------------------------------------------- */
.trois-temps { list-style: none; counter-reset: t; padding: 0; margin: 1.25rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.trois-temps li { counter-increment: t; padding-top: 3.4rem; position: relative; }
.trois-temps li::before { content: counter(t); position: absolute; top: 0; left: 0; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--soleil); border: 3px solid var(--encre); font: 400 1.4rem/1 var(--titre); }
@media (max-width: 760px) { .trois-temps { grid-template-columns: 1fr; } }

/* --- Mur d'écussons ----------------------------------------------------- */
.mur { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.4rem 1rem; }
.mur-item { display: grid; justify-items: center; align-content: start; text-align: center; gap: .3rem; }
.mur-item .ecusson { filter: grayscale(1) opacity(.5); transition: filter .3s; }
.mur-item.obtenu .ecusson { filter: drop-shadow(2px 3px 0 rgba(28, 37, 65, .8)); transform: rotate(-6deg); }
.mur-item.obtenu:nth-child(even) .ecusson { transform: rotate(5deg); }
.mur-nom { font-weight: 700; line-height: 1.25; }
.mur-desc { font-size: .88rem; color: var(--encre-douce); line-height: 1.35; }
.mur-item:not(.obtenu) .mur-nom { color: var(--encre-douce); }

/* --- Parents, FAQ ------------------------------------------------------- */
.bloc-parents p { max-width: 44em; }
.faq { max-width: 50em; border-top: 2px solid var(--encre); }
.faq details { border-bottom: 2px solid var(--encre); padding: .9rem 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 1.1rem; list-style-position: outside; }
.faq details p { margin: .6em 0 .2em; color: var(--encre-douce); }

/* --- Encart publicitaire unique ----------------------------------------- */
.encart { margin: 2rem 0; padding: .8rem; border: 2px dashed #B9BFCF; border-radius: var(--rayon); background: var(--blanc); min-height: 120px; }
.encart-mention { display: block; font-size: .78rem; color: var(--encre-douce); margin-bottom: .4rem; }

/* --- Pages de zone ------------------------------------------------------ */
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; padding: 0; margin: 1.4rem 0 1.2rem; font-size: .92rem; }
.ariane li + li::before { content: "›"; margin-right: .3rem; color: var(--encre-douce); }
.ariane [aria-current] { color: var(--encre-douce); }
.zone-tete { padding-bottom: 1.5rem; border-bottom: 6px solid var(--zone); }
.zone-tete-in { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; }
.zone-tete h1 { color: var(--zone); }
.ecusson-grand { filter: drop-shadow(5px 6px 0 rgba(28, 37, 65, .9)); transform: rotate(-5deg); }
@media (max-width: 640px) { .zone-tete-in { grid-template-columns: 1fr; } .ecusson-grand { width: 88px; height: 88px; } }

.niveaux { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .8rem; }
.niveau { display: grid; grid-template-columns: 3.2rem 1fr auto auto; gap: 1rem; align-items: center; padding: .8rem 1rem; background: var(--blanc); border: 2px solid var(--encre); border-radius: var(--rayon); }
.niveau-num { width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--zone); color: #fff; font: 400 1.5rem/1 var(--titre); }
.niveau-titre { font-weight: 700; margin: 0; }
.niveau-regle { margin: 0; font-size: .92rem; color: var(--encre-douce); }
.niveau-etoiles { white-space: nowrap; font-size: 1.25rem; letter-spacing: .05em; min-width: 4.2em; text-align: right; }
.etoile { display: inline-block; vertical-align: -.12em; margin-right: .08em; }
.etoile path { stroke-width: 1.6; stroke-linejoin: round; }
.etoile-pleine path { fill: #FFC21A; stroke: var(--encre); }
.etoile-vide path { fill: #E3E8F3; stroke: #B9C1D6; }
@media (max-width: 640px) {
  .niveau { grid-template-columns: 2.6rem 1fr; }
  .niveau-num { width: 2.6rem; height: 2.6rem; font-size: 1.2rem; }
  .niveau-etoiles { grid-column: 2; text-align: left; }
  .niveau .bouton { grid-column: 2; justify-self: start; }
}

.article { max-width: 46em; }
.article h2 { margin-top: 1.4em; }
.astuces { padding: 0; list-style: none; display: grid; gap: .7rem; }
.astuces li { position: relative; padding: .7rem 1rem .7rem 3rem; background: var(--blanc); border-left: 5px solid var(--zone); border-radius: 0 var(--rayon) var(--rayon) 0; }
.astuces li::before { content: ""; position: absolute; left: 1rem; top: 1.05rem; width: 1.1rem; height: 1.1rem; border-radius: 4px; background: var(--turquoise); border: 2px solid var(--encre); }

.zones-voisines { display: flex; justify-content: space-between; gap: 1rem; padding: 2rem 0 0; flex-wrap: wrap; }
.voisine { display: grid; padding: .9rem 1.2rem; border: 3px solid var(--zone); border-radius: var(--rayon); background: var(--blanc); text-decoration: none; color: var(--encre); font: 400 1.25rem/1.2 var(--titre); }
.voisine span { font: 700 .85rem/1.4 var(--texte); color: var(--encre-douce); }
.voisine-suiv { text-align: right; margin-left: auto; }
.voisine:hover { background: color-mix(in srgb, var(--zone) 10%, #fff); color: var(--encre); }

/* --- Page parents : tableau --------------------------------------------- */
.table-defile { overflow-x: auto; margin: 1rem 0 1.5rem; border: 2px solid var(--encre); border-radius: var(--rayon); background: var(--blanc); }
.programme { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .95rem; }
.programme caption { text-align: left; padding: .8rem 1rem; font-weight: 700; }
.programme th, .programme td { padding: .55rem .8rem; border-top: 1px solid #DCE2F0; text-align: left; vertical-align: top; }
.programme thead th { background: var(--encre); color: #fff; }
.programme tbody th { border-left: 6px solid var(--zone); font-family: var(--titre); font-weight: 400; font-size: 1.1rem; }
.table-zone { display: inline-block; margin-left: .4em; font-weight: 700; font-size: .85em; }

/* --- Mon club ----------------------------------------------------------- */
.club-tete { padding-bottom: .5rem; }
.club-grille { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 2.5rem; align-items: start; padding: 1rem 0; }
.club-grille .carte { justify-self: start; }
@media (max-width: 860px) { .club-grille { grid-template-columns: 1fr; } .club-grille .carte { justify-self: center; } }
.club-form label { display: block; font-weight: 700; margin-bottom: .5rem; }
.club-form-ligne { display: flex; gap: .7rem; flex-wrap: wrap; }
.club-form input { flex: 1 1 200px; font: inherit; font-size: 1.15rem; padding: .65em .9em; border: 3px solid var(--encre); border-radius: 12px; background: var(--blanc); }
.aide { font-size: .9rem; color: var(--encre-douce); margin-top: .5rem; }
.club-form-actions { margin-top: 1.5rem; }

.tableau-zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; }
.tz { background: var(--blanc); border: 2px solid var(--encre); border-top: 8px solid var(--zone); border-radius: var(--rayon); padding: .9rem 1rem; }
.tz h3 { font-size: 1.15rem; }
.tz h3 a { color: var(--encre); text-decoration: none; }
.tz-niveaux { list-style: none; margin: 0; padding: 0; }
.tz-niveaux a { display: flex; justify-content: space-between; padding: .35rem 0; border-bottom: 1px dashed #DCE2F0; text-decoration: none; color: var(--encre); }
.tz-niveaux .niveau-etoiles { font-size: 1.05rem; min-width: 0; }

.diplomes { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .7rem; max-width: 44em; }
.diplome-ligne { display: grid; grid-template-columns: 48px 1fr auto auto; gap: 1rem; align-items: center; padding: .6rem 1rem; background: var(--blanc); border: 2px solid var(--encre); border-radius: var(--rayon); }
.diplome-nom { font-weight: 700; }
.diplome-etat { font-size: .9rem; color: var(--encre-douce); }
@media (max-width: 600px) { .diplome-ligne { grid-template-columns: 48px 1fr; } .diplome-etat, .diplome-ligne .bouton { grid-column: 2; justify-self: start; } }
.bloc-reinit p { max-width: 42em; color: var(--encre-douce); }

/* Diplôme (visible uniquement à l'impression) */
.diplome { display: none; }

/* --- 404 ---------------------------------------------------------------- */
.bloc-404 { text-align: center; display: grid; justify-items: center; }
.liste-zones-404 { list-style: none; padding: 0; display: grid; gap: .4rem; margin: 1rem 0 2rem; }
.liste-zones-404 span { color: var(--encre-douce); font-size: .9rem; }

/* --- Pied de page ------------------------------------------------------- */
.pied { background: var(--encre); color: #DDE3F5; margin-top: 3rem; }
.pied-in { max-width: var(--largeur); margin: 0 auto; padding: 2.5rem 1.25rem; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem; }
.pied a { color: #fff; }
.pied a:hover { color: var(--soleil); }
.pied-titre { font: 400 1.3rem/1.2 var(--titre); color: var(--soleil); margin-bottom: .6em; }
.pied-liens { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .35rem; }
.pied-domaine { font-size: .82rem; opacity: .7; }
.pied-copy { font-size: .9rem; opacity: .75; }
@media (max-width: 760px) { .pied-in { grid-template-columns: 1fr; } }

/* ==========================================================================
   Page du jeu
   ========================================================================== */
body.p-jeu { margin: 0; overflow: hidden; background: #000; background-image: none; height: 100%; }
.barre-jeu {
  position: fixed; top: 0; left: 0; right: 0; height: 48px; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 0 .75rem;
  background: var(--encre); color: #fff; border-bottom: 3px solid var(--soleil);
}
.barre-retour, .barre-club { display: inline-flex; align-items: center; gap: .35rem; color: #fff; text-decoration: none; font-weight: 700; font-size: .95rem; padding: .35rem .6rem; border-radius: 999px; }
.barre-retour:hover, .barre-club:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.barre-club { background: rgba(255, 212, 73, .16); }
.barre-titre { margin: 0; font: 400 1.1rem/1 var(--titre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-titre [data-club="niveau-courant"] { color: var(--soleil); }
@media (max-width: 560px) { .barre-jeu-nom, .barre-club-txt, .barre-retour span { display: none; } }
.p-jeu #wrapper { position: fixed; top: 48px; left: 0; right: 0; bottom: 0; overflow: hidden; }
.p-jeu #wrapper .rs-container, .p-jeu #wrapper .rs-mar3d { width: 100%; height: 100%; }

.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 2100; display: grid; gap: .6rem; width: min(92vw, 360px); pointer-events: none; }
@media (max-width: 700px) { .toasts { right: auto; left: 50%; transform: translateX(-50%); bottom: 84px; } }
.toast { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; background: var(--blanc); color: var(--encre); border: 3px solid var(--encre); border-radius: 16px; box-shadow: 5px 6px 0 var(--encre); animation: toast-in .45s cubic-bezier(.2, 1.4, .4, 1) both; font-family: var(--texte); }
.toast.sort { animation: toast-out .35s ease forwards; }
.toast strong { display: block; font: 400 1.15rem/1.15 var(--titre); }
.toast span { font-size: .9rem; color: var(--encre-douce); }
.toast .toast-etoiles { font-size: 1.5rem; line-height: 1; white-space: nowrap; color: inherit; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-16px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-12px); } }
.noscript { position: fixed; inset: 48px 0 0; display: grid; place-items: center; padding: 2rem; background: var(--papier); color: var(--encre); text-align: center; font-size: 1.1rem; z-index: 999; }

/* --- Accessibilité : mouvement réduit ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Impression : la carte de membre ou un diplôme, seuls sur la page
   ========================================================================== */
@media print {
  body { background: #fff; }
  .entete, .pied, .evitement { display: none !important; }
  body.imprime-carte main > *:not(.club-grille), body.imprime-carte .club-form { display: none !important; }
  body.imprime-carte .club-grille { display: block; }
  body.imprime-carte .carte { transform: none; box-shadow: none; margin: 2cm auto; }
  body.imprime-diplome main > *:not(.diplome) { display: none !important; }
  body.imprime-diplome .diplome { display: block; }
  @page { margin: 1cm; }
  .carte-bande, .jauge span, .niveau-num { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .diplome { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .diplome-cadre {
    border: 6px double var(--encre); outline: 10px solid var(--zone, var(--cobalt)); outline-offset: -22px;
    padding: 2.2cm 1.5cm; text-align: center; min-height: 17cm;
  }
  .diplome-club { font: 400 18pt var(--titre); color: var(--cobalt); margin: 0; }
  .diplome-titre { font: 400 54pt/1 var(--titre); margin: .2em 0 .3em; }
  .diplome-texte { font-size: 14pt; margin: .3em 0; }
  .diplome-prenom { font: 400 38pt/1.1 var(--titre); color: var(--rouge); margin: .2em 0 .4em; border-bottom: 2px dotted var(--encre); display: inline-block; min-width: 10cm; }
  .diplome-zone { font: 400 26pt/1.2 var(--titre); margin: .2em 0; }
  .diplome-detail { font-size: 12pt; color: var(--encre-douce); }
  .diplome-ecusson { margin: .6cm auto; }
  .diplome-date, .diplome-site { font-size: 11pt; margin: .2em 0; }
}