/* La page Contact : d'abord les réponses aux demandes fréquentes, ensuite
   « Nous écrire » — l'adresse en entier, à copier ou à ouvrir dans Mail, au
   choix du visiteur. Ni formulaire, ni serveur, ni service tiers. */
.contact{max-width:760px;margin:0 auto}
.contact h1{margin:0;font:300 clamp(38px,6vw,64px)/1.05 var(--rond);letter-spacing:-.018em;color:#fff}
.chapo{margin:14px 0 0;max-width:46ch;color:var(--gris);font-size:18px}
.etiq{display:inline-flex;align-items:center;gap:8px;margin:46px 0 14px;font:600 13px/1 var(--rond);color:var(--or)}
.etiq::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--or);box-shadow:0 0 10px var(--or)}
/* les demandes fréquentes : une liste groupée, comme les Réglages */
.questions{padding:6px 26px;border-radius:26px}
.questions details+details{border-top:1px solid var(--trait)}
.questions summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 0;font:400 19px/1.3 var(--rond);color:#fff}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{content:"+";flex:none;color:var(--or);font:300 24px/1 var(--sys);transition:transform .3s}
.questions details[open] summary::after{transform:rotate(45deg)}
.questions summary:focus-visible{outline:2px solid var(--or);outline-offset:4px;border-radius:8px}
.reponse{padding:0 0 22px;color:rgba(255,255,255,.8);font-size:16.5px;line-height:1.65}
.reponse p{margin:0 0 12px}
.reponse ul{margin:6px 0 0;padding-left:20px}
.reponse li{margin:0 0 10px}
.reponse li::marker{color:var(--or)}
.reponse b{color:#fff;font-weight:600}
.reponse a{color:var(--or);text-underline-offset:3px;text-decoration-color:rgba(232,199,123,.45)}
/* un chemin dans l'app, écrit comme on le voit dans l'app */
.chemin{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 14px}
.chemin span{padding:6px 11px;border-radius:999px;font:500 14px/1 var(--sys);color:#fff;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.18)}
.chemin i{font-style:normal;color:var(--pale)}
/* nous écrire */
.ecrire{margin-top:14px;padding:34px 36px 30px;border-radius:30px}
.ecrire p{margin:0;color:var(--gris);font-size:16.5px}
.adresse{display:block;margin:18px 0 0;font:300 clamp(26px,4.4vw,38px)/1.2 var(--rond);letter-spacing:-.01em;color:#fff;-webkit-user-select:all;user-select:all;overflow-wrap:anywhere}
.boutons{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 24px;border:0;border-radius:999px;cursor:pointer;font:500 16px/1 var(--rond);text-decoration:none;-webkit-tap-highlight-color:transparent}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn.or{background:var(--or);color:#16120c;box-shadow:0 12px 26px -12px rgba(232,190,110,.7)}
.btn.verre-b{color:#fff;background:linear-gradient(140deg,rgba(255,255,255,.16),rgba(255,255,255,.06));box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 .5px rgba(255,255,255,.16)}
.btn:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.btn:active{transform:scale(.98)}
.btn.or.fait{background:#2a3b2c;color:#9be3b0;box-shadow:inset 0 0 0 1px rgba(155,227,176,.45)}
.idee{margin-top:22px!important;font-size:14.5px!important;color:var(--pale)!important}
.idee a{color:var(--or);text-underline-offset:3px;text-decoration-color:rgba(232,199,123,.45)}
.astuce{display:flex;gap:12px;align-items:flex-start;margin-top:26px!important;padding-top:20px;border-top:1px solid var(--trait);font-size:14.5px!important;color:var(--pale)!important}
.astuce svg{flex:none;width:20px;height:20px;margin-top:1px;fill:none;stroke:var(--or);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.astuce b{color:#fff;font-weight:500}
@media (max-width:700px){
  .chapo{font-size:16.5px}
  .questions{padding:4px 20px;border-radius:22px}
  .questions summary{font-size:17.5px;padding:18px 0}
  .ecrire{padding:26px 20px 22px;border-radius:24px}
  .boutons .btn{flex:1 1 100%}
}