/* =============================================
   COMPOSANTS — Dark Minimal Tech
   Zéro gradient, zéro glow, zéro décoration.
   Un seul accent autorisé : #0EA5E9.
   ============================================= */

/* ─────────────────────────────────────────────
   NAV
   Fond transparent, border-bottom #2A2A2A,
   logo Syne bold, liens DM Sans.
   ───────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  z-index: var(--z-overlay);
  background:    transparent;                /* fond transparent — spec exacte */
  border-bottom: 1px solid var(--color-border); /* #2A2A2A — jamais plus épais */
  display: flex;
  align-items: center;
  /* Backdrop minimal pour lisibilité sans dégrader la transparence */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-color: rgba(15, 15, 15, 0.85);
}

.nav__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

/* Logo : Syne bold — spec exacte */
.nav__logo {
  font-family:    var(--font-heading);
  font-size:      var(--text-xl);
  font-weight:    700;
  color:          var(--color-text); /* #FFFFFF */
  letter-spacing: -0.02em;
  transition:     color var(--transition);
}
.nav__logo:hover { color: var(--color-accent); }

/* Liens nav : DM Sans, Off White → Pure White au hover */
.nav__links {
  display: flex;
  gap:     var(--space-8);
}

.nav__link {
  font-family: var(--font-body);
  font-size:   var(--text-sm);
  font-weight: 400;
  color:       var(--color-text-body); /* #A3A3A3 — état repos */
  transition:  color var(--transition);
}
.nav__link:hover,
.nav__link--active {
  color: var(--color-text); /* #FFFFFF — spec exacte */
}

/* Burger mobile */
.nav__burger {
  display:    none;
  flex-direction: column;
  gap:        5px;
  background: none;
  border:     none;
  cursor:     pointer;
  padding:    var(--space-2);
}
.nav__burger span {
  display:          block;
  width:            22px;
  height:           1px; /* trait fin — cohérent avec le design minimaliste */
  background:       var(--color-text-body);
  transition:       all var(--transition);
}
.nav__burger:hover span { background: var(--color-text); }

/* Menu mobile */
.nav__mobile {
  position:      fixed;
  top:           var(--nav-height);
  left: 0; right: 0;
  background:    var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding:       var(--space-6) var(--container-pad);
  z-index:       var(--z-overlay);
}
.nav__mobile ul {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
}

/* ─────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────── */
.footer {
  background:    var(--color-bg);
  border-top:    1px solid var(--color-border);
  padding-block: var(--space-8);
  text-align:    center;
}
.footer p {
  font-family: var(--font-mono);
  font-size:   var(--text-label);
  letter-spacing: 0.1em;
  color:       var(--color-text-muted);
  margin: 0;
}

/* ─────────────────────────────────────────────
   LOADER
   ───────────────────────────────────────────── */
.loader {
  display:         flex;
  justify-content: center;
  align-items:     center;
  padding:         var(--space-16);
}
.loader::after {
  content:       '';
  width:         24px;
  height:        24px;
  border:        1px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: var(--radius-full);
  animation:     spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─────────────────────────────────────────────
   SECTION — en-tête numéroté
   Indicateur actif : point 6px #0EA5E9
   avec box-shadow 0 0 8px #0EA5E9 — spec.
   ───────────────────────────────────────────── */
.section-title {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--space-12) var(--container-pad) var(--space-6);
  max-width:       var(--container-max);
  margin-inline:   auto;
  border-bottom:   1px solid var(--color-border); /* ligne séparatrice */
  margin-bottom:   var(--space-6);
}

.section-title__left {
  display:     flex;
  align-items: center;
  gap:         var(--space-4);
}

/* Indicateur de section actif — point Electric Blue avec glow */
.section-title__dot {
  width:        6px;
  height:       6px;
  border-radius: var(--radius-full);
  background:   var(--color-accent);
  box-shadow:   0 0 8px var(--color-accent); /* spec exacte */
  flex-shrink:  0;
}

