/* ============================================================
   AUREA : contact-encart.css
   Encart de contact permanent et discret (scripts/contact-encart.js), commun aux
   quatre pages. Comble le header a smart-hide : un acces direct a l'agent et au
   formulaire, toujours visible une fois la hero passee.
   - Ordinateur / tablette (>= 1024 px) : pastille compacte en bas a droite, dans
     le langage du header « pose » (ivoire translucide floute, filet, pill).
   - Mobile (< 1024 px) : barre fine en bas, deux boutons de meme largeur.
   Donnees : assets/contact/agent.json. z-index 110 : sous le header (120) et sous
   les overlays (200+). Masque (fondu) pendant loader / intro / hero a l'ecran /
   overlay ouvert / menu mobile : voir le JS (classe .is-shown).
   ============================================================ */

.contact-encart{
  position:fixed; z-index:110;
  opacity:0; visibility:hidden; pointer-events:none;
  font-family:var(--font-body);
  transition:opacity .45s var(--ease-cine), transform .45s var(--ease-cine), visibility 0s linear .45s;
}
.contact-encart.is-shown{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .5s var(--ease-cine), transform .5s var(--ease-cine);
}

/* --- Elements internes --- */
.ce-photo{
  width:40px; height:40px; border-radius:50%; object-fit:cover; display:block; flex:none;
  border:1px solid var(--bronze); box-shadow:0 0 0 2px rgba(152,118,71,.14);
}
.ce-id{ display:flex; flex-direction:column; justify-content:center; min-width:0; line-height:1.25; }
.ce-name{ font-size:12px; font-weight:500; color:var(--ink); letter-spacing:.01em; white-space:nowrap; }
.ce-tel{ font-size:13.5px; font-weight:500; color:var(--ink); letter-spacing:.02em; white-space:nowrap; text-decoration:none; }
.ce-tel:hover{ text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--bronze); }

/* Bouton principal : rempli encre, texte blanc. Fond encre (et non bronze) pour
   garantir >= 4,5:1 quel que soit le fond derriere l'encart : le bronze en aplat
   plafonne a ~4,2:1 avec du blanc (teinte medium), l'encre atteint ~10:1. Repli
   ivoire du .hdr-cta impossible ici (texte sur image sombre echouerait). */
.ce-visite{
  appearance:none; cursor:pointer; white-space:nowrap; text-decoration:none;
  background:var(--encre); color:var(--blanc-pur); border:1px solid var(--encre); border-radius:999px;
  font-family:var(--font-body); font-weight:500; text-transform:uppercase; letter-spacing:.14em; font-size:11px;
  padding:10px 18px;
  transition:background .3s var(--ease-cine), color .3s var(--ease-cine), border-color .3s var(--ease-cine);
}
/* Hover : leger eclaircissement de l'encre (reste >= 7:1 avec le blanc), pas de
   bronze en aplat (plafonne sous 4,5:1). */
.ce-visite:hover{ background:#5f4b36; border-color:#5f4b36; color:var(--blanc-pur); }

/* Bouton secondaire « Appeler » (mobile) : borde, texte encre (lisible sur ivoire). */
.ce-appeler{
  appearance:none; cursor:pointer; white-space:nowrap; text-decoration:none;
  background:rgba(253,251,247,.55); color:var(--ink); border:1px solid var(--line); border-radius:999px;
  font-family:var(--font-body); font-weight:500; text-transform:uppercase; letter-spacing:.14em; font-size:11px;
  padding:10px 18px;
  transition:background .3s var(--ease-cine), color .3s var(--ease-cine), border-color .3s var(--ease-cine);
}
.ce-appeler:hover{ border-color:var(--bronze); background:rgba(152,118,71,.1); color:var(--ink); }

.ce-visite:focus-visible, .ce-appeler:focus-visible, .ce-tel:focus-visible{
  outline:2px solid var(--bronze); outline-offset:2px; border-radius:999px;
}

/* ============ Ordinateur / tablette (>= 1024 px) : pastille bas-droite ============ */
@media (min-width:1024px){
  .contact-encart{
    right:clamp(18px,2vw,32px); bottom:clamp(18px,2.1vh,28px);
    display:flex; align-items:center; gap:12px;
    height:56px; max-width:380px; padding:0 10px;
    background:rgba(253,251,247,.92);
    -webkit-backdrop-filter:blur(14px) saturate(1.08); backdrop-filter:blur(14px) saturate(1.08);
    border:1px solid var(--line); border-radius:999px;
    box-shadow:0 8px 28px rgba(74,59,44,.16);
    transform:translateY(8px);
  }
  .contact-encart.is-shown{ transform:translateY(0); }
  .ce-appeler{ display:none; }
  .ce-visite{ margin-left:2px; }
  /* Pages a parcours : on remonte la pastille au-dessus de la bande de controles
     basse du parcours (.ps-continue en bas a droite, .ps-gauge, etc.). */
  .contact-encart.ce-on-parcours{ bottom:clamp(72px,8vh,92px); }
  /* Point 6a (passe 3) : pendant un chapitre dont la colonne de texte est a DROITE
     (parcours-col--right), la pastille passe en bas a GAUCHE pour ne jamais recouvrir
     le texte de visite ; elle revient a droite ensuite. Signal html.aurea-cover-right
     pose par scripts/parcours-scroll.js (nul des qu'aucun chapitre a droite ne couvre). */
  html.aurea-cover-right .contact-encart{ right:auto; left:clamp(18px,2vw,32px); }
}

/* ============ Mobile (< 1024 px) : barre fine en bas, deux boutons ============ */
@media (max-width:1023px){
  .contact-encart{
    left:0; right:0; bottom:0;
    display:flex; align-items:center; gap:10px;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    background:rgba(253,251,247,.94);
    -webkit-backdrop-filter:blur(14px) saturate(1.08); backdrop-filter:blur(14px) saturate(1.08);
    border-top:1px solid var(--line);
    box-shadow:0 -6px 22px rgba(74,59,44,.12);
    transform:translateY(14px);
  }
  .contact-encart.is-shown{ transform:translateY(0); }
  .ce-photo, .ce-id{ display:none; }
  .ce-visite, .ce-appeler{ flex:1 1 0; min-height:46px; display:inline-flex; align-items:center; justify-content:center; padding:10px 12px; }
  /* Reserve la hauteur de la barre : rien de la page (footer, mentions) ne passe dessous. */
  body{ padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion:reduce){
  .contact-encart{ transition:opacity .2s ease; transform:none !important; }
}