/* =====================================================================
   Fix72 Sécurité — aide contre le piratage informatique
   Registre : URGENCE MAÎTRISÉE. Clair, froid, institutionnel.
   On ne joue pas au hacker : on rassure quelqu'un qui a peur.
   Deux fontes auto-hébergées, aucune requête externe.
   ===================================================================== */

@font-face{
  font-family:"Archivo"; src:url("fonts/archivo-latin.woff2") format("woff2-variations");
  font-weight:400 700; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;
}
@font-face{
  font-family:"Inter"; src:url("fonts/inter-latin.woff2") format("woff2-variations");
  font-weight:300 700; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;
}

/* ---------- 1. Tokens ---------- */
:root{
  --papier:#F6F8FA;
  --papier-2:#EBF1F5;
  --encre:#0E1720;
  --encre-2:#586977;
  --bleu:#14465F;          /* accent principal : confiance, institution */
  --bleu-clair:#1C6087;
  --nuit:#0B1B25;          /* bandes sombres */
  --alerte:#B4551A;        /* ambre : le signal, jamais du rouge partout */
  --alerte-fond:#FDF3EA;
  --sain:#1D6B4F;          /* vert : résolu, sain */
  --sain-fond:#EDF6F1;
  --filet:#D8E0E7;
  --filet-fort:#B4C3CE;

  --display:"Archivo","Segoe UI",system-ui,sans-serif;
  --texte:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  --t-micro:.7rem;
  --t-petit:.875rem;
  --t-corps:1.125rem;
  --t-lede:clamp(1.2rem,1.02rem + .8vw,1.5rem);
  --t-h3:clamp(1.15rem,1.02rem + .6vw,1.4rem);
  --t-h2:clamp(1.6rem,1.2rem + 1.9vw,2.6rem);
  --t-h1:clamp(2.1rem,1.5rem + 3.1vw,3.9rem);

  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px;
  --e7:48px; --e8:68px; --e9:96px; --e10:132px;

  --rayon:4px;
  --large:1240px; --mesure:66ch; --entete:66px;
  --duree:.25s; --courbe:cubic-bezier(.2,.7,.3,1);
  --ombre:0 1px 2px #0e172012, 0 10px 24px -16px #0e172026;
}
@media (prefers-color-scheme:dark){
  :root{
    --papier:#0D141A; --papier-2:#131E26; --encre:#E7EEF3; --encre-2:#93A4B1;
    --bleu:#7FC0E3; --bleu-clair:#9BD2F0; --nuit:#070F15;
    --alerte:#E4995C; --alerte-fond:#231910; --sain:#79C8A6; --sain-fond:#10211A;
    --filet:#233039; --filet-fort:#35454F;
    --ombre:0 1px 2px #00000050, 0 10px 24px -16px #00000090;
  }
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--papier); color:var(--encre);
  font-family:var(--texte); font-size:var(--t-corps); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display); margin:0; line-height:1.14; letter-spacing:-.02em; text-wrap:balance}
