/* ─── Portail client Nuances Mj — styles (téléphone d'abord ; mêmes standards que l'ERP) ─────────────────────
   Cibles ≥ 44 px, champs en 16 px (iOS ne zoome pas), aucun débordement à 360 px, zones sûres, zoom jamais bloqué.
   Couleurs des statuts (convention de l'ERP) : rouge = en retard · ambre = attend · bleu = en cours · vert = terminé · gris = inactif. */
:root {
  --encre: #141414; --papier: #f6f5f1; --blanc: #fff; --vert: #3c6e4a; --vert-fonce: #2c5338; --vert-pale: #e6efe7;
  --gris: #6b6a63; --gris-pale: #ecebe5; --ligne: #dedbd1; --rouge: #b4382f; --rouge-pale: #f8e4e1; --ambre: #9a6400; --ambre-pale: #fbefd6;
  --bleu: #2f5f8a; --bleu-pale: #e3edf6; --kraft: #c99a5b; --kraft-fonce: #8d6834; --ombre: 0 1px 2px rgba(20, 20, 20, .06), 0 6px 18px rgba(20, 20, 20, .05);
  --rayon: 14px; --barre: 60px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--encre); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; overflow-x: hidden; }
a { color: var(--vert-fonce); }
h1, h2, h3 { line-height: 1.2; margin: 0; }
h1 { font-size: 26px; letter-spacing: -.01em; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
p { margin: 0; }
button, input, select { font: inherit; }
.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 12px; top: 12px; z-index: 50; background: var(--blanc); padding: 10px 14px; border-radius: 8px; }
.cache-lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid #7aa985; outline-offset: 2px; }
.chargement { padding: 48px 16px; text-align: center; color: var(--gris); }

/* ── Barre ── */
.barre { position: sticky; top: 0; z-index: 10; background: rgba(246, 245, 241, .94); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--ligne);
  padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
.barre-haut { display: flex; align-items: center; gap: 12px; min-height: var(--barre); max-width: 1180px; margin: 0 auto; }
.logo { height: 34px; width: auto; display: block; }
.barre-client { flex: 1; min-width: 0; border-left: 1px solid var(--ligne); padding-left: 12px; }
.barre-client .sur { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); }
.barre-client .nom { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-actions { display: flex; gap: 6px; align-items: center; }
.nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; max-width: 1180px; margin: 0 auto; -webkit-overflow-scrolling: touch; }
.nav::-webkit-scrollbar { display: none; }
.nav a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--gris); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap; }
.nav a[aria-current="page"] { color: var(--vert-fonce); border-bottom-color: var(--vert); }

