/* Les quatre besoins en portefeuille (19/10), téléphone seulement : cartes en aplat de couleur empilées comme dans l'app
   Cartes de l'iPhone. Chacune montre son bandeau (icône et nom) ; toucher une carte l'ouvre, les autres se
   referment ; dans la carte ouverte, « Voir le chapitre » emmène au chapitre. Ordinateur et tablette inchangés.
   Pour retirer : supprimer ce fichier, besoins-portefeuille.js et leurs deux lignes dans index.html (le carrousel,
   besoins-carrousel.*, reste disponible : remettre ses deux lignes). */
@media(max-width:759px){
 html .hero .hero-copy .hero-bottom>.hero-points{display:block;margin:0 0 36px;padding:0}
 html.lot2 .hero .hero-copy .hero-points li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 20px;column-gap:14px;align-items:start;margin:0;padding:16px 18px 34px;border:1px solid #2f382d14;border-radius:22px;background:linear-gradient(180deg,#ffffff59 0,#ffffff00 70px) var(--bes-bg);box-shadow:inset 0 1px 0 #ffffffb3,0 -8px 18px -12px #2f382d4d;cursor:pointer}
 html.lot2 .hero .hero-copy .hero-points li+li{margin-top:-20px}
 html.lot2 .hero .hero-copy .hero-points li:last-child{padding-bottom:18px}
 html.lot2 .hero .hero-copy .hero-points li:before,html.lot2 .hero .hero-copy .hero-points li:after{content:none}
 html.lot2 .hero .hero-copy .hero-points li:nth-child(1){--bes-bg:#f1e1cc}
 html.lot2 .hero .hero-copy .hero-points li:nth-child(2){--bes-bg:#e6dfea}
 html.lot2 .hero .hero-copy .hero-points li:nth-child(3){--bes-bg:#2f382d;border-color:#ffffff1f;background:linear-gradient(180deg,#ffffff14 0,#ffffff00 70px) var(--bes-bg);box-shadow:inset 0 1px 0 #ffffff26,0 -8px 18px -12px #0000008c}
 html.lot2 .hero .hero-copy .hero-points li:nth-child(4){--bes-bg:#f4e0d6}

 /* Bandeau : icône, nom en grand, flèche ; la description et le lien se déplient dessous */
 html .hero .hero-copy .hero-points li>.hero-point-icon{grid-column:1;grid-row:1;align-self:start;background:#fffaf2b3;box-shadow:inset 0 0 0 1px #2f382d0f}
 html .hero .hero-copy .hero-points li:nth-child(3)>.hero-point-icon{background:#ffffff1a;box-shadow:inset 0 0 0 1px #ffffff26}
 html .hero .hero-copy .hero-points li>.lot2-need-link{grid-column:2;grid-row:1;font-size:14px;line-height:1.45}
 html .hero .hero-copy .hero-points li>.lot2-need-arrow{grid-column:3;grid-row:1;align-self:start;margin-top:12px;transition:transform .35s cubic-bezier(.2,.75,.2,1)}
 html .hero .hero-copy .hero-points li.bes-open>.lot2-need-arrow{transform:rotate(0)}
 html .hero .hero-copy .hero-points li:not(.bes-open)>.lot2-need-arrow{transform:rotate(-90deg)}
 html .hero .hero-copy .hero-points .lot2-need-link:after{border-radius:24px}
 html .hero .hero-copy .hero-points .lot2-need-link strong{display:block;padding:6px 0 4px;font:500 32px/1 var(--serif);letter-spacing:-.015em}
 html .hero .hero-copy .hero-points .bes-colon{display:none}
 html .hero .hero-copy .hero-points .bes-desc,html .hero .hero-copy .hero-points .bes-go{display:block;max-height:0;opacity:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.75,.2,1),opacity .3s,margin .45s}
 html .hero .hero-copy .hero-points .bes-desc:first-letter{text-transform:uppercase}
 html .hero .hero-copy .hero-points .bes-go{font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
 html .hero .hero-copy .hero-points li.bes-open .bes-desc{max-height:90px;margin-top:6px;opacity:.85}
 html .hero .hero-copy .hero-points li.bes-open .bes-go{max-height:30px;margin-top:10px;opacity:1}
 .no-motion.lot2 .hero .hero-points li *{transition:none!important}
}
@media(max-width:759px) and (prefers-reduced-motion:reduce){.lot2 .hero .hero-points li *{transition:none!important}}
.bes-go{display:none}