h1{font-size:var(--t-h1); font-weight:700; line-height:1.06; letter-spacing:-.03em}
h2{font-size:var(--t-h2); font-weight:650}
h3{font-size:var(--t-h3); font-weight:650; letter-spacing:-.01em}
h4{font-size:1.02rem; font-weight:650}
p,ul,ol{margin:0 0 var(--e4)}
p{text-wrap:pretty}
strong{font-weight:650}
img,svg{max-width:100%; height:auto; display:block}
a{color:inherit}
.prose a,.lien{color:var(--bleu-clair); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:var(--filet-fort)}
.prose a:hover,.lien:hover{text-decoration-color:currentColor}
::selection{background:var(--bleu); color:#fff}
:focus-visible{outline:2px solid var(--alerte); outline-offset:3px}
h2,h3,:target{scroll-margin-top:calc(var(--entete) + 56px)}

.wrap{width:100%; max-width:var(--large); margin-inline:auto; padding-inline:var(--e5)}
.prose{max-width:var(--mesure)}
.wrap.prose{max-width:var(--large)}
.wrap.prose > *{max-width:var(--mesure)}
.wrap.prose > .tableau-conteneur,.wrap.prose > .grille,.wrap.prose > .faq{max-width:min(940px,100%)}
.prose h2{margin:var(--e8) 0 var(--e4)}
.prose h3{margin:var(--e6) 0 var(--e3)}
.prose > :first-child{margin-top:0}
.prose h1{margin-bottom:var(--e4)}
.prose li{margin-bottom:var(--e2)}
.prose ul{list-style:none; padding-left:var(--e5)}
.prose ul li{position:relative}
.prose ul li::before{content:""; position:absolute; left:calc(-1 * var(--e5)); top:.65em; width:10px; height:2px; background:var(--bleu)}
.prose ol{padding-left:1.35em}
.prose ol li::marker{color:var(--bleu); font-weight:650}

section{padding-block:var(--e9)}
.serre{padding-block:var(--e8)}
.discret{color:var(--encre-2)}
.petit{font-size:var(--t-petit)}
.centre{text-align:center}
.filet{border:0; border-top:1px solid var(--filet); margin:0}
.label{display:block; font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--bleu-clair); margin-bottom:var(--e3)}
.label-alerte{color:var(--alerte)}
.lede{font-size:var(--t-lede); line-height:1.45; color:var(--encre-2)}
.evitement{position:absolute; left:-9999px; background:var(--bleu); color:#fff; padding:var(--e3) var(--e4); z-index:99}
.evitement:focus{left:var(--e4); top:var(--e2)}

/* ---------- 3. Barre d'urgence (le composant du registre) ---------- */
.urgence{background:var(--nuit); color:#EAF2F7; font-size:var(--t-petit)}
.urgence .wrap{display:flex; flex-wrap:wrap; gap:var(--e3) var(--e5); align-items:center;
  justify-content:center; padding-block:var(--e3); text-align:center}
.urgence b{font-weight:650}
.urgence a{
  color:#fff; font-weight:700; text-decoration:none; white-space:nowrap;
  border-bottom:2px solid var(--alerte); padding-bottom:1px;
}
.urgence a:hover{border-bottom-color:#fff}
.pastille{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--alerte);
  margin-right:var(--e2); animation:battement 2.4s ease-in-out infinite}
@keyframes battement{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- 4. En-tête ---------- */
.entete{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--papier) 92%,transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--filet)}
.entete .wrap{display:flex; align-items:center; gap:var(--e5); min-height:var(--entete)}
.logo{display:flex; align-items:center; gap:var(--e3); flex:0 0 auto; text-decoration:none}
.logo .marque{font-family:var(--display); font-weight:700; font-size:1.06rem; letter-spacing:-.02em; line-height:1.1}
.logo .marque em{font-style:normal; color:var(--bleu-clair)}
.logo .sous{display:block; font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--encre-2)}
.logo svg{width:26px; height:26px; color:var(--bleu); flex:0 0 auto}
.nav{margin-left:auto; display:flex; align-items:center; gap:var(--e5)}
.nav a{font-size:var(--t-petit); color:var(--encre-2); text-decoration:none; padding-block:4px; border-bottom:2px solid transparent}
.nav a:hover{color:var(--encre)}
.nav a[aria-current="page"]{color:var(--encre); border-bottom-color:var(--bleu)}
.burger{display:none; margin-left:auto; background:none; border:1px solid var(--filet-fort); border-radius:var(--rayon);
  font:inherit; font-size:var(--t-petit); padding:var(--e2) var(--e3); color:var(--encre); cursor:pointer}