/* Numéro de section en Geist Mono */
.section-title__num {
  font-family:    var(--font-mono);
  font-size:      var(--text-label);
  font-weight:    500;
  color:          var(--color-accent);
  letter-spacing: 0.05em;
}

/* Titre de section en uppercase label */
.section-title h2 {
  font-family:    var(--font-mono);
  font-size:      var(--text-label);
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color:          var(--color-text-body);
  /* Override du style global h2 */
  font-size:      var(--text-label) !important;
}

.section-title__meta {
  font-family:    var(--font-mono);
  font-size:      var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color:          var(--color-text-muted);
}

/* ─────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────── */
.hero {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           var(--space-16);
  align-items:   center;
  padding:       var(--space-24) var(--container-pad);
  max-width:     var(--container-max);
  margin-inline: auto;
  min-height:    80vh;
}

/* Label hero : Geist Mono uppercase Muted Gray */
.hero-label {
  font-family:    var(--font-mono);
  font-size:      var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color:          var(--color-text-muted);
  margin-bottom:  var(--space-6);
  display:        block;
}

/* H1 hero : Syne 800, Pure White, tracking -0.04em — déjà dans global.css */
.hero h1 { margin-bottom: var(--space-6); }

.hero > div > p {
  font-size:   var(--text-lg);
  line-height: 1.7;
  color:       var(--color-text-body);
  max-width:   480px;
  margin-bottom: 0;
}

/* Colonne visuelle droite */
.hero-visual {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  background:      var(--color-surface); /* #161616 Graphite */
  border:          1px solid var(--color-border);
  border-radius:   var(--radius-lg);     /* 6px */
  min-height:      340px;
  position:        relative;
  overflow:        hidden;
}

/* Badge actif : outline Electric Blue */
.hero-badge {
  font-family:    var(--font-mono);
  font-size:      var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color:          var(--color-accent);
  border:         1px solid var(--color-accent);
  border-radius:  var(--radius-sm); /* 2px — très carré */
  padding:        var(--space-2) var(--space-4);
}

/* ─────────────────────────────────────────────
   STATS
   Chiffres en Geist Mono
   ───────────────────────────────────────────── */
.stats {
  display:       grid;
  grid-template-columns: repeat(3, 1fr);
  gap:           0; /* pas de gap — ligne séparatrice entre les stats */
  max-width:     var(--container-max);
  margin-inline: auto;
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  margin-bottom: var(--space-16);
}

.stat {
  background:  var(--color-surface);
  padding:     var(--space-8);
  text-align:  center;
  transition:  background var(--transition);
}
.stat:not(:last-child) {
  border-right: 1px solid var(--color-border);
}
.stat:hover { background: var(--color-hover); } /* Steel au hover */

/* Valeur : Geist Mono, grande taille, Pure White */
.stat-value {
  font-family: var(--font-mono);
  font-size:   var(--text-4xl);
  font-weight: 500;
  color:       var(--color-text);
  line-height: 1;
  margin-bottom: var(--space-2);
}

/* Label : uppercase Muted Gray */
.stat-label {
  font-family:    var(--font-mono);
  font-size:      var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color:          var(--color-text-muted);
}

/* ─────────────────────────────────────────────
   TAGS / FILTRES
   Outline Electric Blue quand actif
   ───────────────────────────────────────────── */
.tags {
  display:       flex;
  flex-wrap:     wrap;
  gap:           var(--space-2);
  padding:       0 var(--container-pad) var(--space-8);
  max-width:     var(--container-max);
  margin-inline: auto;
}

.tag {
  font-family:    var(--font-mono);
  font-size:      var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding:        var(--space-2) var(--space-4);
  border-radius:  var(--radius-md);          /* 4px */
  border:         1px solid var(--color-border);
  background:     transparent;
  color:          var(--color-text-muted);
  cursor:         pointer;
  transition:     all var(--transition);
}
.tag:hover {
  border-color: var(--color-accent);
  color:        var(--color-accent);
}
.tag.active {
  border-color: var(--color-accent);         /* outline Electric Blue — spec */
  color:        var(--color-accent);
  background:   rgba(14, 165, 233, 0.08);    /* fond subtil, pas un remplissage solide */
}

