/* ==========================================================================
   Maxelik, encart « notre façon de construire » (classes bd-), commun aux pages de création de site
   Jauge PageSpeed Insights + quatre engagements : WordPress, sur mesure, extensions au minimum, sécurité
   ========================================================================== */
.bd-s{position:relative;isolation:isolate;overflow:clip;background:linear-gradient(135deg,#0b2a4d 0%,#111c26 60%,#0d151b 100%);color:#c8d3d9}
.bd-s::after{content:"";position:absolute;z-index:-1;right:-6%;bottom:-18%;width:min(520px,42vw);aspect-ratio:1;background:url("img/maxelik-symbole.svg") no-repeat center/contain;opacity:.06;filter:brightness(3)}
.bd-head{display:grid;gap:14px;margin-bottom:clamp(28px,3.5vw,44px)}
.bd-head h2{color:#fff}
.bd-head p{font-size:1.04rem;color:#cbd6dc}
.bd{display:grid;grid-template-columns:minmax(240px,.55fr) minmax(0,1.45fr);gap:clamp(24px,3.5vw,56px);align-items:center}
.bd-score{display:grid;justify-items:center;gap:14px;padding:28px 22px;border-radius:var(--r);background:#fff;color:var(--ink-2);text-align:center;box-shadow:0 50px 90px -50px rgba(0,0,0,.9)}
.bd-gauge{position:relative;width:150px;aspect-ratio:1}
.bd-gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.bd-gauge circle{fill:none;stroke-width:9}
.bd-gauge .t{stroke:#e3f3e8}
.bd-gauge .v{stroke:#0cce6b;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:283;transition:stroke-dashoffset 1.4s var(--ease)}
.is-in .bd-gauge .v,.bd-score.is-in .bd-gauge .v{stroke-dashoffset:17}
html:not(.js) .bd-gauge .v{stroke-dashoffset:17}
.bd-gauge b{position:absolute;inset:0;display:grid;place-items:center;font-size:2.4rem;font-weight:900;color:#0a8a46}
.bd-score p{font-size:.86rem;line-height:1.45}
.bd-score strong{display:block;font-size:1rem;color:var(--slate)}
.bd-score small{font-size:.74rem;color:var(--gray)}
.bd-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bd-l li{display:block;padding:20px;border-radius:var(--r);background:rgba(255,255,255,.05);font-size:.93rem;line-height:1.55;color:#c8d3d9}
.bd-l li b{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:1.04rem;color:#fff}
.bd-l li b::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat,var(--grad)}
.bd-l a,.bd-n a{color:#7fd8ff;font-weight:800}
.bd-n{margin-top:18px;font-size:.95rem;color:#dbe4e8}
@media (max-width:900px){.bd{grid-template-columns:1fr}.bd-score{justify-self:start;width:min(100%,360px)}}
@media (max-width:560px){.bd-l{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.bd-gauge .v{transition:none;stroke-dashoffset:17}}