/* ---------- 5. Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:var(--e3); padding:15px var(--e5);
  font-size:var(--t-petit); font-weight:700; letter-spacing:.02em; border-radius:var(--rayon);
  background:var(--bleu); color:#fff; border:1px solid var(--bleu); text-decoration:none;
  cursor:pointer; min-height:50px; transition:background var(--duree), border-color var(--duree);
}
.btn:hover{background:var(--nuit); border-color:var(--nuit); color:#fff}
.btn-alerte{background:var(--alerte); border-color:var(--alerte)}
.btn-alerte:hover{background:#8F3F0E; border-color:#8F3F0E}
.btn-2{background:transparent; color:var(--encre); border-color:var(--filet-fort)}
.btn-2:hover{background:var(--encre); border-color:var(--encre); color:var(--papier)}
.btn svg{width:17px; height:17px; flex:0 0 auto}
.btns{display:flex; flex-wrap:wrap; gap:var(--e3); align-items:center}
.nav .btn{padding:11px var(--e4); min-height:42px; border-bottom-color:var(--bleu)}

/* ---------- 6. Hero ---------- */
.hero{padding-block:var(--e8) var(--e7)}
.hero h1{max-width:18ch}
.hero .lede{max-width:56ch; margin:var(--e5) 0 var(--e6)}
.hero-preuves{display:flex; flex-wrap:wrap; gap:var(--e3) var(--e6); margin-top:var(--e6);
  padding-top:var(--e5); border-top:1px solid var(--filet); font-size:var(--t-petit); color:var(--encre-2)}
.hero-preuves b{color:var(--encre); font-weight:650}
.hero-preuves span{display:inline-flex; align-items:center; gap:var(--e2)}
.hero-preuves svg{width:15px; height:15px; color:var(--sain)}

/* ---------- 7. Blocs « signes » : le cœur du site ---------- */
.signes{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--filet);
  border:1px solid var(--filet); border-radius:var(--rayon); overflow:hidden}
.signe{background:var(--papier); padding:var(--e5)}
.signe b{display:block; font-family:var(--display); font-weight:650; font-size:1rem; margin-bottom:var(--e2)}
.signe p{margin:0; font-size:var(--t-petit); color:var(--encre-2); line-height:1.6}
.signe .gravite{display:inline-flex; align-items:center; gap:6px; font-size:var(--t-micro);
  letter-spacing:.12em; text-transform:uppercase; font-weight:700; margin-bottom:var(--e3)}
.gravite::before{content:""; width:8px; height:8px; border-radius:2px; background:currentColor}
.g-haute{color:var(--alerte)}
.g-moyenne{color:var(--bleu-clair)}
.g-basse{color:var(--encre-2)}

/* ---------- 8. Gestes d'urgence numérotés ---------- */
.gestes{list-style:none; padding:0; margin:0; counter-reset:g}
.gestes li{counter-increment:g; display:grid; grid-template-columns:54px 1fr; gap:var(--e5);
  padding-block:var(--e5); border-top:1px solid var(--filet); align-items:start}
.gestes li::before{
  content:"0" counter(g); font-family:var(--display); font-weight:700; font-size:1.5rem;
  color:var(--alerte); line-height:1.1; letter-spacing:-.02em;
}
.gestes h3{margin:0 0 var(--e2)}
.gestes p{margin:0; color:var(--encre-2); max-width:62ch}
.gestes p + p{margin-top:var(--e2)}

/* ---------- 9. Encadrés d'état ---------- */
.encadre{border-left:3px solid var(--bleu); background:var(--papier-2);
  padding:var(--e5); margin:var(--e6) 0; border-radius:0 var(--rayon) var(--rayon) 0}
.encadre-alerte{border-left-color:var(--alerte); background:var(--alerte-fond)}
.encadre-sain{border-left-color:var(--sain); background:var(--sain-fond)}
.encadre p:last-child,.encadre ul:last-child{margin-bottom:0}
.encadre .label{margin-bottom:var(--e2)}