/* ─────────────────────────────────────────────
   CARDS
   bg #161616, border #2A2A2A,
   hover : translateY(-2px) + border → #0EA5E9
   ───────────────────────────────────────────── */
.cards {
  display:       grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:           var(--space-4);
  padding:       0 var(--container-pad) var(--space-8);
  max-width:     var(--container-max);
  margin-inline: auto;
}

.card {
  background:    var(--color-surface); /* #161616 Graphite */
  border:        1px solid var(--color-border); /* #2A2A2A */
  border-radius: var(--radius-lg);      /* 6px */
  padding:       var(--space-6);
  box-shadow:    var(--shadow-card);    /* 0 1px 3px rgba(0,0,0,0.5) */
  transition:    transform var(--transition), border-color var(--transition);
}
.card:hover {
  transform:     translateY(-2px);            /* spec exacte */
  border-color:  var(--color-accent);         /* #0EA5E9 — spec exacte */
}

/* Featured : colonne double */
.card.featured {
  grid-column:  span 2;
  display:      flex;
  align-items:  center;
  gap:          var(--space-8);
  background:   var(--color-surface); /* pas de gradient — spec */
}

.card-body   { flex: 1; }

/* Icône de carte : un seul coloris Electric Blue */
.card-icon {
  font-size:     1.25rem;
  width:         36px;
  height:        36px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md); /* 4px */
  margin-bottom: var(--space-4);
  color:         var(--color-accent);
  background:    rgba(14, 165, 233, 0.06);
  transition:    border-color var(--transition);
}
.card:hover .card-icon { border-color: var(--color-accent); }

/* Suppression des variantes colorées — design system monochrome */
.card-icon.gold,
.card-icon.blue,
.card-icon.rose { color: var(--color-accent); background: rgba(14, 165, 233, 0.06); }

.card h3 {
  font-family:   var(--font-heading);
  font-size:     var(--text-lg);
  color:         var(--color-text);
  margin-bottom: var(--space-3);
}

.card > p,
.card-body > p {
  font-size:   var(--text-sm);
  color:       var(--color-text-body);
  line-height: 1.6;
  margin-bottom: 0;
}

.card-visual {
  font-size:       3rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-width:       80px;
  opacity:         0.4; /* discret — aucun éclat visuel parasite */
}

/* Lien de carte — Electric Blue */
.card-link {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-1);
  margin-top:      var(--space-4);
  font-family:     var(--font-mono);
  font-size:       var(--text-label);
  text-transform:  uppercase;
  letter-spacing:  0.1em;
  color:           var(--color-accent);
  transition:      color var(--transition);
}
.card-link:hover { color: var(--color-accent-hover); }

/* ─────────────────────────────────────────────
   LIST CARDS (membres, notifications)
   ───────────────────────────────────────────── */
.list-section {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           var(--space-4);
  padding:       0 var(--container-pad) var(--space-8);
  max-width:     var(--container-max);
  margin-inline: auto;
}

.list-card {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       var(--space-6);
  box-shadow:    var(--shadow-card);
  transition:    border-color var(--transition);
}
.list-card:hover { border-color: rgba(14, 165, 233, 0.3); }

.list-card-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding-bottom:  var(--space-4);
  border-bottom:   1px solid var(--color-border);
  margin-bottom:   var(--space-2);
}

.list-card-header h3 {
  font-family:    var(--font-mono);
  font-size:      var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color:          var(--color-text-body);
  font-size:      var(--text-label) !important;
}

.list-item {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  padding:     var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  transition:  background var(--transition);
}
.list-item:last-child { border-bottom: none; }
.list-item:hover      { /* pas de bg coloré — juste la transition de border */ }

