.al-scene .al-regle-tel { display: none; }
@media (max-width: 699.98px) {
  .al-scene { --p-ichor-x: 5%; --p-ichor-y: 47%; }
  .al-scene .al-cadre-photo { display: none; }
  .al-scene .al-regle-tel { display: inline-flex; }
  .al-scene .fx-calque > .al-notif { top: calc(17% + var(--i, 0) * 9.5%); }
  .al-scene .p-scene-pied { top: 63%; }
}
.al-scene .fx-calque > .al-regle-tel { opacity: calc(1 - var(--cache)); translate: 0 calc(var(--cache) * .5em); }
html.t-anime .al-scene .fx-calque > .al-regle-tel { transition: --cache calc(.75s * var(--e-t, 1)) cubic-bezier(.3, 1.25, .5, 1); }
.al-scene .al-regle-tel .fx-cloche { width: 1.05em; height: 1.05em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M9 21h6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M9 21h6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

.al-mini-phrase { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.al-mini-phrase span:not(.sr-only) { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 15px; border-radius: var(--dn-r-rond); border: 1px solid #ffffff3d; background: linear-gradient(180deg, #ffffff1c, #ffffff08); box-shadow: inset 0 1px 0 #ffffff1f; color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; }
.al-mini-phrase span:has(img) { padding-left: 4px; }
.al-mini-phrase img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #ececec; }
.al-mini-canaux { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.al-mini-canaux li { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 14px 0 5px; border-radius: var(--dn-r-rond); background: #ffffff08; border: 1px solid #ffffff1f; color: var(--dn-argent-1); font-size: 14px; font-weight: 700; }
.al-mini-canaux i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 600 12px/1 var(--dn-titre); font-style: normal; color: var(--dn-charbon); background: linear-gradient(180deg, #fff, #b9bec4); }
.al-mini-msg { display: flex; align-items: flex-start; gap: 12px; max-width: 420px; margin: 22px 0 0; padding: 14px 16px 14px 14px; border-radius: 20px; background: #1d2024eb; border: 1px solid #ffffff2e; box-shadow: inset 0 1px 0 #ffffff1f, 0 20px 34px -16px #000; font-size: 14px; line-height: 1.45; color: var(--dn-argent-2); }
.al-mini-msg > span:last-child { display: grid; gap: 3px; }
.al-mini-msg b { color: #fff; font-weight: 750; }
.al-mini-msg-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; color: var(--dn-charbon); background: linear-gradient(160deg, #fff 0%, #e3e6e9 30%, #8d9297 50%, #6d7277 58%, #d9dcdf 74%, #fff 100%); }
.al-mini-msg-ic svg { width: 19px; height: 19px; }

.al-insec { white-space: nowrap; }
.al-tete { max-width: 820px; }
.al-chapo { margin: 22px 0 0; max-width: 62ch; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: var(--dn-argent-2); text-wrap: pretty; }

.al-banc { position: relative; isolation: isolate; overflow-anchor: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; gap: clamp(28px, 3.6vw, 64px); margin-top: clamp(32px, 4vw, 52px); padding: clamp(22px, 3vw, 46px); border-radius: 36px; background: radial-gradient(110% 80% at 0% 0%, #1d2025, #0c0d10 56%); box-shadow: inset 0 1px 0 #ffffff1f, 0 0 0 1px #ffffff12, 0 80px 120px -60px #000; }
.al-banc::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: var(--dn-brosse); opacity: .55; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }

.al-compo { position: relative; min-width: 0; }
.al-compo-sur { margin: 0; font: 700 12px/1.2 var(--dn-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--dn-argent-3); }
.al-compo-sur span { font-weight: 600; letter-spacing: .02em; text-transform: none; }
.al-phrase { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 10px; margin: 20px 0 0; font: 600 clamp(23px, 2.1vw, 32px)/1.15 var(--dn-titre); letter-spacing: -.04em; color: var(--dn-argent-2); }
.al-fixe { white-space: nowrap; }
.al-place { display: inline-flex; }
.al-banc[data-genre="sous"] [data-al-part="marche"], .al-banc:not([data-genre="sous"]) [data-al-part="sous"], .al-banc[data-modele="false"] [data-al-part="filtre"] { display: none; }
.al-mot { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 54px; margin: 0; padding: 0 14px 0 20px; border-radius: var(--dn-r-rond); border: 1px solid #ffffff42; color: #fff; font: 750 .74em/1 var(--dn-texte); letter-spacing: -.01em; white-space: nowrap; cursor: pointer;
  background: radial-gradient(120% 150% at 28% 0%, #ffffff2b, transparent 58%), linear-gradient(180deg, #2c3036, #15171b);
  box-shadow: inset 0 1px 0 #ffffff4d, inset 0 -8px 14px #00000073, 0 12px 24px -14px #000; transition: border-color .2s ease, box-shadow .3s ease, scale .3s var(--dn-ressort); }
.al-mot--cible { padding-left: 7px; }
.al-mot:hover { border-color: #ffffff7a; }
.al-mot:active { scale: .97; }
.al-mot[aria-expanded="true"] { border-color: var(--dn-bleui-1); box-shadow: inset 0 1px 0 #ffffff4d, inset 0 -8px 14px #00000073, 0 0 0 3px #7f98bf3d, 0 0 28px -6px #7f98bf80; }
.al-mot:focus-visible { outline: 2px solid var(--dn-bleui-1); outline-offset: 3px; }
.al-mot-v { display: inline-block; }
.al-mot-chev { flex: none; width: 18px; height: 18px; color: var(--dn-argent-3); transition: rotate .35s var(--dn-ressort), color .2s ease; }
.al-mot[aria-expanded="true"] .al-mot-chev { rotate: 180deg; color: var(--dn-bleui-1); }
.al-vign { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #ececec; box-shadow: 0 0 0 1px #ffffff2e; }
.al-med { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; font: 600 14px/1 var(--dn-titre); letter-spacing: -.02em; color: var(--dn-argent-1); text-shadow: 0 1px 0 #000;
  background: radial-gradient(circle at 34% 24%, #ffffff30, transparent 46%), repeating-conic-gradient(from 8deg, #ffffff06 0 3deg, transparent 3deg 6deg), linear-gradient(160deg, #30343a, #121417 72%);
  box-shadow: inset 0 1px 0 #ffffff3d, inset 0 -2px 4px #00000080, 0 0 0 1px #ffffff1f; }
.al-mot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 30%, #ffffff47 48%, transparent 66%) no-repeat; background-size: 240% 100%; background-position: 120% 0; opacity: 0; }
.al-mot.is-change::after { animation: al-eclat-mot .7s var(--dn-levee); }
@keyframes al-eclat-mot { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 1; background-position: -20% 0; } }
.al-banc.is-arme .al-mot { animation: al-arme .62s var(--dn-levee) calc(var(--k, 0) * 70ms); }
@keyframes al-arme { 40% { border-color: #b9cbe6; box-shadow: inset 0 1px 0 #ffffff80, inset 0 -8px 14px #00000073, 0 0 0 3px #7f98bf4d, 0 0 34px -4px #7f98bfa6; } }

.al-menu { position: absolute; z-index: 30; left: var(--al-mx, 0px); top: var(--al-my, 0px); width: min(340px, 100%); max-height: min(380px, 70vh); overflow: auto; overscroll-behavior: contain; padding: 8px; border-radius: 22px; border: 1px solid #ffffff2e; background: linear-gradient(180deg, #1d2025, #111316); box-shadow: 0 40px 70px -24px #000, 0 0 0 1px #00000080, inset 0 1px 0 #ffffff1f; transform-origin: var(--al-mo, 24px) 0; }
.al-menu[hidden] { display: none; }
.al-menu:focus { outline: none; }
html.t-anime .al-menu.is-ouvre { animation: al-menu .32s var(--dn-levee); }
@keyframes al-menu { from { opacity: 0; scale: .94; translate: 0 -6px; } }
.al-menu-titre { margin: 4px 10px 6px; font: 700 12px/1.2 var(--dn-texte); letter-spacing: .1em; text-transform: uppercase; color: var(--dn-argent-3); }
.al-options { display: grid; gap: 2px; }
.al-o { display: grid; grid-template-columns: auto minmax(0, 1fr) 18px; align-items: center; gap: 12px; min-height: 48px; padding: 7px 12px 7px 10px; border-radius: 14px; color: #fff; font: 700 15px/1.2 var(--dn-texte); cursor: pointer; scroll-margin: 8px; }
.al-o:not(:has(.al-o-vis)) { grid-template-columns: minmax(0, 1fr) 18px; padding-left: 14px; }
.al-o small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--dn-argent-3); }
.al-o:hover { background: #ffffff0f; }
.al-o:focus { outline: none; background: #ffffff14; box-shadow: inset 0 0 0 2px var(--dn-bleui-1); }
.al-o[aria-selected="true"] { color: var(--dn-bleui-1); }
.al-o-vis { display: grid; place-items: center; }
.al-o-vis .al-vign, .al-o-vis .al-med { width: 34px; height: 34px; font-size: 12px; }
.al-o-coche { width: 18px; height: 18px; color: var(--dn-bleui-1); opacity: 0; }
.al-o[aria-selected="true"] .al-o-coche { opacity: 1; }

.al-canaux { min-width: 0; margin: clamp(28px, 3vw, 40px) 0 0; padding: 0; border: 0; }
.al-canaux legend { margin-bottom: 14px; padding: 0; font: 700 12px/1.2 var(--dn-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--dn-argent-3); }
.al-rail { --al-i: 1; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px; border-radius: 26px; background: linear-gradient(180deg, #121417f5, #0a0b0df5); box-shadow: inset 0 1px 3px #000000d9, inset 0 0 0 1px #ffffff14, 0 30px 50px -30px #000; }
.al-rail-curseur { position: absolute; left: 6px; top: 6px; bottom: 6px; width: calc((100% - 12px) / 5); border-radius: 20px; translate: calc(var(--al-i) * 100%) 0;
  background: radial-gradient(90% 130% at 30% 0%, #ffffff30, transparent 60%), linear-gradient(180deg, #30343b, #17191d);
  box-shadow: inset 0 1px 0 #ffffff59, inset 0 0 0 1px #b9cbe666, 0 0 26px -6px #7f98bf73, 0 14px 24px -12px #000; }
html.t-anime .al-rail-curseur { transition: translate .6s var(--dn-ressort); }
html:not(.al-pret) .al-rail-curseur { display: none; }
.al-c { position: relative; z-index: 1; display: grid; justify-items: center; align-content: center; gap: 8px; min-width: 0; min-height: 80px; padding: 8px 2px; border-radius: 20px; text-align: center; cursor: pointer; }
.al-c input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.al-c-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; font: 600 14px/1 var(--dn-titre); font-style: normal; color: var(--dn-charbon); background: linear-gradient(180deg, #e9ebee, #8f959c); opacity: .62; transition: opacity .25s ease, scale .35s var(--dn-ressort); }
.al-c-nom { font: 700 13px/1 var(--dn-texte); color: var(--dn-argent-3); transition: color .25s ease; }
.al-c:hover .al-c-nom { color: var(--dn-argent-1); }
.al-c:has(input:checked) .al-c-ic { opacity: 1; background: linear-gradient(180deg, #fff, #b9bec4); scale: 1.06; }
.al-c:has(input:checked) .al-c-nom { color: #fff; }
html:not(.al-pret) .al-c:has(input:checked) { background: #ffffff10; box-shadow: inset 0 0 0 1px #b9cbe666; }
.al-c:has(input:focus-visible) { outline: 2px solid var(--dn-bleui-1); outline-offset: 2px; }

.al-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; }
.al-sonner svg { width: 18px; height: 18px; flex: none; }
.al-sonner:hover svg { animation: al-balance .9s ease; transform-origin: 50% 12%; }
.al-bas-dit { margin: 0; font-size: 13px; font-weight: 600; color: var(--dn-argent-3); }

.al-recoit { position: relative; display: grid; align-content: start; gap: 18px; min-width: 0; padding-top: 34px; }
.al-appareil { position: relative; scroll-margin: 104px 0 20px; border-radius: 28px; background: linear-gradient(180deg, #17191df7, #0d0f12f7); box-shadow: inset 0 1px 0 #ffffff1c, 0 0 0 1px #ffffff17, 0 40px 60px -30px #000; }
.al-ichor { position: absolute; z-index: 4; right: 22px; top: -36px; width: 56px; height: 56px; filter: drop-shadow(0 12px 16px #000c); }
.al-ichor > span { display: block; width: 100%; height: 100%; }
.al-ondes { position: absolute; z-index: 3; right: 50px; top: -8px; width: 0; height: 0; pointer-events: none; }
.al-ondes i { position: absolute; left: -70px; top: -70px; width: 140px; height: 140px; border-radius: 50%; border: 1.5px solid #ffffffa6; opacity: 0; }
.al-cadre { display: none; }
html.al-pret .al-banc[data-canal="email"] .al-cadre--email, html.al-pret .al-banc[data-canal="discord"] .al-cadre--discord,
html.al-pret .al-banc[data-canal="telegram"] .al-cadre--telegram, html.al-pret .al-banc[data-canal="slack"] .al-cadre--slack,
html.al-pret .al-banc[data-canal="webhook"] .al-cadre--webhook,
html:not(.al-pret) .al-banc:has(input[value="email"]:checked) .al-cadre--email, html:not(.al-pret) .al-banc:has(input[value="discord"]:checked) .al-cadre--discord,
html:not(.al-pret) .al-banc:has(input[value="telegram"]:checked) .al-cadre--telegram, html:not(.al-pret) .al-banc:has(input[value="slack"]:checked) .al-cadre--slack,
html:not(.al-pret) .al-banc:has(input[value="webhook"]:checked) .al-cadre--webhook { display: block; }
html.t-anime .al-cadre.is-entre { animation: al-cadre .5s var(--dn-levee); }
@keyframes al-cadre { from { clip-path: inset(0 0 100% 0 round 28px); translate: 0 10px; } to { clip-path: inset(0 0 0 0 round 28px); } }
.al-c-tete { display: flex; align-items: center; gap: 12px; padding: 16px 92px 15px 18px; border-bottom: 1px solid #ffffff12; }
.al-c-tete .al-c-ic { opacity: 1; background: linear-gradient(180deg, #fff, #b9bec4); }
.al-c-tete p { display: grid; gap: 4px; min-width: 0; margin: 0; }
.al-c-tete b { font: 750 15px/1.1 var(--dn-texte); color: #fff; }
.al-c-tete small { font: 650 12.5px/1.1 var(--dn-texte); color: var(--dn-argent-3); }
.al-c-n { display: grid; place-items: center; min-width: 24px; height: 24px; margin-left: auto; padding: 0 7px; border-radius: 12px; font: 750 12px/1 var(--dn-texte); color: var(--dn-charbon); background: #fff; box-shadow: 0 0 16px #ffffff66; }
.al-c-corps { position: relative; display: grid; gap: 12px; padding: 16px 18px 18px; overflow: hidden; border-radius: 0 0 28px 28px; }
.al-msg { position: relative; padding: 14px 16px; border-radius: 18px; background: #ffffff0b; box-shadow: inset 0 0 0 1px #ffffff1c, 0 14px 24px -18px #000; }
.al-texte { display: grid; gap: 5px; margin: 0; font: 600 14.5px/1.45 var(--dn-texte); color: var(--dn-argent-1); overflow-wrap: anywhere; }
.al-l { display: block; }
.al-l--1 { color: #fff; font-weight: 800; }
.al-l--3 { font-size: 13px; color: var(--dn-argent-3); }
.al-vieux { display: grid; gap: 9px; padding: 4px 4px 2px; }
.al-vieux i { height: 9px; border-radius: 5px; background: #ffffff10; }
.al-vieux i:nth-child(1) { width: 62%; } .al-vieux i:nth-child(2) { width: 84%; } .al-vieux i:nth-child(3) { width: 46%; }
.al-mail-l { display: flex; gap: 12px; margin: 0 0 4px; font-size: 13px; color: var(--dn-argent-3); }
.al-mail-l span { width: 44px; flex: none; font-weight: 700; }
.al-mail-l b { color: #fff; font-weight: 750; }
.al-msg--email .al-texte { margin-top: 10px; padding-top: 12px; border-top: 1px solid #ffffff17; }
.al-ref { margin: 10px 0 0; font-size: 12px; font-weight: 600; color: var(--dn-argent-3); overflow-wrap: anywhere; }
.al-auteur { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 800 14px/1 var(--dn-texte); color: #fff; }
.al-av { width: 30px; height: 30px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 25%, #2a2d33, #0b0c0e 70%); box-shadow: inset 0 0 0 1px #ffffff2e; position: relative; }
.al-av::after { content: ""; position: absolute; inset: 7px; background: linear-gradient(160deg, #fff 0%, #e3e6e9 30%, #8d9297 50%, #6d7277 58%, #d9dcdf 74%, #fff 100%); -webkit-mask: url("/shared/dn/logos/favicon-loupe.svg") center / contain no-repeat; mask: url("/shared/dn/logos/favicon-loupe.svg") center / contain no-repeat; }
.al-msg--slack .al-av { border-radius: 9px; }
.al-texte--bloc { padding-left: 13px; border-left: 3px solid #ffffff33; }
.al-msg--telegram { padding: 0; background: none; box-shadow: none; }
.al-bulle { position: relative; max-width: 94%; padding: 12px 15px 13px; border-radius: 20px 20px 20px 6px; background: linear-gradient(180deg, #2a2e34, #202328); box-shadow: inset 0 1px 0 #ffffff17, 0 14px 24px -18px #000; }
.al-bulle-nom { display: block; margin-bottom: 6px; font: 800 13px/1 var(--dn-texte); color: var(--dn-bleui-1); }
.al-msg--webhook { background: #070809; box-shadow: inset 0 0 0 1px #ffffff1f; }
.al-wh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; font-size: 13px; font-weight: 650; color: var(--dn-argent-2); }
.al-wh b { padding: 5px 8px; border-radius: 7px; background: #ffffff1a; font: 700 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #fff; }
.al-json { margin: 12px 0 0; padding: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 500 12.5px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--dn-argent-1); tab-size: 2; }
.al-wh-sig { margin: 12px 0 0; font-size: 12px; font-weight: 650; color: var(--dn-argent-3); }

html.t-anime .al-appareil.is-sonne .al-ondes i { animation: al-onde 1.5s cubic-bezier(.2, .7, .3, 1) both; }
html.t-anime .al-appareil.is-sonne .al-ondes i:nth-child(2) { animation-delay: .18s; }
html.t-anime .al-appareil.is-sonne .al-ondes i:nth-child(3) { animation-delay: .36s; }
@keyframes al-onde { 0% { opacity: .95; scale: .12; } 100% { opacity: 0; scale: 1.5; } }
html.t-anime .al-appareil.is-sonne .al-msg { animation: al-tombe .95s cubic-bezier(.3, 1.3, .5, 1) .12s both; }
@keyframes al-tombe { 0% { translate: 0 calc(-100% - 40px); rotate: -1.2deg; } 62% { translate: 0 5px; rotate: .3deg; } 80% { translate: 0 -2px; rotate: 0deg; } 100% { translate: 0 0; rotate: 0deg; } }
html.t-anime .al-appareil.is-sonne .al-vieux { animation: al-pousse .8s var(--dn-ressort) .32s both; }
@keyframes al-pousse { from { translate: 0 -26px; } }
html.t-anime .al-appareil.is-sonne .al-c-n { animation: al-pastille .7s var(--dn-ressort) .55s both; }
@keyframes al-pastille { 0% { scale: 0; } 60% { scale: 1.3; } 100% { scale: 1; } }
html.t-anime .al-appareil.is-sonne { animation: al-vibre .42s linear .5s; }
@keyframes al-vibre { 0%, 100% { translate: 0 0; } 20% { translate: -3px 0; } 40% { translate: 3px 0; } 60% { translate: -2px 0; } 80% { translate: 2px 0; } }
.al-msg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 35%, #ffffff24 50%, transparent 65%) no-repeat; background-size: 260% 100%; background-position: 130% 0; opacity: 0; }
html.t-anime .al-appareil.is-sonne .al-msg::after { animation: al-reflet 1s var(--dn-levee) 1s; }
@keyframes al-reflet { 0% { opacity: 1; background-position: 130% 0; } 100% { opacity: 1; background-position: -30% 0; } }
html.t-anime .al-banc.is-attente .al-msg, html.t-anime .al-appareil.is-charge .al-msg { visibility: hidden; }
html.t-anime .al-banc.is-attente .al-c-n, html.t-anime .al-appareil.is-charge .al-c-n { scale: 0; }
html.t-anime .al-banc.is-attente .al-rec, html.t-anime .al-rec.is-charge { visibility: hidden; }
@keyframes al-balance { 0%, 100% { rotate: 0deg; } 20% { rotate: 16deg; } 40% { rotate: -12deg; } 60% { rotate: 7deg; } 80% { rotate: -3deg; } }

.al-fonce-sur { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 12px; }
.al-fonce-sur b { font: 600 20px/1.1 var(--dn-titre); letter-spacing: -.035em; color: #fff; }
.al-fonce-sur span { font-size: 13px; font-weight: 650; color: var(--dn-argent-3); }
.al-rec { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 6px 16px; padding: 16px; border-radius: 22px; background: linear-gradient(180deg, #1a1c20, #111316); box-shadow: inset 0 1px 0 #ffffff17, 0 0 0 1px #ffffff14, 0 24px 40px -26px #000; }
.al-rec[data-pepite="true"] { box-shadow: inset 0 1px 0 #ffffff17, 0 0 0 1px #f0c86a33, 0 0 40px -18px var(--dn-or-lueur), 0 24px 40px -26px #000; }
.al-rec-img { position: relative; width: 64px; height: 64px; }
.al-rec-v { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; background: #ececec; }
.al-rec-v.al-med { border-radius: 50%; font-size: 18px; }
.al-pep { position: absolute; right: -7px; bottom: -7px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--dn-or-lumiere); background: #0b0c0e; box-shadow: 0 0 16px -4px var(--dn-or-lueur); }
.al-pep::after { content: ""; position: absolute; inset: 6px; border-radius: 42% 58% 52% 48%; background: radial-gradient(circle at 35% 30%, #fff3cf, var(--dn-or-vif) 40%, var(--dn-or-profond)); }
.al-rec[data-pepite="false"] .al-pep { display: none; }
.al-rec-txt { min-width: 0; }
.al-rec-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.al-rec-badge { padding: 5px 9px; border-radius: var(--dn-r-rond); font: 750 12px/1 var(--dn-texte); color: var(--dn-argent-1); background: #ffffff10; box-shadow: inset 0 0 0 1px #ffffff26; }
.al-rec[data-pepite="true"] .al-rec-badge { color: var(--dn-or-vif); background: #f0c86a14; box-shadow: inset 0 0 0 1px #f0c86a59; }
.al-rec-statut { font-size: 12px; font-weight: 700; color: var(--dn-argent-3); }
.al-rec-statut:empty { display: none; }
.al-rec-titre { margin: 8px 0 0; font: 600 clamp(18px, 1.5vw, 21px)/1.15 var(--dn-titre); letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.al-rec-ecart { margin: 6px 0 0; font-size: 14px; font-weight: 750; color: var(--dn-argent-1); }
.al-rec-details { margin: 4px 0 0; font-size: 13px; color: var(--dn-argent-3); }
.al-rec-lien { grid-column: 2; display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 6px; font-size: 13px; font-weight: 750; color: var(--dn-argent-1); }
.al-rec-lien svg { width: 16px; height: 16px; }
html.t-anime .al-rec.is-monte { animation: al-monte .7s var(--dn-levee) both; }
@keyframes al-monte { from { translate: 0 22px; clip-path: inset(0 0 100% 0 round 22px); } to { clip-path: inset(0 0 0 0 round 22px); } }
html.t-anime .al-rec.is-monte .al-pep { animation: al-pepite 1.1s var(--dn-ressort) .35s both; }
@keyframes al-pepite { 0% { scale: 0; rotate: -40deg; } 60% { scale: 1.25; } 100% { scale: 1; rotate: 0deg; } }
.al-demo { margin-top: 20px; }

.al-obj-calme .al-obj-ic { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px dashed #ffffff47; }
.al-obj-calme .al-obj-ic--sonne { border: 1px solid #ffffff73; color: #fff; background: radial-gradient(circle at 35% 25%, #3a3e45, #121417 72%); box-shadow: 0 0 18px -6px #ffffff80; }
.al-obj-calme .al-obj-ic svg { width: 18px; height: 18px; }
.al-obj-calme .al-obj-sonne { border-color: #ffffff33; background: #ffffff0d; }
.al-obj-calme .p-obj-l b { font-size: 16px; }

@media (max-width: 1099.98px) {
  .al-banc { grid-template-columns: minmax(0, 1fr); }
  .al-recoit { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; gap: 18px; }
  .al-fonce { padding-top: 0; }
}
@media (max-width: 699.98px) {
  .al-banc { padding: 22px 16px 18px; border-radius: 28px; gap: 26px; }
  .al-phrase { gap: 10px 8px; font-size: clamp(20px, 6vw, 24px); }
  .al-mot { min-height: 48px; padding: 0 10px 0 15px; gap: 8px; font-size: 16px; }
  .al-mot--cible { padding-left: 5px; }
  .al-vign, .al-mot .al-med { width: 36px; height: 36px; }
  .al-mot-chev { width: 16px; height: 16px; }
  .al-menu { left: 12px; width: calc(100% - 24px); }
  .al-rail { padding: 5px; border-radius: 22px; }
  .al-rail-curseur { left: 5px; top: 5px; bottom: 5px; width: calc((100% - 10px) / 5); border-radius: 17px; }
  .al-c { min-height: 72px; gap: 7px; padding: 8px 0; }
  .al-c-ic { width: 30px; height: 30px; border-radius: 10px; font-size: 13px; }
  .al-c-nom { font-size: 12px; letter-spacing: -.01em; }
  .al-banc { display: flex; flex-direction: column; align-items: stretch; }
  .al-compo, .al-recoit { display: contents; position: static; }
  .al-compo-sur { order: 1; }
  .al-phrase { order: 2; margin-top: -10px; }
  .al-appareil { order: 3; margin-top: 30px; }
  .al-canaux { order: 4; margin-top: 4px; }
  .al-bas { order: 5; margin-top: -8px; }
  .al-fonce { order: 6; margin-top: 8px; }
  .al-c-tete { padding: 14px 72px 13px 14px; }
  .al-c-corps { padding: 14px; }
  .al-msg { padding: 13px 14px; }
  .al-texte { font-size: 14px; }
  .al-rec { grid-template-columns: 56px minmax(0, 1fr); gap: 6px 14px; padding: 14px; }
  .al-rec-img, .al-rec-v { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .al-sonne, .al-sonne * { transition: none !important; animation: none !important; }
}