/* Conteneur */
.container{ width:100%; max-width:1200px; margin:24px auto; padding:0 16px; }
.layout{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--gap); }
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 22px; box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card:focus-within{ border-color:var(--ring); box-shadow: var(--shadow), 0 0 0 6px var(--ring); }

.text-column{ flex:1 1 560px; min-width:300px; display:flex; flex-direction:column; gap:var(--gap); order:1; }
.text-info{ background: color-mix(in srgb, var(--primary-weak) 65%, var(--surface) 35%); }
.text-info h1, .text-info h2{ margin-top:0; }

/* Typo contenu */
.prose p{ margin:0; font-size: clamp(16px, 1.6vw, 18px); }
.prose p + p{ margin-top:14px; }

/* Sidebar droite (empile plusieurs cartes) */
.sidebar{
  flex:0 0 340px; width:340px; display:flex; flex-direction:column; gap:var(--gap); order:2; align-self:flex-start;
}
.sidebar .card{ width:100%; }
.sidebar .contact{ flex:initial; width:100%; }

@media (max-width:900px){
  .text-column{ flex:1 1 100%; width:100%; order:1; }
  .sidebar{ flex:1 1 100%; width:100%; order:2; }
  .sidebar .card{ width:100%; }
}

/* Carte contact */
.contact{
  min-height:220px;
  display:grid; align-content:start; gap:16px;
  background: color-mix(in srgb, #d1a5ac 42%, var(--surface) 58%);
  border-radius:var(--radius); /* déjà via .card, ici inoffensif si gardé */
}
.contact .title{ margin:0; font-size:20px; }
.person{ display:flex; align-items:center; gap:12px; }

/* Avatar (unique) */
.avatar{
  width:44px; height:44px; border-radius:50%;
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  display:grid; place-items:center;
  font-weight:700; color:white; letter-spacing:.3px;
}

/* Icônes (unique) */
.contact-actions{ display:flex; gap:10px; }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), rgba(0,0,0,0.01));
  box-shadow:var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.icon-btn:hover{ transform: translateY(-2px); }
.icon-btn:focus{ outline:none; border-color:var(--ring); box-shadow: var(--shadow), 0 0 0 6px var(--ring); }
.icon{ width:40px; height:40px; }

/* Bloc social */
.social{ background: color-mix(in srgb, #d1cfa5 42%, var(--surface) 58%); display:grid; gap:12px; }
.social-actions{ display:flex; gap:10px; }


/* Garder les icon-btn en style clair même en dark mode */
@media (prefers-color-scheme: dark){
  .icon-btn{
    /* on force des équivalents du thème clair mais scoping au bouton */
    --surface: #ffffff;
    --border: #e5e7eb;
    --ring: rgba(71,87,230,.35);
    --text: #0f1222;

    background: #ffffff;
    border-color: var(--border);
    box-shadow: 0 10px 25px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
    color: var(--text); /* alimente currentColor de tes SVG (fill/stroke) */
  }
  .icon-btn:focus{
    border-color: var(--ring);
    box-shadow: 0 10px 25px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04), 0 0 0 6px var(--ring);
    outline: none;
  }
}