/* Avatar : carré — pas de border-radius généreuse */
.list-avatar {
  width:            32px;
  height:           32px;
  border-radius:    var(--radius-md); /* 4px — presque carré */
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-family:      var(--font-mono);
  font-size:        var(--text-label);
  font-weight:      500;
  flex-shrink:      0;
  background:       var(--color-hover);  /* Steel #1E1E1E */
  color:            var(--color-text-body);
  border:           1px solid var(--color-border);
}

.list-item-body {
  flex: 1;
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.list-item-body strong {
  font-family: var(--font-body);
  font-size:   var(--text-sm);
  font-weight: 500;
  color:       var(--color-text);
}
.list-item-body span {
  font-family: var(--font-mono);
  font-size:   var(--text-label);
  color:       var(--color-text-muted);
}

/* ─────────────────────────────────────────────
   BADGES D'ÉTAT
   Design minimaliste — outline uniquement
   ───────────────────────────────────────────── */
.badge {
  font-family:    var(--font-mono);
  font-size:      var(--text-label);
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding:        2px 8px;
  border-radius:  var(--radius-sm); /* 2px — très carré */
  border:         1px solid;
  white-space:    nowrap;
}

.badge-green  {
  color:        var(--color-success);
  border-color: rgba(34, 197, 94, 0.3);
  background:   rgba(34, 197, 94, 0.06);
}
.badge-yellow {
  color:        #EAB308;
  border-color: rgba(234, 179, 8, 0.3);
  background:   rgba(234, 179, 8, 0.06);
}
.badge-red {
  color:        var(--color-error);
  border-color: rgba(239, 68, 68, 0.3);
  background:   rgba(239, 68, 68, 0.06);
}

/* ─────────────────────────────────────────────
   INPUT & FORMULAIRES
   bg Carbon Black, border Border Gray,
   focus : border Electric Blue
   ───────────────────────────────────────────── */
.input {
  width:         100%;
  padding:       var(--space-3) var(--space-4);
  background:    var(--color-bg);     /* #0F0F0F */
  border:        1px solid var(--color-border); /* #2A2A2A */
  border-radius: var(--radius-lg);    /* 6px */
  color:         var(--color-text-body);
  font-family:   var(--font-body);
  font-size:     var(--text-sm);
  transition:    border-color var(--transition);
}
.input::placeholder { color: var(--color-text-muted); }
.input:hover        { border-color: rgba(14, 165, 233, 0.3); }
.input:focus {
  outline:      none;
  border-color: var(--color-accent); /* Electric Blue — spec */
}

.input-row {
  display: flex;
  gap:     var(--space-2);
}
.input-row .input { flex: 1; }

/* ─────────────────────────────────────────────
   SKILL BARS — hauteur 2px, bg #2A2A2A, fill #0EA5E9
   "minimaliste absolu" — spec exacte
   ───────────────────────────────────────────── */
.skill-bar {
  height:        2px;               /* spec exacte */
  background:    var(--color-border); /* #2A2A2A */
  border-radius: var(--radius-full);
  overflow:      hidden;
}
.skill-bar__fill {
  height:     100%;
  background: var(--color-accent); /* #0EA5E9 */
  border-radius: var(--radius-full);
  transition: width 0.4s ease-out; /* animation de chargement */
}


/* =============================================
   PORTFOLIO — Composants spécifiques aux vues
   ============================================= */

/* ─── NAV — CTA bouton caché sur mobile ──── */
.nav__cta { display: none; }
@media (min-width: 769px) { .nav__cta { display: inline-flex; } }

/* ─── PAGE HEADER ────────────────────────── */
.page-header {
  padding-top:    var(--space-16);
  padding-bottom: var(--space-8);
  border-bottom:  1px solid var(--color-border);
  margin-bottom:  var(--space-8);
}
.page-header h1 { margin-top: var(--space-4); }

/* ─── HERO — terminal + stack strip ─────── */
.hero {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           var(--space-16);
  align-items:   center;
  padding-block: var(--space-24);
  min-height:    90vh;
}

.hero__terminal {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  font-family:   var(--font-mono);
}
.hero__terminal-bar {
  display:    flex;
  gap:        6px;
  padding:    10px 14px;
  background: var(--color-hover);
  border-bottom: 1px solid var(--color-border);
}
.hero__terminal-bar span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-border);
}
.hero__terminal-code {
  padding:      var(--space-6);
  font-size:    var(--text-sm);
  line-height:  1.8;
  white-space:  pre-wrap;
  overflow-x:   auto;
  margin:       0;
}
.hero__stack { border-top: 1px solid var(--color-border); padding-top: var(--space-6); }