/* ---------- 10. Grilles et blocs ---------- */
.grille{display:grid; gap:var(--e6)}
.grille-2{grid-template-columns:repeat(2,1fr)}
.grille-3{grid-template-columns:repeat(3,1fr)}
.grille-4{grid-template-columns:repeat(4,1fr)}
.bloc{border-top:2px solid var(--encre); padding-top:var(--e4)}
.bloc h3{margin:0 0 var(--e2)}
.bloc p{margin:0; font-size:var(--t-petit); color:var(--encre-2); line-height:1.65}
.bloc-lien{display:block; text-decoration:none; border-top-color:var(--bleu)}
.bloc-lien h3{transition:color var(--duree)}
.bloc-lien:hover h3{color:var(--bleu-clair)}
.bloc-lien::after{content:"→"; display:inline-block; margin-top:var(--e3); color:var(--bleu-clair);
  transition:transform var(--duree)}
.bloc-lien:hover::after{transform:translateX(6px)}
.carte{background:var(--papier); border:1px solid var(--filet); border-radius:var(--rayon);
  padding:var(--e5); box-shadow:var(--ombre)}

/* ---------- 11. Bandes ---------- */
.nuit{background:var(--nuit); color:#E7EEF3}
.nuit h1,.nuit h2,.nuit h3{color:#fff}
.nuit p,.nuit .discret{color:color-mix(in srgb,#E7EEF3 74%,var(--nuit))}
.nuit .label{color:var(--alerte)}
.nuit .btn{background:#fff; color:var(--nuit); border-color:#fff}
.nuit .btn:hover{background:var(--alerte); border-color:var(--alerte); color:#fff}
.nuit .btn-2{background:transparent; color:#fff; border-color:color-mix(in srgb,#E7EEF3 34%,transparent)}
.nuit .btn-2:hover{background:#fff; color:var(--nuit)}
.nuit .gestes li{border-top-color:color-mix(in srgb,#E7EEF3 20%,transparent)}
.panneau{background:var(--papier-2)}

/* ---------- 12. Tarifs ---------- */
.tarifs-liste{list-style:none; padding:0; margin:0; border-top:2px solid var(--encre)}
.tarifs-liste li{display:flex; flex-wrap:wrap; gap:var(--e3); justify-content:space-between;
  align-items:baseline; padding:var(--e4) 0; border-bottom:1px solid var(--filet)}
.tarifs-liste .quoi{font-weight:600}
.tarifs-liste .quoi span{display:block; font-weight:400; font-size:var(--t-petit); color:var(--encre-2)}
.tarifs-liste .combien{font-family:var(--display); font-weight:700; font-size:1.3rem;
  font-variant-numeric:tabular-nums; color:var(--bleu); white-space:nowrap}
.tarifs-liste .gratuit{color:var(--sain)}

/* ---------- 13. Tableau ---------- */
.tableau-conteneur{overflow-x:auto; margin:var(--e6) 0}
table{width:100%; border-collapse:collapse; font-size:var(--t-petit); font-variant-numeric:tabular-nums}
caption{text-align:left; font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase;
  color:var(--encre-2); padding-bottom:var(--e3)}
th,td{padding:var(--e3) var(--e4) var(--e3) 0; text-align:left; border-bottom:1px solid var(--filet); vertical-align:top}
thead th{font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--encre-2);
  font-weight:700; border-bottom:2px solid var(--encre)}
td:first-child{font-weight:600}

/* ---------- 14. FAQ ---------- */
.faq{border-top:2px solid var(--encre)}
.faq details{border-bottom:1px solid var(--filet)}
.faq summary{list-style:none; cursor:pointer; padding:var(--e5) 48px var(--e5) 0; position:relative;
  font-family:var(--display); font-weight:650; font-size:var(--t-h3); line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--bleu-clair)}
.faq summary::after,.faq summary::before{content:""; position:absolute; right:8px; top:50%;
  background:var(--bleu-clair); transition:transform var(--duree)}
.faq summary::after{width:15px; height:2px; margin-top:-1px}
.faq summary::before{width:2px; height:15px; margin-top:-7.5px; right:14.5px}
.faq details[open] summary::before{transform:rotate(90deg)}
.faq details > div{padding-bottom:var(--e5); max-width:64ch; color:var(--encre-2)}
.faq details > div p:last-child{margin-bottom:0}

/* ---------- 15. Article ---------- */
.ariane{font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--encre-2); padding-top:var(--e4)}
.ariane ol{list-style:none; display:flex; flex-wrap:wrap; gap:var(--e2); padding:0; margin:0; min-width:0}
.ariane li+li::before{content:"/"; margin-right:var(--e2); color:var(--filet-fort)}
.ariane a{text-decoration:none}
.ariane a:hover{color:var(--bleu-clair)}
.article-entete{padding-block:var(--e7) var(--e5)}
.article-meta{display:flex; flex-wrap:wrap; gap:var(--e4); font-size:var(--t-micro);
  letter-spacing:.1em; text-transform:uppercase; color:var(--encre-2);
  border-top:1px solid var(--filet); padding-top:var(--e4); margin-top:var(--e5)}
.sommaire{border-top:2px solid var(--encre); padding-top:var(--e4); margin-bottom:var(--e7)}
.sommaire ol{margin:0; padding-left:1.25em; font-size:var(--t-petit); columns:2; column-gap:var(--e7)}
.sommaire li{margin-bottom:var(--e2); break-inside:avoid}
.sommaire a{text-decoration:none; color:var(--encre-2)}
.sommaire a:hover{color:var(--bleu-clair)}
.auteur{display:flex; gap:var(--e4); align-items:flex-start; border-top:2px solid var(--encre);
  margin-top:var(--e8); padding-top:var(--e5)}
.auteur .rond{width:52px; height:52px; border-radius:var(--rayon); background:var(--bleu); color:#fff;
  display:grid; place-items:center; font-family:var(--display); font-weight:700; flex:0 0 auto}
.auteur p{margin:0; font-size:var(--t-petit); color:var(--encre-2)}
.auteur b{display:block; font-family:var(--display); font-size:1.02rem; color:var(--encre)}

/* ---------- 16. Formulaire ---------- */
.champ{margin-bottom:var(--e4)}
.champ label{display:block; font-size:var(--t-micro); letter-spacing:.12em; text-transform:uppercase;
  font-weight:700; color:var(--encre-2); margin-bottom:var(--e2)}
.champ input,.champ textarea,.champ select{
  width:100%; font:inherit; font-size:var(--t-petit); padding:12px var(--e3); color:var(--encre);
  background:var(--papier); border:1px solid var(--filet-fort); border-radius:var(--rayon); min-height:48px}
.champ textarea{min-height:130px; resize:vertical}
.champ input:focus,.champ textarea:focus,.champ select:focus{outline:0; border-color:var(--bleu);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--bleu) 14%,transparent)}
.pot-de-miel{position:absolute; left:-9999px}

/* ---------- 17. Pied ---------- */
.pied{border-top:1px solid var(--filet); background:var(--papier-2); padding-block:var(--e7) var(--e5); margin-top:var(--e9)}
.pied-grille{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--e6)}
.pied h4{font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--encre-2);
  font-family:var(--texte); margin-bottom:var(--e3)}
.pied ul{list-style:none; padding:0; margin:0; font-size:var(--t-petit)}
.pied li{margin-bottom:var(--e2)}
.pied a{text-decoration:none; color:var(--encre-2)}
.pied a:hover{color:var(--bleu-clair)}
.pied-bas{border-top:1px solid var(--filet); margin-top:var(--e6); padding-top:var(--e4);
  display:flex; flex-wrap:wrap; gap:var(--e4); justify-content:space-between;
  font-size:var(--t-micro); color:var(--encre-2)}
.tel-geant{font-family:var(--display); font-weight:700; font-size:clamp(2rem,1.2rem + 3.4vw,3.4rem);
  letter-spacing:-.03em; text-decoration:none; white-space:nowrap; font-variant-numeric:tabular-nums;
  display:inline-block}

/* ---------- 18. Responsive ---------- */
@media (max-width:1000px){
  .signes,.grille-3,.grille-4{grid-template-columns:repeat(2,1fr)}
  .pied-grille{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{--e9:64px; --e8:48px}
  body{font-size:1.0625rem}
  .burger{display:block}
  .nav{display:none; position:absolute; top:var(--entete); left:0; right:0; flex-direction:column;
    align-items:stretch; gap:0; background:var(--papier); border-bottom:1px solid var(--filet);
    padding:0 var(--e5) var(--e5)}
  .nav[data-ouvert="oui"]{display:flex}
  .nav a{padding:var(--e4) 0; border-bottom:1px solid var(--filet); font-size:1.05rem}
  .nav .btn{margin-top:var(--e4); justify-content:center}
  .signes,.grille-2,.grille-3,.grille-4{grid-template-columns:1fr}
  .gestes li{grid-template-columns:1fr; gap:var(--e2)}
  .sommaire ol{columns:1}
  .pied-grille{grid-template-columns:1fr; gap:var(--e5)}
  .urgence .wrap{justify-content:flex-start; text-align:left}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}
@media print{
  .urgence,.entete,.nav,.burger,.pied,.btn{display:none!important}
  body{background:#fff; color:#000; font-size:11pt}
  .nuit{background:#fff!important; color:#000!important}
  a::after{content:" (" attr(href) ")"; font-size:9pt; color:#555}
}

/* liens dans une bande sombre : lisibles, soulignés en ambre */
.nuit a{color:#fff; text-decoration:underline; text-decoration-color:var(--alerte); text-underline-offset:3px}
.nuit a:hover{text-decoration-color:#fff}
.nuit .btn,.nuit .btn-2{text-decoration:none}
.hero-preuves b{white-space:nowrap}

/* ---------- 19. Images ---------- */
.figure{margin:var(--e7) 0}
.figure img{width:100%; height:auto; display:block; border-radius:var(--rayon)}
.figure figcaption{font-size:var(--t-micro); letter-spacing:.08em; text-transform:uppercase;
  color:var(--encre-2); margin-top:var(--e3); border-top:1px solid var(--filet); padding-top:var(--e2)}
.texte-image{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--e8); align-items:center}
.texte-image .figure{margin:0}

/* bande-image pleine largeur : la photo passe sous un voile bleu nuit */
.bande-image{
  position:relative; background:var(--nuit); color:#EAF2F7; padding-block:var(--e9);
  background-image:linear-gradient(100deg,#0B1B25F2 0%,#0B1B25E6 42%,#0B1B25A6 68%,#0B1B2566 100%),
    url("../images/bandeau.webp");
  background-size:cover; background-position:center right;
}
.bande-image h2{color:#fff; max-width:20ch}
.bande-image p{color:color-mix(in srgb,#EAF2F7 76%,var(--nuit)); max-width:52ch}
.bande-image .label{color:var(--alerte)}
@media (max-width:760px){
  .bande-image{background-image:linear-gradient(180deg,#0B1B25F4 0%,#0B1B25EA 60%,#0B1B25B0 100%),url("../images/bandeau.webp")}
  .texte-image{grid-template-columns:1fr; gap:var(--e6)}
}

/* vignette d'une carte-lien */
.bloc-lien .vignette{aspect-ratio:3/2; overflow:hidden; margin-bottom:var(--e4); border-radius:var(--rayon); background:var(--papier-2)}
.bloc-lien .vignette img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--courbe)}
.bloc-lien:hover .vignette img{transform:scale(1.03)}
.bande-image{border-bottom:1px solid color-mix(in srgb,#EAF2F7 16%,transparent)}