/* ── Mise en page ── */
main { max-width: 1180px; margin: 0 auto; padding: 20px max(16px, env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); display: grid; gap: 18px; }
.entete { display: grid; gap: 4px; }
.entete .sur { font-size: 13px; color: var(--gris); }
.grille { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .grille.deux { grid-template-columns: 1fr 1fr; } }
.carte { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 16px; min-width: 0; }
.carte > h2 { margin-bottom: 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.carte > h2 a { font-size: 14px; font-weight: 600; }
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.item { display: block; border: 1px solid var(--ligne); border-radius: 12px; padding: 12px; color: inherit; text-decoration: none; background: var(--blanc); min-width: 0; }
a.item:hover { border-color: #b9c9bd; background: #fbfcfa; }
.item-haut { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.item-titre { font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.item-sous { font-size: 14px; color: var(--gris); overflow-wrap: anywhere; }
.faits { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 16px; margin: 10px 0 0; }
.faits div { min-width: 0; }
.faits dt { font-size: 12px; color: var(--gris); text-transform: uppercase; letter-spacing: .04em; }
.faits dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.vide { color: var(--gris); padding: 8px 0; }
.note { font-size: 13px; color: var(--gris); }
.groupe-commande { display: grid; gap: 10px; }
.groupe-commande + .groupe-commande { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--ligne); }

/* ── Pastilles d'état ── */
.pastilles { display: flex; gap: 6px; flex-wrap: wrap; }
.ton { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 650; white-space: normal; line-height: 1.3; }
.ton::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.ton.vert { background: var(--vert-pale); color: var(--vert-fonce); }
.ton.bleu { background: var(--bleu-pale); color: var(--bleu); }
.ton.ambre { background: var(--ambre-pale); color: var(--ambre); }
.ton.rouge { background: var(--rouge-pale); color: var(--rouge); }
.ton.gris { background: var(--gris-pale); color: var(--gris); }

/* ── Boutons et champs ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--ligne);
  background: var(--blanc); color: var(--encre); font-weight: 650; cursor: pointer; text-decoration: none; }
.btn:hover { border-color: #b8b4a6; }
.btn-primaire { background: var(--vert); border-color: var(--vert); color: #fff; }
.btn-primaire:hover { background: var(--vert-fonce); border-color: var(--vert-fonce); }
.btn-discret { border-color: transparent; background: transparent; color: var(--gris); }
.btn[disabled] { opacity: .6; cursor: progress; }
.filtres { display: flex; gap: 6px; flex-wrap: wrap; }
.filtres .btn[aria-pressed="true"] { background: var(--vert-pale); border-color: #b9d0bd; color: var(--vert-fonce); }
form.pile, .pile { display: grid; gap: 14px; }
label.champ { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.champ input { width: 100%; min-height: 48px; border: 1px solid #cfcabd; border-radius: 10px; padding: 10px 12px; font-size: 16px; background: var(--blanc); color: var(--encre); }
.champ input:focus { border-color: var(--vert); outline: 3px solid #cfe1d3; outline-offset: 0; }
.champ-code input { font-size: 24px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.erreur { background: var(--rouge-pale); color: var(--rouge); border-radius: 10px; padding: 10px 12px; font-weight: 600; }
.succes { background: var(--vert-pale); color: var(--vert-fonce); border-radius: 10px; padding: 10px 12px; font-weight: 600; }

/* ── Écrans d'entrée (connexion, invitation) ── */
.porte { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }
.porte-carte { width: 100%; max-width: 420px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: 18px; box-shadow: var(--ombre); padding: 26px 22px; display: grid; gap: 18px; }
.porte-tete { display: grid; gap: 10px; justify-items: start; }
.porte-tete .logo { height: 44px; }
.porte-tete p { color: var(--gris); }
.porte-pied { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.qr { width: 196px; height: 196px; image-rendering: pixelated; border: 1px solid var(--ligne); border-radius: 10px; justify-self: center; background: #fff; }
.cle { font-family: ui-monospace, Consolas, monospace; font-size: 15px; background: var(--gris-pale); border-radius: 8px; padding: 8px 10px; overflow-wrap: anywhere; user-select: all; }
.codes { font-family: ui-monospace, Consolas, monospace; font-size: 17px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; background: var(--gris-pale); padding: 12px; border-radius: 10px; }
.choix { display: grid; gap: 8px; }
.choix label { display: flex; gap: 10px; align-items: center; min-height: 48px; border: 1px solid var(--ligne); border-radius: 10px; padding: 8px 12px; cursor: pointer; }
.choix input { width: 22px; height: 22px; accent-color: var(--vert); }

/* ── Mon cannabis ── */
.total { font-size: 34px; font-weight: 750; letter-spacing: -.02em; color: var(--vert-fonce); }
.barres { display: grid; gap: 8px; }
.barre-cat { display: grid; grid-template-columns: minmax(0, 9em) 1fr auto; gap: 10px; align-items: center; font-size: 14px; }
.barre-cat .piste { height: 10px; border-radius: 99px; background: var(--gris-pale); overflow: hidden; }
.barre-cat .rempli { display: block; height: 100%; width: var(--part, 0%); background: var(--vert); border-radius: 99px; transition: width .8s ease; }
.zones { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--gris-pale); margin: 10px 0 6px; }
.zones span { display: block; width: var(--part, 0%); }
.zone-voute { background: var(--vert); } .zone-production { background: var(--bleu); } .zone-quarantaine { background: #d9a43a; }
.zone-entrepot { background: #8a9a8e; } .zone-autre { background: #b9b4a6; } .zone-non_precisee { background: #dcd8cc; }
.legende { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--gris); }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ── Tableau léger (connexions) → cartes au téléphone ── */
.tableau { width: 100%; border-collapse: collapse; font-size: 14px; }
.tableau th { text-align: left; color: var(--gris); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 8px 6px; border-bottom: 1px solid var(--ligne); }
.tableau td { padding: 9px 6px; border-bottom: 1px solid var(--gris-pale); overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .tableau thead { display: none; }
  .tableau tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--gris-pale); }
  .tableau td { border: 0; padding: 0; }
  .tableau td:last-child { grid-column: 1 / -1; color: var(--gris); font-size: 13px; }
  h1 { font-size: 22px; }
  .barre-client .sur { display: none; }
  .logo { height: 28px; }
  .carte { padding: 14px; }
}

/* ── Ligne de production animée ── */
.ligne { margin: 10px 0 0; }
.ligne-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ligne-texte { font-size: 14px; font-weight: 600; color: var(--vert-fonce); margin-top: 2px; }
.ligne.attente .ligne-texte { color: var(--ambre); }
.ligne-titre { display: grid; gap: 2px; margin-bottom: 12px; }
.ligne-sur { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); }
.ligne-titre strong { font-size: 18px; }
.ligne-grande .horizontale { display: block; max-width: 980px; }
.ligne-grande .verticale { display: none; max-width: 380px; }
@media (max-width: 640px) { .ligne-grande .horizontale { display: none; } .ligne-grande .verticale { display: block; } }
.rail { stroke: var(--ligne); stroke-width: 3; stroke-linecap: round; }
.rail-fait { stroke: var(--vert); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset var(--duree, 1.4s) cubic-bezier(.45, .05, .25, 1); }
.rail-fait.epais { stroke-width: 5; }
.convoyeur { fill: #e7e3d8; stroke: #d5d0c2; }
.rouleau circle { fill: #f6f4ee; stroke: #cbc5b5; }
.rouleau line { stroke: #b8b1a0; stroke-width: 1.4; }
.rouleau { transform-box: fill-box; transform-origin: center; }
.ligne.en-route:not(.arrivee) .rouleau { animation: tourne .5s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.station .pastille { fill: var(--blanc); stroke: #cbc5b5; stroke-width: 2; }
.station.franchie .pastille { fill: var(--vert); stroke: var(--vert); }
.station.actuelle .pastille { fill: var(--blanc); stroke: var(--vert); stroke-width: 3; }
.ligne.attente .station.actuelle .pastille { stroke: var(--ambre); }
.ligne-mini .station.actuelle .pastille { fill: var(--vert); }
.ligne-mini.attente .station.actuelle .pastille { fill: var(--ambre); }
.station .numero { font-size: 14px; font-weight: 700; fill: #a7a192; text-anchor: middle; }
.station.actuelle .numero { fill: var(--vert-fonce); }
.station .coche { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.station .etiquette { font-size: 14px; font-weight: 600; fill: var(--gris); text-anchor: middle; }
.station.actuelle .etiquette { fill: var(--encre); font-weight: 750; }
.station.franchie .etiquette { fill: var(--vert-fonce); }
.station .date { font-size: 12.5px; fill: var(--gris); text-anchor: middle; }
.station .sous { font-size: 13px; font-style: italic; fill: var(--vert-fonce); text-anchor: middle; font-weight: 600; }
.ligne.attente .station .sous { fill: var(--ambre); }
.station .gauche { text-anchor: start; }
.verticale .station .etiquette { font-size: 16px; }
.verticale .station .date { font-size: 13.5px; }
.pulse { fill: none; stroke: var(--vert); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ligne.attente .pulse { stroke: var(--ambre); }
.ligne.arrivee .pulse { animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { opacity: .55; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(1.7); } }
/* Les étapes franchies s'allument au passage de la caisse. */
.ligne.en-route .station.franchie .pastille, .ligne.en-route .station.franchie .coche { animation: allume .35s ease-out both; animation-delay: calc(var(--i) * var(--pas, 200ms) + var(--pas, 200ms) * .6); }
@keyframes allume { from { fill: var(--blanc); stroke: #cbc5b5; stroke-opacity: .2; } }
.chariot { transition: none; }
.ligne.en-route .chariot { transition: transform var(--duree, 1.4s) cubic-bezier(.45, .05, .25, 1); }
.caisse-corps { fill: var(--kraft); stroke: var(--kraft-fonce); stroke-width: 1.2; }
.caisse-pli { stroke: var(--kraft-fonce); stroke-width: 1; opacity: .6; }
.caisse-ruban { fill: #e8d3a8; opacity: .9; }
.caisse-etiquette { fill: #fff; opacity: .9; }
.ligne.arrivee .caisse { animation: pose .45s ease-out 1; transform-box: fill-box; transform-origin: center bottom; }
@keyframes pose { 0% { transform: scaleY(.92); } 60% { transform: scaleY(1.04); } 100% { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .barre, .nav, .btn { display: none !important; }
  body { background: #fff; }
  .carte { box-shadow: none; }
}
.retour { justify-self: start; padding-left: 4px; }
.ligne-mini .ligne-svg { max-width: 440px; }
/* Cibles tactiles ≥ 44 px sans changer la mise en page (logo, « Tout voir »). */
.barre-haut > a { display: inline-flex; align-items: center; min-height: 44px; }
.carte > h2 a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; margin: -13px -6px; }
/* Téléphone : le nom du client passe sous le logo (jamais réduit à « D. »). */
@media (max-width: 600px) {
  .barre-haut { flex-wrap: wrap; row-gap: 0; }
  .barre-haut > a { flex: 1; }
  .barre-client { order: 3; flex-basis: 100%; border-left: 0; padding: 0 0 4px; }
  .barre-client .nom { font-size: 14px; }
}

/* ── Jalons de livraison (bientôt prête / prête / retardée) ── */
.jalon { border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; border: 1px solid transparent; min-width: 0; overflow-wrap: anywhere; }
.jalon + .jalon { margin-top: 10px; }
.item .jalon { margin-top: 10px; }
.jalon-titre { font-weight: 700; font-size: 16px; }
.jalon-detail { font-size: 14px; }
.jalon-bientot_prete { background: var(--bleu-pale); color: var(--bleu); border-color: #c9d9ee; }
.jalon-prete { background: var(--vert-pale); color: var(--vert-fonce); border-color: #b9d0bd; }
.jalon-retardee { background: var(--rouge-pale); color: var(--rouge); border-color: #efc2bd; }
.carte-jalons { border-left: 4px solid var(--vert); }

/* ── Section B2B : demandes et leur suivi animé (suivi.js) ── */
.champ textarea { width: 100%; min-height: 160px; border: 1px solid #cfcabd; border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 16px; background: var(--blanc); color: var(--encre); resize: vertical; }
.champ textarea:focus { border-color: var(--vert); outline: 3px solid #cfe1d3; outline-offset: 0; }
.intro { margin: 4px 0 12px; max-width: 70ch; }
.texte-libre { white-space: pre-wrap; overflow-wrap: anywhere; }
.reponse { border-left: 4px solid var(--bleu); }
.reponse.acceptee { border-left-color: var(--vert); }
.reponse.refusee { border-left-color: var(--rouge); }
.suivi { margin: 10px 0 0; }
.suivi-rail { position: relative; height: 22px; margin: 0 11px; }
.suivi-grande .suivi-rail { height: 56px; margin: 6px 40px 0; }
.suivi-piste, .suivi-rempli { position: absolute; top: 9px; left: 0; height: 4px; border-radius: 2px; }
.suivi-piste { right: 0; background: var(--gris-pale); }
.suivi-rempli { width: var(--fin, 0%); background: var(--vert); transition: width 1.1s cubic-bezier(.3, .7, .2, 1); }
.suivi-station { position: absolute; top: 0; left: var(--x); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.suivi-pastille { width: 22px; height: 22px; border-radius: 50%; background: var(--blanc); border: 3px solid #cbc5b5; box-sizing: border-box; transition: background .3s .8s, border-color .3s .8s; }
.suivi-station.faite .suivi-pastille { background: var(--vert); border-color: var(--vert); }
.suivi-station.actuelle .suivi-pastille { border-color: var(--vert); background: var(--vert-pale); position: relative; }
.suivi-station.actuelle .suivi-pastille::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid var(--vert); animation: pulse 2s ease-out 1.2s infinite; }
.suivi-station.actuelle.acceptee .suivi-pastille { background: var(--vert); }
.suivi-station.actuelle.refusee .suivi-pastille { background: var(--rouge-pale); border-color: var(--rouge); }
.suivi-station.actuelle.acceptee .suivi-pastille::after, .suivi-station.actuelle.refusee .suivi-pastille::after { animation: none; border-color: transparent; }
.suivi-nom { font-size: 12px; color: var(--gris); white-space: nowrap; }
.suivi-station.actuelle .suivi-nom { color: var(--encre); font-weight: 650; }
.suivi-enveloppe { position: absolute; top: -9px; left: var(--fin, 0%); width: 18px; height: 13px; margin-left: -9px; border-radius: 2px; background: var(--kraft); box-shadow: inset 0 -5px 0 var(--kraft-fonce); transition: left 1.1s cubic-bezier(.3, .7, .2, 1); }
.suivi-texte { font-size: 13px; color: var(--gris); margin-top: 6px; }
.suivi-grande .suivi-texte { margin-top: 2px; font-size: 15px; color: var(--encre); }
@media (max-width: 560px) { .suivi-grande .suivi-rail { margin: 6px 26px 0; } .suivi-nom { font-size: 11px; white-space: normal; text-align: center; max-width: 74px; } }
@media (prefers-reduced-motion: reduce) { .suivi-rempli, .suivi-enveloppe, .suivi-pastille { transition: none; } .suivi-station.actuelle .suivi-pastille::after { animation: none; } }
.faits + h2 { margin-top: 14px; }
.suivi-long.suivi-grande .suivi-station:not(.actuelle) .suivi-nom { display: none; }
@media (min-width: 900px) { .suivi-long.suivi-grande .suivi-station:not(.actuelle) .suivi-nom { display: block; max-width: 90px; white-space: normal; text-align: center; } }

/* ── Section B2B (B2B-1b) : formulaires publiés, commentaires, documents, soumission ── */
.fiche { display: grid; gap: 18px; min-width: 0; }
.groupe-champ { display: grid; gap: 6px; min-width: 0; }
.champ select { width: 100%; min-height: 48px; border: 1px solid #cfcabd; border-radius: 10px; padding: 10px 12px; font-size: 16px; background: var(--blanc); color: var(--encre); }
.champ select:focus { border-color: var(--vert); outline: 3px solid #cfe1d3; outline-offset: 0; }
.champ input[type="file"] { padding: 9px 10px; font-size: 15px; }
.champ textarea.court { min-height: 96px; }
.champ-case { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 8px 0; font-weight: 600; font-size: 15px; cursor: pointer; }
.champ-case input { width: 24px; height: 24px; flex: none; margin: 0; accent-color: var(--vert); }
.etoile { color: var(--rouge); }
.erreur-champ { color: var(--rouge); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.erreur-champ:empty { display: none; }
.champ [aria-invalid="true"], .champ-case [aria-invalid="true"] { border-color: var(--rouge); }
.champ [aria-invalid="true"]:focus { outline-color: var(--rouge-pale); }
.attendu { background: var(--ambre-pale); color: var(--ambre); border-radius: 10px; padding: 10px 12px; font-weight: 600; margin-bottom: 12px; }
.carte > .liste + * { margin-top: 14px; }
.carte > .vide + * { margin-top: 6px; }
.carte > .succes { margin-top: 14px; }
.soumission { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--ligne); }
.btn.inactif[disabled] { cursor: not-allowed; }
.carte > .succes + * { margin-top: 14px; }

/* ─── Thèmes des fêtes (2026-10-30) — MÊMES fêtes et MÊMES dessins que l'ERP (frontend/src/styles.css, généré à partir de
   lui), transposés à la barre du haut : bande de navigation aux couleurs de la fête avec ses particules, petit dessin près du
   logo, guirlande ou fanions sous la barre. Classes `theme-fetes` + `theme-<fête>` sur <html> (app.js → appliquerTheme).
   Contenu, cartes et statuts inchangés ; rien à l'impression ; immobile si l'appareil réduit les animations. */
html.theme-fetes .barre { position: sticky; }
html.theme-fetes .barre::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; pointer-events: none;
  background-color: var(--fete-bande-1);
}
html.theme-fetes .nav { position: relative; z-index: 1; }
html.theme-fetes .nav a { position: relative; z-index: 1; color: #ecebe5; }
html.theme-fetes .nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--fete-accent); }
html.theme-fetes .nav a:focus-visible { outline-color: var(--fete-accent); }
html.theme-fetes .nav::after { content: ''; position: absolute; inset: 0; pointer-events: none; display: none; }
html.theme-fetes .barre-haut > a:first-child { position: relative; }
html.theme-fetes .barre-haut > a:first-child::after {
  content: ''; position: absolute; width: 26px; height: 26px; left: 90px; top: -3px; pointer-events: none;
  background: no-repeat center / contain var(--fete-dessin);
}
@media (max-width: 600px) { html.theme-fetes .barre-haut > a:first-child::after { width: 22px; height: 22px; left: 74px; top: 3px; } }
html.theme-fetes .barre::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 9px; pointer-events: none;
  background:
    radial-gradient(circle 2.7px at 50% 5.5px, var(--fete-lumiere-1) 0 82%, transparent 100%) 0 0 / 54px 9px repeat-x,
    radial-gradient(circle 2.7px at 50% 5.5px, var(--fete-lumiere-2) 0 82%, transparent 100%) 18px 0 / 54px 9px repeat-x,
    radial-gradient(circle 2.7px at 50% 5.5px, var(--fete-lumiere-3) 0 82%, transparent 100%) 36px 0 / 54px 9px repeat-x,
    radial-gradient(9px 5px at 50% 0, transparent calc(100% - 1.4px), var(--fete-fil) calc(100% - 1.2px), var(--fete-fil) 100%, transparent 100%) 0 0 / 18px 9px repeat-x;
  animation: fete-lumieres 4s ease-in-out infinite alternate;
}
@keyframes fete-lumieres { from { opacity: .7; } to { opacity: 1; } }
.avis-theme { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; max-width: 1180px;
  margin: 16px auto 0; padding: 12px 16px; background: var(--blanc); border: 1px solid var(--ligne); border-left: 4px solid var(--fete-accent-texte, var(--vert)); border-radius: 12px; }
.avis-theme > div:first-child { display: grid; gap: 2px; min-width: 0; flex: 1 1 300px; }
.avis-theme-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1212px) { .avis-theme { margin: 16px 16px 0; } }
.theme-choix { display: flex; align-items: center; gap: 10px; font-weight: 600; min-height: 44px; cursor: pointer; }
.theme-choix input { width: 20px; height: 20px; margin: 0; accent-color: var(--vert); }

/* noel */
html.theme-noel {
  --fete-accent: #d6b25e; --fete-accent-texte: #1d4a35; --fete-actif: rgba(214, 178, 94, .16);
  --fete-lumiere-1: #b0283f; --fete-lumiere-2: #d6b25e; --fete-lumiere-3: #3f8f63; --fete-fil: #b6a77f;
  --fete-dessin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 17C11 13 5 14 2 19c2 .5 2.5 2 2 3.5 2-.5 3.5.5 3.5 2 1.5-1 3-.5 3.5 1 2.5-3 5-5.5 5-8.5z' fill='%233f8f63'/%3E%3Cpath d='M16 17c5-4 11-3 14 2-2 .5-2.5 2-2 3.5-2-.5-3.5.5-3.5 2-1.5-1-3-.5-3.5 1-2.5-3-5-5.5-5-8.5z' fill='%23347a54'/%3E%3Cpath d='M16 17 5 21.5M16 17l11 4.5' stroke='%231d4a35' stroke-width='.8' fill='none'/%3E%3Ccircle cx='13.4' cy='14.6' r='3' fill='%23b0283f'/%3E%3Ccircle cx='18.6' cy='14.6' r='3' fill='%23c43a50'/%3E%3Ccircle cx='16' cy='10.8' r='3' fill='%23b0283f'/%3E%3Ccircle cx='15' cy='9.8' r='.9' fill='%23f3c4cc'/%3E%3C/svg%3E");
  --fete-bande-1: #123524;
}
html.theme-noel .barre::before {
  background: radial-gradient(circle 2.2px at 24px 30px, rgba(255, 255, 255, .75) 0 55%, transparent 100%) 0 0 / 220px 220px repeat,
    radial-gradient(circle 1.8px at 132px 74px, rgba(255, 255, 255, .65) 0 55%, transparent 100%) 0 0 / 220px 220px repeat,
    radial-gradient(circle 2.4px at 196px 150px, rgba(255, 255, 255, .7) 0 55%, transparent 100%) 0 0 / 220px 220px repeat,
    radial-gradient(circle 1.6px at 78px 182px, rgba(255, 255, 255, .6) 0 55%, transparent 100%) 0 0 / 220px 220px repeat,
    radial-gradient(circle 1.2px at 40px 20px, rgba(255, 255, 255, .45) 0 55%, transparent 100%) 0 0 / 140px 140px repeat,
    radial-gradient(circle 1px at 110px 64px, rgba(255, 255, 255, .4) 0 55%, transparent 100%) 0 0 / 140px 140px repeat,
    radial-gradient(circle 1.3px at 18px 104px, rgba(255, 255, 255, .45) 0 55%, transparent 100%) 0 0 / 140px 140px repeat,
    radial-gradient(circle 1px at 86px 128px, rgba(255, 255, 255, .35) 0 55%, transparent 100%) 0 0 / 140px 140px repeat,
    linear-gradient(90deg, #123524, #13261c 55%, #123524);
  animation: portail-noel 18s linear infinite;
}
@keyframes portail-noel { 0% { background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0 0; } 50% { background-position: 7px 110px, 7px 110px, 7px 110px, 7px 110px, 7px 70px, 7px 70px, 7px 70px, 7px 70px, 0 0; } 100% { background-position: 0px 220px, 0px 220px, 0px 220px, 0px 220px, 0px 140px, 0px 140px, 0px 140px, 0px 140px, 0 0; } }
html.theme-noel .barre::after {
  bottom: -16px; height: 16px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 16'%3E%3Cpath d='M155 8.6Q159 7.2 162 8.8' stroke='%236b4a36' stroke-width='.5' fill='none'/%3E%3Crect x='143' y='3.4' width='3.6' height='3.2' fill='%233f8f63'/%3E%3Cpath d='M144.8 3.4v3.2M143 5h3.6' stroke='%23d6b25e' stroke-width='.6'/%3E%3Cpath d='M141 6.5h9.5q2.5 0 3.6 2.2l1.4 2.8h-14.5z' fill='%23b0283f'/%3E%3Cpath d='M141.2 8h10.6' stroke='%23d6b25e' stroke-width='.6'/%3E%3Cpath d='M143.5 11.5v1.8M151.5 11.5v1.8' stroke='%23d6b25e' stroke-width='.6'/%3E%3Cpath d='M139.5 13.3h15.5q1.6 0 1.6-1.6' stroke='%23d6b25e' stroke-width='.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M162.6 11l-.8 3M164.4 11.2l.6 2.8M168 11.2l-.6 2.8M169.6 10.8l1 3' stroke='%236b4a36' stroke-width='.8' stroke-linecap='round'/%3E%3Cellipse cx='166' cy='9.2' rx='4.6' ry='2.3' fill='%238a5a3c'/%3E%3Cpath d='M169.4 8.6l2.2-3.4 1.4.6-1.8 3.4z' fill='%238a5a3c'/%3E%3Cellipse cx='173' cy='5' rx='1.9' ry='1.3' fill='%238a5a3c'/%3E%3Ccircle cx='174.9' cy='5.1' r='.65' fill='%23d62b3f'/%3E%3Cpath d='M172 4l-.6-2.6M171.6 2.6l-1.2-.6M172.6 3.8l.4-2.4M172.9 2.4l1-.8' stroke='%236b4a36' stroke-width='.6' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 320px 16px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16'%3E%3Cg fill='%23a9b9ca'%3E%3Ccircle cx='8' cy='3' r='.9'/%3E%3Ccircle cx='30' cy='9' r='.7'/%3E%3Ccircle cx='48' cy='5' r='1'/%3E%3Ccircle cx='20' cy='13' r='.75'/%3E%3Ccircle cx='54' cy='14' r='.6'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 60px 16px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 16'%3E%3Cpath d='M0 13.2Q25 11.2 50 13.2T100 13.2V16H0z' fill='%23eef3f8'/%3E%3Cpath d='M0 13.2Q25 11.2 50 13.2T100 13.2' stroke='%23c3cdd8' stroke-width='.6' fill='none'/%3E%3Cg transform='translate(22 13.4) scale(1) translate(-22 -13.4)'%3E%3Crect x='21.4' y='11.6' width='1.2' height='1.9' fill='%236b4a36'/%3E%3Cpath d='M22 2.6l-3.6 4.6h1.9l-3.4 4.6h10.2l-3.4-4.6h1.9z' fill='%232f6b4a'/%3E%3Cpath d='M22 2.6l-1.4 1.8h2.8zM20.3 7.2l-1 1.3h5.4l-1-1.3z' fill='%23fff'/%3E%3Cpath d='M22 .4l.5 1.1 1.2.1-.9.8.3 1.2-1.1-.6-1.1.6.3-1.2-.9-.8 1.2-.1z' fill='%23d6b25e'/%3E%3C/g%3E%3Cg transform='translate(72 13.4) scale(0.78) translate(-22 -13.4)'%3E%3Crect x='21.4' y='11.6' width='1.2' height='1.9' fill='%236b4a36'/%3E%3Cpath d='M22 2.6l-3.6 4.6h1.9l-3.4 4.6h10.2l-3.4-4.6h1.9z' fill='%232f6b4a'/%3E%3Cpath d='M22 2.6l-1.4 1.8h2.8zM20.3 7.2l-1 1.3h5.4l-1-1.3z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100px 16px repeat-x;
  animation: noel-bande 40s linear infinite;
}

/* halloween */
html.theme-halloween {
  --fete-accent: #f0a15c; --fete-accent-texte: #b5561a; --fete-actif: rgba(240, 161, 92, .16);
  --fete-lumiere-1: #e8772e; --fete-lumiere-2: #8e5bb5; --fete-lumiere-3: #f3d98b; --fete-fil: #8a7a8c;
  --fete-dessin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 9c-.5-2.5.5-4.5 2.5-5.5' stroke='%234d7a3a' stroke-width='2.2' stroke-linecap='round' fill='none'/%3E%3Cpath d='M18 6.5c2-1.5 4.5-1 5.5.5-2 .5-3.5.5-5.5-.5z' fill='%235e9a47'/%3E%3Cellipse cx='10.5' cy='19' rx='7' ry='9' fill='%23d9661f'/%3E%3Cellipse cx='21.5' cy='19' rx='7' ry='9' fill='%23d9661f'/%3E%3Cellipse cx='16' cy='19' rx='6.5' ry='9.5' fill='%23ee8433'/%3E%3Cpath d='M16 10.5v17' stroke='%23c4581a' stroke-width='.9' fill='none'/%3E%3Cpath d='M12.5 17l2 2.2h-4zM19.5 17l2 2.2h-4zM11.5 23c2.5 1.8 6.5 1.8 9 0l-1.5.4-1 1-1-1-1 1-1-1-1 1-1-1z' fill='%233a1d0e'/%3E%3C/svg%3E");
  --fete-bande-1: #2b1a3a;
}
html.theme-halloween .barre::before {
  background: radial-gradient(circle 3px at 30px 40px, rgba(255, 170, 90, .7) 0 30%, rgba(255, 140, 60, .25) 60%, transparent 100%) 0 0 / 240px 240px repeat,
    radial-gradient(circle 2.5px at 160px 110px, rgba(255, 190, 110, .6) 0 30%, rgba(255, 150, 70, .2) 60%, transparent 100%) 0 0 / 240px 240px repeat,
    radial-gradient(circle 3.2px at 96px 200px, rgba(255, 160, 80, .65) 0 30%, rgba(255, 130, 50, .22) 60%, transparent 100%) 0 0 / 240px 240px repeat,
    radial-gradient(circle 1.6px at 60px 30px, rgba(255, 180, 110, .4) 0 40%, transparent 100%) 0 0 / 160px 160px repeat,
    radial-gradient(circle 1.4px at 130px 120px, rgba(255, 200, 140, .35) 0 40%, transparent 100%) 0 0 / 160px 160px repeat,
    radial-gradient(circle 1.5px at 14px 90px, rgba(255, 170, 100, .35) 0 40%, transparent 100%) 0 0 / 160px 160px repeat,
    linear-gradient(90deg, #2b1a3a, #1f1529 55%, #2b1a3a);
  animation: portail-halloween 26s linear infinite;
}
@keyframes portail-halloween { 0% { background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0 0; } 50% { background-position: -6px -120px, -6px -120px, -6px -120px, -6px -80px, -6px -80px, -6px -80px, 0 0; } 100% { background-position: 0px -240px, 0px -240px, 0px -240px, 0px -160px, 0px -160px, 0px -160px, 0 0; } }
html.theme-halloween .barre::after {
  bottom: -16px; height: 16px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 16'%3E%3Cg fill='%232a2230'%3E%3Cpath transform='translate(60 2.6)' d='M0 2C2 0 4 0 5 1.5L6 .6 6.6 1.6H7.4L8 .6 9 1.5C10 0 12 0 14 2 12.5 2 12 3 11.5 4 10.5 3.2 9.5 3.4 9 4.4 8.4 3.8 7.6 3.8 7 5 6.4 3.8 5.6 3.8 5 4.4 4.5 3.4 3.5 3.2 2.5 4 2 3 1.5 2 0 2Z'/%3E%3Cpath transform='translate(196 5.2) scale(.7)' d='M0 2C2 0 4 0 5 1.5L6 .6 6.6 1.6H7.4L8 .6 9 1.5C10 0 12 0 14 2 12.5 2 12 3 11.5 4 10.5 3.2 9.5 3.4 9 4.4 8.4 3.8 7.6 3.8 7 5 6.4 3.8 5.6 3.8 5 4.4 4.5 3.4 3.5 3.2 2.5 4 2 3 1.5 2 0 2Z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 260px 16px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16'%3E%3Cpath d='M0 13Q30 10.5 60 12.6T120 12.2T200 13V16H0z' fill='%238e5bb5' fill-opacity='.16'/%3E%3C/svg%3E") 0 0 / 200px 16px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16'%3E%3Cpath d='M0 13.6Q30 11.8 60 13.6T120 13.6V16H0z' fill='%233a2a45'/%3E%3Cpath d='M20 13.4V8.6a3 3 0 0 1 6 0v4.8z' fill='%238b8794'/%3E%3Cpath d='M23 9v3M21.8 10.1h2.4' stroke='%235d5866' stroke-width='.6'/%3E%3Cpath d='M95 13.2V10.2a2 2 0 0 1 4 0v3z' fill='%2377727f'/%3E%3Cpath d='M75 9.6c0-1 .4-1.6 1.2-2' stroke='%234d7a3a' stroke-width='.9' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='73.4' cy='11.6' rx='2.2' ry='2.1' fill='%23d9661f'/%3E%3Cellipse cx='76.6' cy='11.6' rx='2.2' ry='2.1' fill='%23d9661f'/%3E%3Cellipse cx='75' cy='11.6' rx='2' ry='2.3' fill='%23ee8433'/%3E%3Cellipse cx='108' cy='12.6' rx='1.6' ry='1.3' fill='%23ee8433'/%3E%3C/svg%3E") 0 0 / 120px 16px repeat-x;
  animation: halloween-bande 36s linear infinite;
}

/* stvalentin */
html.theme-stvalentin {
  --fete-accent: #f29bb5; --fete-accent-texte: #b0284f; --fete-actif: rgba(242, 155, 181, .16);
  --fete-dessin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath transform='translate(3.5 5) scale(1.6)' fill='%23d6335a' fill-opacity='1' d='M8 13.5C3.5 10.2.5 7.6.5 4.4.5 2.2 2.2.5 4.3.5c1.5 0 2.9.9 3.7 2.1C8.8 1.4 10.2.5 11.7.5c2.1 0 3.8 1.7 3.8 3.9 0 3.2-3 5.8-7.5 9.1z'/%3E%3Cellipse cx='10.5' cy='10' rx='2' ry='1.4' fill='%23ffd1dc' transform='rotate(-30 10.5 10)'/%3E%3C/svg%3E");
  --fete-bande-1: #3d1526;
}
html.theme-stvalentin .barre::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cpath transform='translate(26 34) scale(0.9)' fill='%23f29bb5' fill-opacity='0.6' d='M8 13.5C3.5 10.2.5 7.6.5 4.4.5 2.2 2.2.5 4.3.5c1.5 0 2.9.9 3.7 2.1C8.8 1.4 10.2.5 11.7.5c2.1 0 3.8 1.7 3.8 3.9 0 3.2-3 5.8-7.5 9.1z'/%3E%3Cpath transform='translate(150 104) scale(0.6)' fill='%23f7b8cb' fill-opacity='0.5' d='M8 13.5C3.5 10.2.5 7.6.5 4.4.5 2.2 2.2.5 4.3.5c1.5 0 2.9.9 3.7 2.1C8.8 1.4 10.2.5 11.7.5c2.1 0 3.8 1.7 3.8 3.9 0 3.2-3 5.8-7.5 9.1z'/%3E%3Cpath transform='translate(92 190) scale(0.75)' fill='%23e7708f' fill-opacity='0.55' d='M8 13.5C3.5 10.2.5 7.6.5 4.4.5 2.2 2.2.5 4.3.5c1.5 0 2.9.9 3.7 2.1C8.8 1.4 10.2.5 11.7.5c2.1 0 3.8 1.7 3.8 3.9 0 3.2-3 5.8-7.5 9.1z'/%3E%3C/svg%3E") 0 0 / 240px 240px repeat,
    linear-gradient(90deg, #3d1526, #26111b 55%, #3d1526);
  animation: portail-stvalentin 30s linear infinite;
}
@keyframes portail-stvalentin { 0% { background-position: 0px 0px, 0 0; } 50% { background-position: -6px -120px, 0 0; } 100% { background-position: 0px -240px, 0 0; } }
html.theme-stvalentin .barre::after {
  bottom: -16px; height: 16px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 16'%3E%3Cpath d='M150 7h26' stroke='%239a2a48' stroke-width='.9'/%3E%3Cpath d='M150 7l-2.6-2.2h3.4l2.2 2.2-2.2 2.2h-3.4z' fill='%23f29bb5'/%3E%3Cpath d='M175.6 4.6l4.6 2.4-4.6 2.4z' fill='%23d6335a'/%3E%3Cpath transform='translate(140 5.4) scale(.22)' fill='%23e7708f' d='M8 13.5C3.5 10.2.5 7.6.5 4.4.5 2.2 2.2.5 4.3.5c1.5 0 2.9.9 3.7 2.1C8.8 1.4 10.2.5 11.7.5c2.1 0 3.8 1.7 3.8 3.9 0 3.2-3 5.8-7.5 9.1z'/%3E%3Cpath transform='translate(133 5.8) scale(.17)' fill='%23e7708f' fill-opacity='.7' d='M8 13.5C3.5 10.2.5 7.6.5 4.4.5 2.2 2.2.5 4.3.5c1.5 0 2.9.9 3.7 2.1C8.8 1.4 10.2.5 11.7.5c2.1 0 3.8 1.7 3.8 3.9 0 3.2-3 5.8-7.5 9.1z'/%3E%3Cpath transform='translate(127.5 6.1) scale(.13)' fill='%23e7708f' fill-opacity='.45' d='M8 13.5C3.5 10.2.5 7.6.5 4.4.5 2.2 2.2.5 4.3.5c1.5 0 2.9.9 3.7 2.1C8.8 1.4 10.2.5 11.7.5c2.1 0 3.8 1.7 3.8 3.9 0 3.2-3 5.8-7.5 9.1z'/%3E%3C/svg%3E") 0 0 / 340px 16px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 16'%3E%3Cpath transform='translate(14 6) scale(.3)' fill='%23f29bb5' fill-opacity='.55' d='M8 13.5C3.5 10.2.5 7.6.5 4.4.5 2.2 2.2.5 4.3.5c1.5 0 2.9.9 3.7 2.1C8.8 1.4 10.2.5 11.7.5c2.1 0 3.8 1.7 3.8 3.9 0 3.2-3 5.8-7.5 9.1z'/%3E%3Cpath transform='translate(58 1) scale(.22)' fill='%23f7b8cb' fill-opacity='.6' d='M8 13.5C3.5 10.2.5 7.6.5 4.4.5 2.2 2.2.5 4.3.5c1.5 0 2.9.9 3.7 2.1C8.8 1.4 10.2.5 11.7.5c2.1 0 3.8 1.7 3.8 3.9 0 3.2-3 5.8-7.5 9.1z'/%3E%3C/svg%3E") 0 0 / 80px 16px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M0 15.4h24' stroke='%23e9b9c8' stroke-width='.7'/%3E%3Cpath transform='translate(8.4 11) scale(.45)' fill='%23d6335a' d='M8 13.5C3.5 10.2.5 7.6.5 4.4.5 2.2 2.2.5 4.3.5c1.5 0 2.9.9 3.7 2.1C8.8 1.4 10.2.5 11.7.5c2.1 0 3.8 1.7 3.8 3.9 0 3.2-3 5.8-7.5 9.1z'/%3E%3C/svg%3E") 0 0 / 24px 16px repeat-x;
  animation: stvalentin-bande 36s linear infinite;
}

/* paques */
html.theme-paques {
  --fete-accent: #a8dcc0; --fete-accent-texte: #2f7a5c; --fete-actif: rgba(168, 220, 192, .16);
  --fete-dessin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3CclipPath id='o'%3E%3Cpath d='M16 3C10.5 3 7 12 7 19c0 5.5 4 9.5 9 9.5s9-4 9-9.5C25 12 21.5 3 16 3z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d='M16 3C10.5 3 7 12 7 19c0 5.5 4 9.5 9 9.5s9-4 9-9.5C25 12 21.5 3 16 3z' fill='%23cdb8ec'/%3E%3Cg clip-path='url(%23o)'%3E%3Cpath d='M5 16l3.7-3 3.7 3 3.6-3 3.7 3 3.7-3 3.6 3v4H5z' fill='%23f7e08f'/%3E%3Cpath d='M5 20h22v1.6H5z' fill='%23f6a9c0'/%3E%3C/g%3E%3Ccircle cx='12.5' cy='24.5' r='1.1' fill='%23fff'/%3E%3Ccircle cx='16' cy='25.5' r='1.1' fill='%23fff'/%3E%3Ccircle cx='19.5' cy='24.5' r='1.1' fill='%23fff'/%3E%3C/svg%3E");
  --fete-bande-1: #1c3b36;
}
html.theme-paques .barre::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cg fill-opacity='0.8'%3E%3Cellipse cx='30' cy='34' rx='4.6' ry='6' transform='rotate(-14 30 34)' fill='%23f6c1d0'/%3E%3Cellipse cx='150' cy='88' rx='4.6' ry='6' transform='rotate(12 150 88)' fill='%23f7e08f'/%3E%3Cellipse cx='196' cy='168' rx='4.6' ry='6' transform='rotate(-8 196 168)' fill='%23cdb8ec'/%3E%3Cellipse cx='80' cy='192' rx='4.6' ry='6' transform='rotate(16 80 192)' fill='%23a8dcc0'/%3E%3C/g%3E%3Cg stroke='%23fff' stroke-width='1.1' stroke-opacity='0.85' fill='none'%3E%3Cpath d='M25.8 35l8.6-2.2'/%3E%3Cpath d='M145.6 87.6l8.8 1.6'/%3E%3Cpath d='M191.6 167.4l8.8 1.2'/%3E%3Cpath d='M75.8 193.4l8.4-2.6'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 220px 220px repeat,
    linear-gradient(90deg, #1c3b36, #172a27 55%, #1c3b36);
  animation: portail-paques 14s cubic-bezier(.3, .7, .4, 1) infinite;
}
@keyframes portail-paques { 0% { background-position: 0px 0px, 0 0; } 10% { background-position: 2px -63px, 0 0; } 16% { background-position: 0px -55px, 0 0; } 25% { background-position: 0px -55px, 0 0; } 35% { background-position: -2px -118px, 0 0; } 41% { background-position: 0px -110px, 0 0; } 50% { background-position: 0px -110px, 0 0; } 60% { background-position: 2px -173px, 0 0; } 66% { background-position: 0px -165px, 0 0; } 75% { background-position: 0px -165px, 0 0; } 85% { background-position: -2px -228px, 0 0; } 91% { background-position: 0px -220px, 0 0; } 100% { background-position: 0px -220px, 0 0; } }
html.theme-paques .nav::after { display: block; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cpath d='M44 22l1.6 4.4 4.4 1.6-4.4 1.6L44 34l-1.6-4.4-4.4-1.6 4.4-1.6z' fill='%23f7e08f'/%3E%3Cpath d='M122 70l1.3 3.7 3.7 1.3-3.7 1.3-1.3 3.7-1.3-3.7-3.7-1.3 3.7-1.3z' fill='%23f6c1d0'/%3E%3Cpath d='M24 118l1.2 3.3 3.3 1.2-3.3 1.2-1.2 3.3-1.2-3.3-3.3-1.2 3.3-1.2z' fill='%23a8dcc0'/%3E%3Cpath d='M98 136l1.4 3.9 3.9 1.4-3.9 1.4-1.4 3.9-1.4-3.9-3.9-1.4 3.9-1.4z' fill='%23cdb8ec'/%3E%3C/svg%3E") 0 0 / 200px 200px repeat; animation: paques-scintille 3.6s ease-in-out infinite alternate; }
html.theme-paques .barre::after {
  bottom: -16px; height: 16px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16'%3E%3Cellipse cx='145.6' cy='13' rx='2.2' ry='1.3' fill='%23b08f6e'/%3E%3Cellipse cx='148' cy='11.4' rx='4.2' ry='3' fill='%23c4a484'/%3E%3Ccircle cx='143.9' cy='10.6' r='1.3' fill='%23fff' stroke='%23d9cbb8' stroke-width='.4'/%3E%3Cellipse cx='151.4' cy='5.8' rx='.95' ry='2.3' transform='rotate(-14 151.4 5.8)' fill='%23c4a484'/%3E%3Cellipse cx='151.4' cy='6' rx='.42' ry='1.6' transform='rotate(-14 151.4 6)' fill='%23f2b8c6'/%3E%3Cellipse cx='153.1' cy='5.9' rx='.95' ry='2.3' transform='rotate(12 153.1 5.9)' fill='%23c4a484'/%3E%3Cellipse cx='153.1' cy='6.1' rx='.42' ry='1.6' transform='rotate(12 153.1 6.1)' fill='%23f2b8c6'/%3E%3Ccircle cx='152.6' cy='9.2' r='2.3' fill='%23c4a484'/%3E%3Ccircle cx='153.5' cy='8.8' r='.45' fill='%233a2a20'/%3E%3Ccircle cx='154.85' cy='9.5' r='.42' fill='%23e88aa0'/%3E%3Cellipse cx='151.2' cy='13.6' rx='1.2' ry='.7' fill='%23b08f6e'/%3E%3C/svg%3E") 0 0 / 300px 16px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 16'%3E%3Cpath d='M0 16V13.8L1 11.4L2 13.8L3 10.6L4 13.8L5 11.7L6 13.8L7 10.2L8 13.8L9 11.1L10 13.8L11 10.8L12 13.8L13 11.6L14 13.8L15 10.4L16 13.8L17 11.4L18 13.8L19 10.6L20 13.8L21 11.7L22 13.8L23 10.2L24 13.8L25 11.1L26 13.8L27 10.8L28 13.8L29 11.6L30 13.8L31 10.4L32 13.8L33 11.4L34 13.8L35 10.6L36 13.8L37 11.7L38 13.8L39 10.2L40 13.8L41 11.1L42 13.8L43 10.8L44 13.8L45 11.6L46 13.8L47 10.4L48 13.8L49 11.4L50 13.8L51 10.6L52 13.8L53 11.7L54 13.8L55 10.2L56 13.8L57 11.1L58 13.8L59 10.8L60 13.8L61 11.6L62 13.8L63 10.4L64 13.8L65 11.4L66 13.8L67 10.6L68 13.8L69 11.7L70 13.8L71 10.2L72 13.8L73 11.1L74 13.8L75 10.8L76 13.8L77 11.6L78 13.8L79 10.4L80 13.8V16z' fill='%239fd3a4'/%3E%3Cellipse cx='20' cy='13' rx='2' ry='2.6' fill='%23f6c1d0'/%3E%3Cpath d='M18.1 12.8h3.8' stroke='%23fff' stroke-width='.8'/%3E%3Cellipse cx='60' cy='13.3' rx='1.8' ry='2.3' fill='%23f7e08f'/%3E%3Cpath d='M58.3 13.6h3.4' stroke='%23fff' stroke-width='.8'/%3E%3Cg transform='translate(40 12.4)'%3E%3Ccircle cx='0' cy='-1.3' r='1' fill='%23fff'/%3E%3Ccircle cx='1.3' cy='0' r='1' fill='%23fff'/%3E%3Ccircle cx='0' cy='1.3' r='1' fill='%23fff'/%3E%3Ccircle cx='-1.3' cy='0' r='1' fill='%23fff'/%3E%3Ccircle r='.8' fill='%23f5c542'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 80px 16px repeat-x;
  animation: paques-bande 30s linear infinite;
}

/* fetenationale */
html.theme-fetenationale {
  --fete-accent: #a9c8ff; --fete-accent-texte: #1f4f9c; --fete-actif: rgba(169, 200, 255, .16);
  --fete-dessin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cpath id='l' d='M16 2C12.5 6 12 11 14.6 16.6H17.4C20 11 19.5 6 16 2ZM14.4 17C10 17 5 15 4.5 10.3 4.3 7.9 6.5 6.7 8.3 7.7 6.5 8.5 6.6 10.9 8.3 12.2 10.2 13.7 12.4 14.9 14.4 15.7ZM17.6 17C22 17 27 15 27.5 10.3 27.7 7.9 25.5 6.7 23.7 7.7 25.5 8.5 25.4 10.9 23.7 12.2 21.8 13.7 19.6 14.9 17.6 15.7ZM10.5 16.8H21.5V19.6H10.5ZM14.7 19.6C14.7 22.4 15.2 24.6 16 26.4 16.8 24.6 17.3 22.4 17.3 19.6ZM13.9 19.6C12.6 22 10.6 23.2 8.6 22.8 10.4 22 11.5 21 12.1 19.6ZM18.1 19.6C19.4 22 21.4 23.2 23.4 22.8 21.6 22 20.5 21 19.9 19.6Z'/%3E%3C/defs%3E%3Crect x='3' y='5' width='26' height='22' rx='2' fill='%23205bb5'/%3E%3Cpath d='M15 5h2v22h-2zM3 15h26v2H3z' fill='%23fff'/%3E%3Cg fill='%23fff'%3E%3Cuse href='%23l' transform='translate(5.8 6.8) scale(.2)'/%3E%3Cuse href='%23l' transform='translate(19.8 6.8) scale(.2)'/%3E%3Cuse href='%23l' transform='translate(5.8 18.8) scale(.2)'/%3E%3Cuse href='%23l' transform='translate(19.8 18.8) scale(.2)'/%3E%3C/g%3E%3C/svg%3E");
  --fete-bande-1: #13305f;
}
html.theme-fetenationale .barre::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cdefs%3E%3Cpath id='l' d='M16 2C12.5 6 12 11 14.6 16.6H17.4C20 11 19.5 6 16 2ZM14.4 17C10 17 5 15 4.5 10.3 4.3 7.9 6.5 6.7 8.3 7.7 6.5 8.5 6.6 10.9 8.3 12.2 10.2 13.7 12.4 14.9 14.4 15.7ZM17.6 17C22 17 27 15 27.5 10.3 27.7 7.9 25.5 6.7 23.7 7.7 25.5 8.5 25.4 10.9 23.7 12.2 21.8 13.7 19.6 14.9 17.6 15.7ZM10.5 16.8H21.5V19.6H10.5ZM14.7 19.6C14.7 22.4 15.2 24.6 16 26.4 16.8 24.6 17.3 22.4 17.3 19.6ZM13.9 19.6C12.6 22 10.6 23.2 8.6 22.8 10.4 22 11.5 21 12.1 19.6ZM18.1 19.6C19.4 22 21.4 23.2 23.4 22.8 21.6 22 20.5 21 19.9 19.6Z'/%3E%3C/defs%3E%3Cg fill='%23fff'%3E%3Cuse href='%23l' transform='translate(14 16) scale(.85)' fill-opacity='.4'/%3E%3Cuse href='%23l' transform='translate(146 88) scale(.7)' fill-opacity='.32'/%3E%3Cuse href='%23l' transform='translate(190 168) scale(.8)' fill-opacity='.36'/%3E%3Cuse href='%23l' transform='translate(70 186) scale(.65)' fill-opacity='.3'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 240px 240px repeat,
    linear-gradient(90deg, #13305f, #142645 55%, #13305f);
  animation: portail-fetenationale 26s linear infinite;
}
@keyframes portail-fetenationale { 0% { background-position: 0px 0px, 0 0; } 50% { background-position: -6px -120px, 0 0; } 100% { background-position: 0px -240px, 0 0; } }
html.theme-fetenationale .barre::after {
  bottom: -16px; height: 16px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 16'%3E%3Cdefs%3E%3CclipPath id='d'%3E%3Cpath d='M170.5 1.6q3.3-1.1 6.6 0t6.6 0v8.4q-3.3 1.1-6.6 0t-6.6 0z'/%3E%3C/clipPath%3E%3Cpath id='l' d='M16 2C12.5 6 12 11 14.6 16.6H17.4C20 11 19.5 6 16 2ZM14.4 17C10 17 5 15 4.5 10.3 4.3 7.9 6.5 6.7 8.3 7.7 6.5 8.5 6.6 10.9 8.3 12.2 10.2 13.7 12.4 14.9 14.4 15.7ZM17.6 17C22 17 27 15 27.5 10.3 27.7 7.9 25.5 6.7 23.7 7.7 25.5 8.5 25.4 10.9 23.7 12.2 21.8 13.7 19.6 14.9 17.6 15.7ZM10.5 16.8H21.5V19.6H10.5ZM14.7 19.6C14.7 22.4 15.2 24.6 16 26.4 16.8 24.6 17.3 22.4 17.3 19.6ZM13.9 19.6C12.6 22 10.6 23.2 8.6 22.8 10.4 22 11.5 21 12.1 19.6ZM18.1 19.6C19.4 22 21.4 23.2 23.4 22.8 21.6 22 20.5 21 19.9 19.6Z'/%3E%3C/defs%3E%3Cpath d='M170 1v14.6' stroke='%238a7f6a' stroke-width='.9' stroke-linecap='round'/%3E%3Ccircle cx='170' cy='1' r='.8' fill='%23d6b25e'/%3E%3Cg clip-path='url(%23d)'%3E%3Crect x='170' y='0' width='14' height='11' fill='%23205bb5'/%3E%3Crect x='176.4' y='0' width='1.4' height='11' fill='%23fff'/%3E%3Crect x='170' y='5.1' width='14' height='1.4' fill='%23fff'/%3E%3Cg fill='%23fff'%3E%3Cuse href='%23l' transform='translate(172.2 2.3) scale(.085)'/%3E%3Cuse href='%23l' transform='translate(179.1 2.3) scale(.085)'/%3E%3Cuse href='%23l' transform='translate(172.2 7.2) scale(.085)'/%3E%3Cuse href='%23l' transform='translate(179.1 7.2) scale(.085)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 340px 16px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16'%3E%3Cpath d='M0 11.6Q15 9.2 30 11.6T60 11.6L60 14.2Q45 16.6 30 14.2T0 14.2z' fill='%23205bb5'/%3E%3Cpath d='M0 12.9Q15 10.5 30 12.9T60 12.9' stroke='%23fff' stroke-width='.7' fill='none'/%3E%3C/svg%3E") 0 0 / 60px 16px repeat-x;
  animation: fetenationale-bande 36s linear infinite;
}

/* fetecanada */
html.theme-fetecanada {
  --fete-accent: #ffadad; --fete-accent-texte: #b3261e; --fete-actif: rgba(255, 173, 173, .16);
  --fete-dessin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3l2 5 3-1.5-.5 5.5 4-2.5 1 2.5 3-.5-1.5 4 2 1.5-5.5 4 1 2-7.5-1v7h-2v-7l-7.5 1 1-2-5.5-4 2-1.5-1.5-4 3 .5 1-2.5 4 2.5-.5-5.5 3 1.5z' fill='%23d52b1e'/%3E%3C/svg%3E");
  --fete-bande-1: #4a1614;
}
html.theme-fetecanada .barre::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cdefs%3E%3Cpath id='f' d='M16 3l2 5 3-1.5-.5 5.5 4-2.5 1 2.5 3-.5-1.5 4 2 1.5-5.5 4 1 2-7.5-1v7h-2v-7l-7.5 1 1-2-5.5-4 2-1.5-1.5-4 3 .5 1-2.5 4 2.5-.5-5.5 3 1.5z'/%3E%3C/defs%3E%3Cuse href='%23f' transform='translate(16 18) rotate(-20 16 16) scale(.8)' fill='%23e8564a' fill-opacity='.7'/%3E%3Cuse href='%23f' transform='translate(142 80) rotate(25 16 16) scale(.68)' fill='%23fff' fill-opacity='.42'/%3E%3Cuse href='%23f' transform='translate(180 154) rotate(-35 16 16) scale(.76)' fill='%23e8564a' fill-opacity='.6'/%3E%3Cuse href='%23f' transform='translate(66 178) rotate(15 16 16) scale(.62)' fill='%23fff' fill-opacity='.38'/%3E%3C/svg%3E") 0 0 / 220px 220px repeat,
    linear-gradient(90deg, #4a1614, #301412 55%, #4a1614);
  animation: portail-fetecanada 20s ease-in-out infinite;
}
@keyframes portail-fetecanada { 0% { background-position: 0px 0px, 0 0; } 25% { background-position: 14px 55px, 0 0; } 50% { background-position: -4px 110px, 0 0; } 75% { background-position: 12px 165px, 0 0; } 100% { background-position: 0px 220px, 0 0; } }
html.theme-fetecanada .nav::after { display: block; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 260'%3E%3Cg stroke-linecap='round' stroke-width='1.4'%3E%3Cg stroke='%23ff8a7a' transform='translate(50 56) scale(1.7)'%3E%3Cpath d='M0-6v-6M0 6v6M-6 0h-6M6 0h6M-4.2-4.2l-4 -4M4.2 4.2l4 4M-4.2 4.2l-4 4M4.2-4.2l4-4'/%3E%3C/g%3E%3Cg stroke='%23fff' stroke-opacity='.85' transform='translate(128 176) scale(1.5)'%3E%3Cpath d='M0-5v-5M0 5v5M-5 0h-5M5 0h5M-3.5-3.5l-3.4-3.4M3.5 3.5l3.4 3.4M-3.5 3.5l-3.4 3.4M3.5-3.5l3.4-3.4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 180px 260px repeat; animation: fetecanada-artifice 5s ease-out infinite; }
html.theme-fetecanada .barre::after {
  bottom: -16px; height: 16px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16'%3E%3Cpath transform='translate(40 5.6) rotate(-20) scale(.3) translate(-16 -16)' fill='%23d52b1e' d='M16 3l2 5 3-1.5-.5 5.5 4-2.5 1 2.5 3-.5-1.5 4 2 1.5-5.5 4 1 2-7.5-1v7h-2v-7l-7.5 1 1-2-5.5-4 2-1.5-1.5-4 3 .5 1-2.5 4 2.5-.5-5.5 3 1.5z'/%3E%3Cpath transform='translate(130 10.4) rotate(25) scale(.22) translate(-16 -16)' fill='%23e8564a' d='M16 3l2 5 3-1.5-.5 5.5 4-2.5 1 2.5 3-.5-1.5 4 2 1.5-5.5 4 1 2-7.5-1v7h-2v-7l-7.5 1 1-2-5.5-4 2-1.5-1.5-4 3 .5 1-2.5 4 2.5-.5-5.5 3 1.5z'/%3E%3Cpath transform='translate(200 7.4) rotate(-40) scale(.26) translate(-16 -16)' fill='%23d52b1e' fill-opacity='.85' d='M16 3l2 5 3-1.5-.5 5.5 4-2.5 1 2.5 3-.5-1.5 4 2 1.5-5.5 4 1 2-7.5-1v7h-2v-7l-7.5 1 1-2-5.5-4 2-1.5-1.5-4 3 .5 1-2.5 4 2.5-.5-5.5 3 1.5z'/%3E%3C/svg%3E") 0 0 / 240px 16px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath d='M0 .6h40' stroke='%23b09a98' stroke-width='.7'/%3E%3Cpath d='M13 .6a7 7 0 0 0 14 0z' fill='%23d52b1e'/%3E%3Cpath d='M15.4 .6a4.6 4.6 0 0 0 9.2 0z' fill='%23fff'/%3E%3Cpath d='M17.8 .6a2.2 2.2 0 0 0 4.4 0z' fill='%23d52b1e'/%3E%3Cpath d='M20 .6l-5 4.9M20 .6l-2.2 6.6M20 .6l2.2 6.6M20 .6l5 4.9' stroke='%239e1f16' stroke-opacity='.35' stroke-width='.4'/%3E%3C/svg%3E") 0 0 / 40px 16px repeat-x;
  animation: fetecanada-bande 32s linear infinite;
}

/* ete */
html.theme-ete {
  --fete-accent: #ffd27a; --fete-accent-texte: #8a5200; --fete-actif: rgba(255, 210, 122, .16);
  --fete-dessin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg stroke='%23f5b301' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M16 2.5v3.5M16 26v3.5M2.5 16H6M26 16h3.5M6.5 6.5 9 9M23 23l2.5 2.5M6.5 25.5 9 23M23 9l2.5-2.5'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='7' fill='%23ffc94a'/%3E%3Ccircle cx='13.6' cy='13.6' r='2' fill='%23ffe9a8'/%3E%3C/svg%3E");
  --fete-bande-1: #0f3d47;
}
html.theme-ete .barre::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 150'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M0 40Q15 30 30 40T60 40T90 40T120 40' stroke='%2366d0d0' stroke-opacity='.28' stroke-width='2'/%3E%3Cpath d='M0 80Q15 70 30 80T60 80T90 80T120 80' stroke='%2366d0d0' stroke-opacity='.38' stroke-width='2.2'/%3E%3Cpath d='M0 120Q15 110 30 120T60 120T90 120T120 120' stroke='%2366d0d0' stroke-opacity='.5' stroke-width='2.4'/%3E%3C/g%3E%3C/svg%3E") 0 -90px / 120px 150px repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='%23ffe9a8'%3E%3Ccircle cx='34' cy='40' r='2.6' fill-opacity='.7'/%3E%3Ccircle cx='150' cy='96' r='2' fill-opacity='.55'/%3E%3Ccircle cx='96' cy='170' r='2.3' fill-opacity='.65'/%3E%3Ccircle cx='178' cy='18' r='1.6' fill-opacity='.5'/%3E%3Ccircle cx='60' cy='120' r='1.5' fill-opacity='.45'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 200px 200px repeat,
    linear-gradient(90deg, #0f3d47, #12303a 55%, #0f3d47);
  animation: portail-ete 9s linear infinite;
}
@keyframes portail-ete { 0% { background-position: 0px -90px, 0px 0px, 0 0; } 50% { background-position: -60px -90px, -6px -100px, 0 0; } 100% { background-position: -120px -90px, 0px -200px, 0 0; } }
html.theme-ete .barre::after {
  bottom: -16px; height: 16px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 16'%3E%3Cpath d='M128 .8v11.4' stroke='%238a7f6a' stroke-width='.9'/%3E%3Cpath d='M128.7 1.2 136 11.4h-7.3z' fill='%23fff' stroke='%23a9a08a' stroke-width='.6'/%3E%3Cpath d='M127.3 3 121.6 11.4h5.7z' fill='%23ffc94a'/%3E%3Cpath d='M119 12.2h19.6l-3 3.2h-13.6z' fill='%23e07a5f'/%3E%3C/svg%3E") 0 0 / 260px 16px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath d='M0 12.6Q5 10 10 12.6T20 12.6T30 12.6T40 12.6V16H0z' fill='%233cc0c0' fill-opacity='.55'/%3E%3Cpath d='M0 14.4Q5 12.4 10 14.4T20 14.4T30 14.4T40 14.4' stroke='%23fff' stroke-opacity='.75' stroke-width='.7' fill='none'/%3E%3C/svg%3E") 0 0 / 40px 16px repeat-x;
  animation: ete-mer 40s linear infinite;
}
@keyframes paques-scintille { from { opacity: .1; } to { opacity: .7; } }
@keyframes fetecanada-artifice { 0%, 100% { opacity: 0; } 6% { opacity: .7; } 28% { opacity: 0; } 50% { opacity: 0; } 56% { opacity: .5; } 74% { opacity: 0; } }
@keyframes ete-mer { from { background-position: 0 0, 0 0; } to { background-position: 260px 0, -40px 0; } }
@keyframes noel-bande { 0% { background-position: 0px 0px, 0px 0px, 0px 0px; } 2.5% { background-position: 8px 0px, 2.12px 8px, 0px 0px; } 5% { background-position: 16px 0px, 3px 16px, 0px 0px; } 7.5% { background-position: 24px 0px, 2.12px 24px, 0px 0px; } 10% { background-position: 32px 0px, 0px 32px, 0px 0px; } 12.5% { background-position: 40px 0px, -2.12px 40px, 0px 0px; } 15% { background-position: 48px 0px, -3px 48px, 0px 0px; } 17.5% { background-position: 56px 0px, -2.12px 56px, 0px 0px; } 20% { background-position: 64px 0px, 0px 64px, 0px 0px; } 22.5% { background-position: 72px 0px, 2.12px 72px, 0px 0px; } 25% { background-position: 80px 0px, 3px 80px, 0px 0px; } 27.5% { background-position: 88px 0px, 2.12px 88px, 0px 0px; } 30% { background-position: 96px 0px, 0px 96px, 0px 0px; } 32.5% { background-position: 104px 0px, -2.12px 104px, 0px 0px; } 35% { background-position: 112px 0px, -3px 112px, 0px 0px; } 37.5% { background-position: 120px 0px, -2.12px 120px, 0px 0px; } 40% { background-position: 128px 0px, 0px 128px, 0px 0px; } 42.5% { background-position: 136px 0px, 2.12px 136px, 0px 0px; } 45% { background-position: 144px 0px, 3px 144px, 0px 0px; } 47.5% { background-position: 152px 0px, 2.12px 152px, 0px 0px; } 50% { background-position: 160px 0px, 0px 160px, 0px 0px; } 52.5% { background-position: 168px 0px, -2.12px 168px, 0px 0px; } 55% { background-position: 176px 0px, -3px 176px, 0px 0px; } 57.5% { background-position: 184px 0px, -2.12px 184px, 0px 0px; } 60% { background-position: 192px 0px, 0px 192px, 0px 0px; } 62.5% { background-position: 200px 0px, 2.12px 200px, 0px 0px; } 65% { background-position: 208px 0px, 3px 208px, 0px 0px; } 67.5% { background-position: 216px 0px, 2.12px 216px, 0px 0px; } 70% { background-position: 224px 0px, 0px 224px, 0px 0px; } 72.5% { background-position: 232px 0px, -2.12px 232px, 0px 0px; } 75% { background-position: 240px 0px, -3px 240px, 0px 0px; } 77.5% { background-position: 248px 0px, -2.12px 248px, 0px 0px; } 80% { background-position: 256px 0px, 0px 256px, 0px 0px; } 82.5% { background-position: 264px 0px, 2.12px 264px, 0px 0px; } 85% { background-position: 272px 0px, 3px 272px, 0px 0px; } 87.5% { background-position: 280px 0px, 2.12px 280px, 0px 0px; } 90% { background-position: 288px 0px, 0px 288px, 0px 0px; } 92.5% { background-position: 296px 0px, -2.12px 296px, 0px 0px; } 95% { background-position: 304px 0px, -3px 304px, 0px 0px; } 97.5% { background-position: 312px 0px, -2.12px 312px, 0px 0px; } 100% { background-position: 320px 0px, 0px 320px, 0px 0px; } }
@keyframes halloween-bande { 0% { background-position: 0px 0px, 0px 0px, 0px 0px; } 2.78% { background-position: -14.44px 0.77px, 5.56px 0px, 0px 0px; } 5.56% { background-position: -28.89px -1.18px, 11.11px 0px, 0px 0px; } 8.33% { background-position: -43.33px 1.04px, 16.67px 0px, 0px 0px; } 11.11% { background-position: -57.78px -0.41px, 22.22px 0px, 0px 0px; } 13.89% { background-position: -72.22px -0.41px, 27.78px 0px, 0px 0px; } 16.67% { background-position: -86.67px 1.04px, 33.33px 0px, 0px 0px; } 19.44% { background-position: -101.11px -1.18px, 38.89px 0px, 0px 0px; } 22.22% { background-position: -115.56px 0.77px, 44.44px 0px, 0px 0px; } 25% { background-position: -130px 0px, 50px 0px, 0px 0px; } 27.78% { background-position: -144.44px -0.77px, 55.56px 0px, 0px 0px; } 30.56% { background-position: -158.89px 1.18px, 61.11px 0px, 0px 0px; } 33.33% { background-position: -173.33px -1.04px, 66.67px 0px, 0px 0px; } 36.11% { background-position: -187.78px 0.41px, 72.22px 0px, 0px 0px; } 38.89% { background-position: -202.22px 0.41px, 77.78px 0px, 0px 0px; } 41.67% { background-position: -216.67px -1.04px, 83.33px 0px, 0px 0px; } 44.44% { background-position: -231.11px 1.18px, 88.89px 0px, 0px 0px; } 47.22% { background-position: -245.56px -0.77px, 94.44px 0px, 0px 0px; } 50% { background-position: -260px 0px, 100px 0px, 0px 0px; } 52.78% { background-position: -274.44px 0.77px, 105.56px 0px, 0px 0px; } 55.56% { background-position: -288.89px -1.18px, 111.11px 0px, 0px 0px; } 58.33% { background-position: -303.33px 1.04px, 116.67px 0px, 0px 0px; } 61.11% { background-position: -317.78px -0.41px, 122.22px 0px, 0px 0px; } 63.89% { background-position: -332.22px -0.41px, 127.78px 0px, 0px 0px; } 66.67% { background-position: -346.67px 1.04px, 133.33px 0px, 0px 0px; } 69.44% { background-position: -361.11px -1.18px, 138.89px 0px, 0px 0px; } 72.22% { background-position: -375.56px 0.77px, 144.44px 0px, 0px 0px; } 75% { background-position: -390px 0px, 150px 0px, 0px 0px; } 77.78% { background-position: -404.44px -0.77px, 155.56px 0px, 0px 0px; } 80.56% { background-position: -418.89px 1.18px, 161.11px 0px, 0px 0px; } 83.33% { background-position: -433.33px -1.04px, 166.67px 0px, 0px 0px; } 86.11% { background-position: -447.78px 0.41px, 172.22px 0px, 0px 0px; } 88.89% { background-position: -462.22px 0.41px, 177.78px 0px, 0px 0px; } 91.67% { background-position: -476.67px -1.04px, 183.33px 0px, 0px 0px; } 94.44% { background-position: -491.11px 1.18px, 188.89px 0px, 0px 0px; } 97.22% { background-position: -505.56px -0.77px, 194.44px 0px, 0px 0px; } 100% { background-position: -520px 0px, 200px 0px, 0px 0px; } }
@keyframes stvalentin-bande { 0% { background-position: 0px 0px, 0px 0px, 0px 0px; } 2.78% { background-position: 9.44px 0px, 1.73px -8px, -13.33px 0px; } 5.56% { background-position: 18.89px 0px, 1.73px -16px, -26.67px 0px; } 8.33% { background-position: 28.33px 0px, 0px -24px, -40px 0px; } 11.11% { background-position: 37.78px 0px, -1.73px -32px, -53.33px 0px; } 13.89% { background-position: 47.22px 0px, -1.73px -40px, -66.67px 0px; } 16.67% { background-position: 56.67px 0px, 0px -48px, -80px 0px; } 19.44% { background-position: 66.11px 0px, 1.73px -56px, -93.33px 0px; } 22.22% { background-position: 75.56px 0px, 1.73px -64px, -106.67px 0px; } 25% { background-position: 85px 0px, 0px -72px, -120px 0px; } 27.78% { background-position: 94.44px 0px, -1.73px -80px, -133.33px 0px; } 30.56% { background-position: 103.89px 0px, -1.73px -88px, -146.67px 0px; } 33.33% { background-position: 113.33px 0px, 0px -96px, -160px 0px; } 36.11% { background-position: 122.78px 0px, 1.73px -104px, -173.33px 0px; } 38.89% { background-position: 132.22px 0px, 1.73px -112px, -186.67px 0px; } 41.67% { background-position: 141.67px 0px, 0px -120px, -200px 0px; } 44.44% { background-position: 151.11px 0px, -1.73px -128px, -213.33px 0px; } 47.22% { background-position: 160.56px 0px, -1.73px -136px, -226.67px 0px; } 50% { background-position: 170px 0px, 0px -144px, -240px 0px; } 52.78% { background-position: 179.44px 0px, 1.73px -152px, -253.33px 0px; } 55.56% { background-position: 188.89px 0px, 1.73px -160px, -266.67px 0px; } 58.33% { background-position: 198.33px 0px, 0px -168px, -280px 0px; } 61.11% { background-position: 207.78px 0px, -1.73px -176px, -293.33px 0px; } 63.89% { background-position: 217.22px 0px, -1.73px -184px, -306.67px 0px; } 66.67% { background-position: 226.67px 0px, 0px -192px, -320px 0px; } 69.44% { background-position: 236.11px 0px, 1.73px -200px, -333.33px 0px; } 72.22% { background-position: 245.56px 0px, 1.73px -208px, -346.67px 0px; } 75% { background-position: 255px 0px, 0px -216px, -360px 0px; } 77.78% { background-position: 264.44px 0px, -1.73px -224px, -373.33px 0px; } 80.56% { background-position: 273.89px 0px, -1.73px -232px, -386.67px 0px; } 83.33% { background-position: 283.33px 0px, 0px -240px, -400px 0px; } 86.11% { background-position: 292.78px 0px, 1.73px -248px, -413.33px 0px; } 88.89% { background-position: 302.22px 0px, 1.73px -256px, -426.67px 0px; } 91.67% { background-position: 311.67px 0px, 0px -264px, -440px 0px; } 94.44% { background-position: 321.11px 0px, -1.73px -272px, -453.33px 0px; } 97.22% { background-position: 330.56px 0px, -1.73px -280px, -466.67px 0px; } 100% { background-position: 340px 0px, 0px -288px, -480px 0px; } }
@keyframes paques-bande { 0% { background-position: 0px 0px, 0px 0px; } 1.33% { background-position: 4px -1.76px, 0px 0px; } 2.67% { background-position: 8px -2.85px, 0px 0px; } 4% { background-position: 12px -2.85px, 0px 0px; } 5.33% { background-position: 16px -1.76px, 0px 0px; } 6.67% { background-position: 20px 0px, 0px 0px; } 8% { background-position: 24px -1.76px, 0px 0px; } 9.33% { background-position: 28px -2.85px, 0px 0px; } 10.67% { background-position: 32px -2.85px, 0px 0px; } 12% { background-position: 36px -1.76px, 0px 0px; } 13.33% { background-position: 40px 0px, 0px 0px; } 14.67% { background-position: 44px -1.76px, 0px 0px; } 16% { background-position: 48px -2.85px, 0px 0px; } 17.33% { background-position: 52px -2.85px, 0px 0px; } 18.67% { background-position: 56px -1.76px, 0px 0px; } 20% { background-position: 60px 0px, 0px 0px; } 21.33% { background-position: 64px -1.76px, 0px 0px; } 22.67% { background-position: 68px -2.85px, 0px 0px; } 24% { background-position: 72px -2.85px, 0px 0px; } 25.33% { background-position: 76px -1.76px, 0px 0px; } 26.67% { background-position: 80px 0px, 0px 0px; } 28% { background-position: 84px -1.76px, 0px 0px; } 29.33% { background-position: 88px -2.85px, 0px 0px; } 30.67% { background-position: 92px -2.85px, 0px 0px; } 32% { background-position: 96px -1.76px, 0px 0px; } 33.33% { background-position: 100px 0px, 0px 0px; } 34.67% { background-position: 104px -1.76px, 0px 0px; } 36% { background-position: 108px -2.85px, 0px 0px; } 37.33% { background-position: 112px -2.85px, 0px 0px; } 38.67% { background-position: 116px -1.76px, 0px 0px; } 40% { background-position: 120px 0px, 0px 0px; } 41.33% { background-position: 124px -1.76px, 0px 0px; } 42.67% { background-position: 128px -2.85px, 0px 0px; } 44% { background-position: 132px -2.85px, 0px 0px; } 45.33% { background-position: 136px -1.76px, 0px 0px; } 46.67% { background-position: 140px 0px, 0px 0px; } 48% { background-position: 144px -1.76px, 0px 0px; } 49.33% { background-position: 148px -2.85px, 0px 0px; } 50.67% { background-position: 152px -2.85px, 0px 0px; } 52% { background-position: 156px -1.76px, 0px 0px; } 53.33% { background-position: 160px 0px, 0px 0px; } 54.67% { background-position: 164px -1.76px, 0px 0px; } 56% { background-position: 168px -2.85px, 0px 0px; } 57.33% { background-position: 172px -2.85px, 0px 0px; } 58.67% { background-position: 176px -1.76px, 0px 0px; } 60% { background-position: 180px 0px, 0px 0px; } 61.33% { background-position: 184px -1.76px, 0px 0px; } 62.67% { background-position: 188px -2.85px, 0px 0px; } 64% { background-position: 192px -2.85px, 0px 0px; } 65.33% { background-position: 196px -1.76px, 0px 0px; } 66.67% { background-position: 200px 0px, 0px 0px; } 68% { background-position: 204px -1.76px, 0px 0px; } 69.33% { background-position: 208px -2.85px, 0px 0px; } 70.67% { background-position: 212px -2.85px, 0px 0px; } 72% { background-position: 216px -1.76px, 0px 0px; } 73.33% { background-position: 220px 0px, 0px 0px; } 74.67% { background-position: 224px -1.76px, 0px 0px; } 76% { background-position: 228px -2.85px, 0px 0px; } 77.33% { background-position: 232px -2.85px, 0px 0px; } 78.67% { background-position: 236px -1.76px, 0px 0px; } 80% { background-position: 240px 0px, 0px 0px; } 81.33% { background-position: 244px -1.76px, 0px 0px; } 82.67% { background-position: 248px -2.85px, 0px 0px; } 84% { background-position: 252px -2.85px, 0px 0px; } 85.33% { background-position: 256px -1.76px, 0px 0px; } 86.67% { background-position: 260px 0px, 0px 0px; } 88% { background-position: 264px -1.76px, 0px 0px; } 89.33% { background-position: 268px -2.85px, 0px 0px; } 90.67% { background-position: 272px -2.85px, 0px 0px; } 92% { background-position: 276px -1.76px, 0px 0px; } 93.33% { background-position: 280px 0px, 0px 0px; } 94.67% { background-position: 284px -1.76px, 0px 0px; } 96% { background-position: 288px -2.85px, 0px 0px; } 97.33% { background-position: 292px -2.85px, 0px 0px; } 98.67% { background-position: 296px -1.76px, 0px 0px; } 100% { background-position: 300px 0px, 0px 0px; } }
@keyframes fetenationale-bande { 0% { background-position: 0px 0px, 0px 0px; } 2.78% { background-position: 9.44px 0px, -13.33px 0px; } 5.56% { background-position: 18.89px 0px, -26.67px 0px; } 8.33% { background-position: 28.33px 0px, -40px 0px; } 11.11% { background-position: 37.78px 0px, -53.33px 0px; } 13.89% { background-position: 47.22px 0px, -66.67px 0px; } 16.67% { background-position: 56.67px 0px, -80px 0px; } 19.44% { background-position: 66.11px 0px, -93.33px 0px; } 22.22% { background-position: 75.56px 0px, -106.67px 0px; } 25% { background-position: 85px 0px, -120px 0px; } 27.78% { background-position: 94.44px 0px, -133.33px 0px; } 30.56% { background-position: 103.89px 0px, -146.67px 0px; } 33.33% { background-position: 113.33px 0px, -160px 0px; } 36.11% { background-position: 122.78px 0px, -173.33px 0px; } 38.89% { background-position: 132.22px 0px, -186.67px 0px; } 41.67% { background-position: 141.67px 0px, -200px 0px; } 44.44% { background-position: 151.11px 0px, -213.33px 0px; } 47.22% { background-position: 160.56px 0px, -226.67px 0px; } 50% { background-position: 170px 0px, -240px 0px; } 52.78% { background-position: 179.44px 0px, -253.33px 0px; } 55.56% { background-position: 188.89px 0px, -266.67px 0px; } 58.33% { background-position: 198.33px 0px, -280px 0px; } 61.11% { background-position: 207.78px 0px, -293.33px 0px; } 63.89% { background-position: 217.22px 0px, -306.67px 0px; } 66.67% { background-position: 226.67px 0px, -320px 0px; } 69.44% { background-position: 236.11px 0px, -333.33px 0px; } 72.22% { background-position: 245.56px 0px, -346.67px 0px; } 75% { background-position: 255px 0px, -360px 0px; } 77.78% { background-position: 264.44px 0px, -373.33px 0px; } 80.56% { background-position: 273.89px 0px, -386.67px 0px; } 83.33% { background-position: 283.33px 0px, -400px 0px; } 86.11% { background-position: 292.78px 0px, -413.33px 0px; } 88.89% { background-position: 302.22px 0px, -426.67px 0px; } 91.67% { background-position: 311.67px 0px, -440px 0px; } 94.44% { background-position: 321.11px 0px, -453.33px 0px; } 97.22% { background-position: 330.56px 0px, -466.67px 0px; } 100% { background-position: 340px 0px, -480px 0px; } }
@keyframes fetecanada-bande { 0% { background-position: 0px 0px, 0px 0px; } 3.12% { background-position: 15px 1.5px, 1.41px 0px; } 6.25% { background-position: 30px 0px, 2px 0px; } 9.38% { background-position: 45px -1.5px, 1.41px 0px; } 12.5% { background-position: 60px 0px, 0px 0px; } 15.62% { background-position: 75px 1.5px, -1.41px 0px; } 18.75% { background-position: 90px 0px, -2px 0px; } 21.88% { background-position: 105px -1.5px, -1.41px 0px; } 25% { background-position: 120px 0px, 0px 0px; } 28.12% { background-position: 135px 1.5px, 1.41px 0px; } 31.25% { background-position: 150px 0px, 2px 0px; } 34.38% { background-position: 165px -1.5px, 1.41px 0px; } 37.5% { background-position: 180px 0px, 0px 0px; } 40.62% { background-position: 195px 1.5px, -1.41px 0px; } 43.75% { background-position: 210px 0px, -2px 0px; } 46.88% { background-position: 225px -1.5px, -1.41px 0px; } 50% { background-position: 240px 0px, 0px 0px; } 53.12% { background-position: 255px 1.5px, 1.41px 0px; } 56.25% { background-position: 270px 0px, 2px 0px; } 59.38% { background-position: 285px -1.5px, 1.41px 0px; } 62.5% { background-position: 300px 0px, 0px 0px; } 65.62% { background-position: 315px 1.5px, -1.41px 0px; } 68.75% { background-position: 330px 0px, -2px 0px; } 71.88% { background-position: 345px -1.5px, -1.41px 0px; } 75% { background-position: 360px 0px, 0px 0px; } 78.12% { background-position: 375px 1.5px, 1.41px 0px; } 81.25% { background-position: 390px 0px, 2px 0px; } 84.38% { background-position: 405px -1.5px, 1.41px 0px; } 87.5% { background-position: 420px 0px, 0px 0px; } 90.62% { background-position: 435px 1.5px, -1.41px 0px; } 93.75% { background-position: 450px 0px, -2px 0px; } 96.88% { background-position: 465px -1.5px, -1.41px 0px; } 100% { background-position: 480px 0px, 0px 0px; } }
@media (prefers-reduced-motion: reduce) {
  html.theme-fetes .barre::before, html.theme-fetes .barre::after { animation: none; }
  html.theme-fetes .nav::after { display: none; }
}
@media print {
  html.theme-fetes .barre::before, html.theme-fetes .barre::after, html.theme-fetes .nav::after, html.theme-fetes .barre-haut > a:first-child::after, .avis-theme { display: none !important; }
}