/* ─── PROJECTS — grille principale ──────── */
.projects-featured {
  display:       grid;
  grid-template-columns: repeat(3, 1fr);
  gap:           var(--space-4);
  padding-bottom: var(--space-16);
}

.projects-grid {
  display:       grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:           var(--space-4);
  padding-bottom: var(--space-16);
}

/* Card projet — extension du .card existant */
.project-card {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       var(--space-6);
  box-shadow:    var(--shadow-card);
  display:       flex;
  flex-direction: column;
  transition:    transform var(--transition), border-color var(--transition), opacity var(--transition);
}
.project-card:hover { transform: translateY(-2px); border-color: var(--color-accent); }

.project-card--large { grid-column: span 3; flex-direction: row; gap: var(--space-8); align-items: flex-start; }
.project-card--large .project-card__desc { font-size: var(--text-base); }

.project-card__header {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.project-card__index { color: var(--color-accent); font-size: var(--text-lg); }

.project-card__tags {
  display: flex;
  gap:     var(--space-2);
}

.project-card__title {
  font-family:    var(--font-heading);
  font-size:      var(--text-xl);
  color:          var(--color-text);
  margin-bottom:  var(--space-3);
  letter-spacing: -0.01em;
}

.project-card__desc {
  font-size:     var(--text-sm);
  color:         var(--color-text-body);
  line-height:   1.7;
  flex:          1;
  margin-bottom: var(--space-4);
}

.project-card__footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--space-3);
  padding-top:     var(--space-4);
  border-top:      1px solid var(--color-border);
  margin-top: auto;
}

/* ─── ABOUT — intro bicolonne ────────────── */
.about-intro {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           var(--space-12);
  padding-bottom: var(--space-16);
}

.meta-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         var(--space-3) 0;
  border-bottom:   1px solid var(--color-border);
}
.meta-row:first-child { border-top: 1px solid var(--color-border); }

/* ─── SKILLS GRID ────────────────────────── */
.skills-grid {
  display:       grid;
  grid-template-columns: repeat(3, 1fr);
  gap:           var(--space-8) var(--space-12);
  padding-bottom: var(--space-16);
}

.skill-row {
  margin-bottom: var(--space-4);
}
.skill-row__header {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  margin-bottom:   var(--space-2);
}
.skill-row__name {
  font-family: var(--font-body);
  font-size:   var(--text-sm);
  color:       var(--color-text-body);
}
.skill-row__pct {
  font-size: var(--text-label);
  color:     var(--color-accent);
}
.skills-preview {
  display:       grid;
  grid-template-columns: repeat(2, 1fr);
  gap:           var(--space-4) var(--space-12);
  padding-bottom: var(--space-16);
}

/* ─── TIMELINE ───────────────────────────── */
.timeline {
  display:        flex;
  flex-direction: column;
  gap:            0;
  padding-bottom: var(--space-16);
}
.timeline-item {
  display:   grid;
  grid-template-columns: 80px 24px 1fr;
  gap:       0 var(--space-6);
  padding-bottom: var(--space-8);
}
.timeline-item__year {
  font-size:  var(--text-label);
  color:      var(--color-text-muted);
  padding-top: 4px;
  text-align: right;
}
.timeline-item__connector {
  display:        flex;
  flex-direction: column;
  align-items:    center;
}
.timeline-item__dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  background:    var(--color-border);
  border:        1px solid var(--color-border);
  flex-shrink:   0;
  margin-top:    4px;
  transition:    background var(--transition);
}
.timeline-item__dot--active {
  background:  var(--color-accent);
  border-color: var(--color-accent);
  box-shadow:  0 0 8px var(--color-accent);
}
.timeline-item__line {
  flex:       1;
  width:      1px;
  background: var(--color-border);
  margin-top: var(--space-2);
}
.timeline-item__body { padding-bottom: var(--space-2); }
.timeline-item__header {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  flex-wrap:   wrap;
  margin-bottom: var(--space-2);
}
.timeline-item__body h3 {
  font-size: var(--text-base);
  margin:    0;
}

