/* Palette reprise de qualtitude.fr : or #C8AB6A, prune #72023F, framboise #9D163E, gris #788792 */
:root {
  --fond: #faf6ee;
  --carte: rgba(255, 255, 255, 0.72); /* carte translucide sur le fond */
  --voile: rgba(250, 246, 238, 0.55);  /* voile clair qui atténue l'image de fond */
  --texte: #2a1a20;
  --titre: #72023F;
  --discret: #5b6872; /* gris du site assombri pour un contraste lisible */
  --accent: #9D163E;
  --or: #C8AB6A;
  --bordure: #ece3d0;
  --police: Helvetica, Arial, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #1c0b12;
    --carte: rgba(42, 18, 25, 0.78);
    --voile: rgba(28, 11, 18, 0.88);
    --texte: #f3ece2;
    --titre: #e3cf9f;
    --discret: #aeb8bf;
    --accent: #C8AB6A;
    --or: #C8AB6A;
    --bordure: #45242f;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  line-height: 1.6;
}

/* Image de fond fixe (pseudo-élément : plus fiable que background-attachment sur mobile) */
body::before {
  content: "";
  position: fixed;
  inset: -2rem; /* déborde pour que le flou ne laisse pas de bord clair */
  z-index: -1;
  filter: blur(4px);
  background:
    linear-gradient(var(--voile), var(--voile)),
    url("/background.jpg") center / cover no-repeat;
}

.carte {
  width: 100%;
  max-width: 34rem;
  background: var(--carte);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 10px 40px rgba(114, 2, 63, 0.08);
  border: 1px solid var(--bordure);
  border-top: 4px solid var(--or);
  border-radius: 12px;
  padding: 2.5rem 2rem;
}

/* Petit logo en haut de la carte, entrée flottante discrète (CSS seul) */
.logo {
  margin: 0 0 2.5rem;
  animation: logo-flotte 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

.logo img {
  display: block;
  width: 100%;
  max-width: 9rem;
  height: auto;
  margin: 0 auto;
}

/* En mode sombre, un léger halo clair garde le logo (prune et or) lisible */
@media (prefers-color-scheme: dark) {
  .logo img {
    filter: drop-shadow(0 0 0.6rem rgba(250, 246, 238, 0.45));
  }
}

@keyframes logo-flotte {
  0% { opacity: 0; transform: translateY(0.6rem); }
  60% { opacity: 1; transform: translateY(-0.15rem); }
  100% { opacity: 1; transform: none; }
}

/* Apparition douce de la carte (« backwards » : l'animation libère ensuite
   la transformation, pour que l'agrandissement au survol fonctionne) */
.carte {
  animation: contenu-apparition 0.8s ease-out backwards;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

/* Léger agrandissement au survol (souris uniquement) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .carte:hover {
    transform: scale(1.02);
    box-shadow: 0 16px 50px rgba(114, 2, 63, 0.14);
  }
}

@keyframes contenu-apparition {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .logo,
  .carte {
    animation: none;
  }
}

h1 {
  margin: 0;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  line-height: 1.2;
  color: var(--titre);
}

.accueil {
  margin: 0 0 3.5rem;
  text-align: center;
}

.accueil h1,
.accueil p { margin: 0 0 0.5rem; }

/* Bulle de parole, avec sa pointe dirigée vers le nom */
.accueil .bulle {
  position: relative;
  display: inline-block;
  margin: 0 0 1.4rem;
  padding: 0.9rem 1.4rem;
  border-radius: 1.25rem;
  background: rgba(200, 171, 106, 0.16);
  font-size: 1.05rem;
  text-align: left; /* le texte s'écrit de gauche à droite */
}

/* Effet machine à écrire : le texte complet (invisible) réserve la place,
   le texte tapé s'affiche par-dessus */
.bulle.frappe .bulle-texte { opacity: 0; }

.bulle-frappe {
  position: absolute;
  inset: 0;
  padding: inherit;
}

.bulle::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 0.6rem solid transparent;
  border-top-color: rgba(200, 171, 106, 0.16);
  border-bottom: 0;
}

.accueil .signature {
  margin: 0;
  font-weight: 600;
  color: var(--titre);
}

.accueil .fonction {
  margin: 0;
  font-size: 0.9rem;
  color: var(--discret);
}

.coordonnees {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

/* Coordonnées en couleur neutre, soulignement doré discret */
.coordonnees a {
  color: var(--texte);
  text-decoration-color: var(--or);
}

.coordonnees a:hover { color: var(--accent); }

.coordonnees li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

/* Bouton « Copier » réduit à une icône */
.copier {
  display: inline-flex;
  padding: 0.3rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--discret);
  cursor: pointer;
}

.copier svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.copier:hover { color: var(--texte); }

.copier:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.icone-copie,
.copier.copie .icone-copier { display: none; }

.copier.copie .icone-copie { display: block; }

.copier.copie { color: var(--texte); }

/* Message lu par les lecteurs d'écran, invisible à l'écran */
.statut {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

a {
  color: var(--accent);
  text-underline-offset: 3px;
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

footer {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--discret);
}