/* ------------------------------------------------------------------
   Popup "site de démonstration"
   TAPAT est une vitrine d'exemple : aucun formulaire n'envoie quoi que
   ce soit, aucun lien tel:/mailto: ni aucun bouton de commande ne mène
   réellement quelque part. On l'explique via cette popup plutôt que de
   laisser le navigateur tenter une action qui n'aboutira pas.
   Les variables de couleur viennent du :root de chaque page.
   ------------------------------------------------------------------ */

.modale-demo{
  border:none;
  padding:0;
  /* Le reset `*{margin:0}` des pages annule le margin:auto natif du <dialog>,
     qui est ce qui le centre a l'ecran : on le remet explicitement. */
  margin:auto;
  max-width:470px;
  width:calc(100% - 36px);
  background:var(--blanc,#fff);
  color:var(--brun,#390F11);
  border-radius:22px;
  box-shadow:0 30px 70px rgba(57,15,17,0.32);
}
.modale-demo::backdrop{background:rgba(57,15,17,0.62);}
.modale-demo-corps{padding:34px 34px 30px;}
.modale-demo-icone{
  width:54px;height:54px;border-radius:50%;
  background:var(--dore,#E4B644);
  display:flex;align-items:center;justify-content:center;
  font-size:27px;line-height:1;margin-bottom:18px;
}
.modale-demo h3{
  font-family:'Bebas Neue',sans-serif;font-weight:400;
  font-size:30px;letter-spacing:1px;line-height:1.05;
  color:var(--brun,#390F11);margin-bottom:10px;
}
.modale-demo p{font-size:19px;line-height:1.55;color:#6b6460;}
.modale-demo-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}
.modale-demo-actions > *{
  text-align:center;
  font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:2px;
  border:2px solid transparent;border-radius:30px;padding:14px 24px;
  cursor:pointer;transition:0.2s;
}
.modale-demo-actions > *:focus-visible{outline:3px solid var(--dore,#E4B644);outline-offset:2px;}
.md-fermer{flex:0 0 auto;background:var(--fond,#F8F9F9);border-color:#ece4d3;color:var(--brun,#390F11);}
.md-fermer:hover{background:#efe7d6;}
.md-lien{flex:1 1 auto;background:var(--rouge,#D41E1B);color:#fff;text-decoration:none;}
.md-lien:hover{background:var(--dore,#E4B644);color:var(--brun,#390F11);}

@media(max-width:480px){
  .modale-demo-corps{padding:26px 24px 24px;}
  .modale-demo-actions > *{flex:1 1 100%;}
}