/* ─── CONTACT ────────────────────────────── */
.contact-layout {
  display:       grid;
  grid-template-columns: 1fr 380px;
  gap:           var(--space-12);
  padding-bottom: var(--space-16);
  align-items:   start;
}

.form-field { margin-bottom: var(--space-6); }
.form-label {
  display:       block;
  margin-bottom: var(--space-2);
  color:         var(--color-text-body);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     var(--space-4);
}
.form-error {
  display:     none;
  font-family: var(--font-mono);
  font-size:   var(--text-label);
  color:       var(--color-error);
  margin-top:  var(--space-1);
}
.input--textarea {
  resize:     vertical;
  min-height: 140px;
}

.form-success-msg {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-lg);
  background: rgba(14, 165, 233, 0.06);
}

/* ─── CONTACT LINK CARDS — structure 3 colonnes avec bordures internes ─── */

.contact-link-card {
  display:       flex;
  align-items:   stretch;              /* les enfants s'étirent sur toute la hauteur */
  gap:           0;                    /* plus de gap — les bordures font la séparation */
  padding:       0;                    /* padding délégué à chaque zone interne */
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  overflow:      hidden;               /* border-radius s'applique aux enfants */
  transition:    border-color var(--transition), background var(--transition);
  cursor:        pointer;
}
.contact-link-card:hover {
  border-color: var(--color-accent);
  background:   rgba(14, 165, 233, 0.04);
}

/* Zone 1 — Icône : fond légèrement distinct + bordure droite comme séparateur */
.contact-link-card__icon {
  width:           48px;
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--color-hover);              /* #1E1E1E — légèrement plus clair */
  border-right:    1px solid var(--color-border);   /* séparateur colonne 1 / 2 */
  color:           var(--color-accent);
  font-size:       var(--text-base);
  transition:      border-color var(--transition), background var(--transition);
}
.contact-link-card:hover .contact-link-card__icon {
  border-right-color: var(--color-accent);          /* suit le hover global */
}

/* Zone 2 — Texte : padding généreux pour respirer */
.contact-link-card__body {
  flex:           1;
  padding:        var(--space-5) var(--space-5);
  display:        flex;
  flex-direction: column;
  justify-content: center;
  gap:            2px;
  text-align: center;
}
.contact-link-card__body .label {
  color:  var(--color-text-muted);
  margin: 0;
}
.contact-link-card__body .value {
  color:     var(--color-text);
  font-size: var(--text-sm);
  margin:    0;
}

/* Zone 3 — Flèche : bordure gauche symétrique à celle de l'icône */
.contact-link-card__arrow {
  width:           40px;
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-left:     1px solid var(--color-border);   /* séparateur colonne 2 / 3 */
  color:           var(--color-text-muted);
  font-size:       var(--text-sm);
  transition:      border-color var(--transition), color var(--transition);
}
.contact-link-card:hover .contact-link-card__arrow {
  border-left-color: var(--color-accent);
  color:             var(--color-accent);
}

.availability-card {
  margin-top:    var(--space-5);
  padding:       var(--space-6);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  background:    var(--color-surface);
}

/* ─── CTA STRIP ──────────────────────────── */
.cta-strip {
  padding-bottom: var(--space-16);
}
.cta-strip__inner {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  flex-wrap:     wrap;
  gap:           var(--space-8);
  padding:       var(--space-12);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background:    var(--color-surface);
}