/* ============================================================
   df-accordeon — une liste dont on ne déplie qu'une entrée
   ------------------------------------------------------------
   Le motif de « emailing-v2-accordeon » : six intitulés visibles
   d'un coup, et le texte de celui qu'on lit. Sur une page où la
   même information tenait dans une liste à filets de six
   paragraphes, l'accordéon rend la liste parcourable d'un regard.

   À poser sur un BLOC DE TEXTE contenant une liste à puces, où
   chaque entrée commence par son intitulé en gras :

     <ul>
       <li><b>Segmentez et ciblez vos destinataires</b> Avec les
           listes marketing natives…</li>
       …
     </ul>

   df-accordeon.js assemble le reste : le numéro, le bouton, le
   signe plus et le volet. Sans le script, la liste reste lisible
   telle quelle — intitulé en gras, texte à la suite. C'est le
   même principe que df-onglets et df-jalons : le contenu se tape
   dans le builder, la mécanique vient du système.

   Les couleurs viennent des tokens : posé sur df-gradient ou
   df-marine, l'accordéon suit sans une seule règle en plus.
   ============================================================ */

#top .df .df-accordeon ul{
  margin:40px 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--df-line);
}
#top .df .df-accordeon li{
  margin:0;
  padding:0;
  list-style:none;
  border-bottom:1px solid var(--df-line);
}

/* --- la ligne cliquable --- */
#top .df .df-accordeon__tete{
  display:grid;
  grid-template-columns:52px 1fr 30px;
  gap:24px;
  align-items:center;
  width:100%;
  padding:22px 0;
  text-align:left;
  background:none;
  border:0;
  color:inherit;
  font-family:inherit;
  cursor:pointer;
  transition:padding var(--df-t);
}
#top .df .df-accordeon__tete:hover{ padding-left:8px; }
#top .df .df-accordeon__tete:focus-visible{
  outline:2px solid var(--df-gold-ink);
  outline-offset:3px;
}
#top .df .df-accordeon__n{
  font-family:var(--df-font-ui);
  font-size:var(--df-eyebrow);
  letter-spacing:.14em;
  color:var(--df-gold-ink);
}
#top .df .df-accordeon__titre{
  font-size:clamp(17px, 1.9vw, 21px);
  line-height:1.25;
  letter-spacing:-.02em;
  color:var(--df-ink);
}

/* --- le signe plus, qui devient moins --- */
#top .df .df-accordeon__plus{
  position:relative;
  justify-self:end;
  width:26px;
  height:26px;
  border:1px solid var(--df-line);
  border-radius:50%;
  transition:background var(--df-t), border-color var(--df-t);
}
#top .df .df-accordeon__plus::before,
#top .df .df-accordeon__plus::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:var(--df-ink);
  transition:opacity var(--df-t), background var(--df-t);
}
#top .df .df-accordeon__plus::before{
  width:10px; height:1.5px;
  transform:translate(-50%, -50%);
}
#top .df .df-accordeon__plus::after{
  width:1.5px; height:10px;
  transform:translate(-50%, -50%);
}
#top .df .df-accordeon__item.df-est-ouvert .df-accordeon__plus{
  background:var(--df-gold-ink);
  border-color:var(--df-gold-ink);
}
#top .df .df-accordeon__item.df-est-ouvert .df-accordeon__plus::before,
#top .df .df-accordeon__item.df-est-ouvert .df-accordeon__plus::after{
  background:var(--df-ink-fixed);
}
#top .df .df-accordeon__item.df-est-ouvert .df-accordeon__plus::after{ opacity:0; }

/* --- le volet ---
   La hauteur est posée par le script, en pixels : « auto » ne
   s'anime pas. */
#top .df .df-accordeon__corps{
  max-height:0;
  overflow:hidden;
  transition:max-height .45s cubic-bezier(.16, 1, .3, 1);
}
#top .df .df-accordeon__corps p{
  margin:0;
  padding:0 30px 24px 76px;
  max-width:76ch;
  font-size:var(--df-body-lg);
  color:var(--df-ink-2);
}

@media (prefers-reduced-motion:reduce){
  #top .df .df-accordeon__corps{ transition:none; }
}

@media (max-width:700px){
  #top .df .df-accordeon__tete{
    grid-template-columns:40px 1fr 26px;
    gap:14px;
  }
  #top .df .df-accordeon__corps p{ padding:0 0 20px 54px; }
}