/* ==========================================================================
   CV Anthony Cucuzza — feuille mobile
   Ajoutée le 27/10/2026. Chargée après style.css : à spécificité égale, ses
   règles gagnent, sans modifier le CSS historique (retrait = supprimer le
   <link> dans index.html).

   Objectif : lisibilité réelle sur 360-430 px, densité maîtrisée, cibles
   tactiles confortables, et suppression des effets coûteux (flou 40 px,
   survols collants) sur téléphone.
   ========================================================================== */

@media (max-width: 640px) {
  :root {
    --cv-gutter: 14px;
    --cv-radius: 20px;
    --cv-pad: 18px;
  }

  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 16px; }

  img { max-width: 100%; height: auto; }

  /* ---------------------------------------------------------------- HERO */
  .hero { padding: 22px 18px 26px; }

  .profile-pic { width: 104px; height: 104px; border-width: 2px; }

  .hero-eyebrow { font-size: 10px; letter-spacing: .18em; margin-bottom: 10px; }

  .hero-title {
    font-size: clamp(26px, 7.4vw, 31px);
    line-height: 1.14;
    letter-spacing: -0.6px;
    margin-bottom: 14px;
    text-wrap: balance;
  }

  .hero-subtitle {
    font-size: 15px;
    line-height: 1.5;
    max-width: 34ch;
    margin: 0 auto 20px;
  }

  .hero-badges { margin-top: 18px; gap: 8px; }

  .badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 12px;
    font-size: 12.5px;
    backdrop-filter: blur(8px);
  }

  /* -------------------------------------------------------------- CARTES */
  .card {
    width: auto;
    margin: 18px var(--cv-gutter);
    padding: 24px var(--cv-pad);
    border-radius: var(--cv-radius);
    /* 9 cartes + images de fond : 40 px de flou coûtent cher sur mobile */
    backdrop-filter: blur(14px);
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 20px;
    padding-bottom: 16px;
  }

  .card-title { font-size: 26px; line-height: 1.15; letter-spacing: -0.4px; }
  .card-subtitle { font-size: 13.5px; line-height: 1.4; }

  .grid-2 { gap: 28px; }

  .section-text { font-size: 16px; line-height: 1.65; }
  .italic-text { text-align: left; }

  .section-label { font-size: 11px; letter-spacing: .12em; margin-bottom: 10px; }

  .stack { gap: 14px; }

  .kv { font-size: 15px; line-height: 1.5; }
  .kv-label { font-size: 11px; letter-spacing: .1em; margin-bottom: 3px; }
  .kv a { overflow-wrap: anywhere; }

  /* Révélation e-mail / téléphone : vraie cible tactile de 44 px */
  #email-link,
  #phone-number {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .expertise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .expertise-box { padding: 12px 10px; font-size: 13px; line-height: 1.35; }

  .pill-list { gap: 6px; margin-top: 10px; }
  .pill { font-size: 12px; padding: 6px 10px; line-height: 1.3; }

  /* --------------------------------------------------- CHIFFRES CLES 2x2 */
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 12px;
    margin-top: 22px;
  }

  .stat-number { font-size: 38px; line-height: 1.05; margin-bottom: 6px; letter-spacing: -1px; }
  .stat-label { font-size: 11px; letter-spacing: .07em; line-height: 1.35; }

  /* --------------------------- FONDS ABSOLUS (carte Leaflet, diplome) ---- */
  /* Le plan du profil devient une vraie bande visible en haut de la carte
     (et non plus une texture absolue derriere le texte, illisible a 390 px). */
  .card:has(.map-container) { padding-top: 0; }
  .card:has(.map-container)::before { display: none; }

  .map-container {
    position: static;
    width: calc(100% + 2 * var(--cv-pad));
    height: 210px;
    margin: 0 calc(-1 * var(--cv-pad)) 20px;
    border-radius: 0;
    opacity: 1;
    pointer-events: none;
    background: #14141a;
    /* Accord avec le thème sombre, sans rendre le plan illisible */
    filter: brightness(.85) saturate(.85);
  }

  .map-container .leaflet-container { border-radius: 0; }

  .diploma-container { opacity: .3; }

  .card:has(.diploma-container)::before {
    background: linear-gradient(180deg, rgba(8, 8, 10, .90) 0%, rgba(8, 8, 10, .97) 100%);
  }

  /* Ancre du bloc Coordonnees : marge pour ne pas coller au bord haut */
  #coordonnees { scroll-margin-top: 14px; }

  /* -------------------------------------------------------- EXPERIENCES */
  /* La gouttiere de 40 px du timeline + la pastille absolue mangeaient 25 %
     de la largeur : l'annee devient une puce au-dessus du poste. */
  .timeline-container { padding-left: 0; }

  .timeline-dot {
    position: static;
    width: auto;
    height: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
    display: inline-flex;
    margin-bottom: 8px;
  }

  .timeline-dot::before {
    content: attr(data-year);
    position: static;
    margin: 0;
    transform: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #d8a5ff;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(168, 85, 247, .14);
    border: 1px solid rgba(168, 85, 247, .35);
  }

  .experience-item {
    padding: 16px 0 8px;
    margin-bottom: 4px;
    border-radius: 0;
    overflow: visible;
  }

  .experience-header {
    min-height: 132px;
    padding: 16px;
    border-radius: 14px;
  }

  .exp-title { font-size: 16.5px; line-height: 1.3; min-width: 0; }

  .exp-meta {
    position: static;
    align-self: flex-start;
    margin-top: 10px;
    height: 38px;
    padding: 4px 9px;
    font-size: 10.5px;
    border-radius: 9px;
  }

  .company-logo { width: 30px; height: 30px; }

  .exp-company { font-size: 14px; margin-bottom: 10px; }

  .exp-bullets { font-size: 15px; line-height: 1.55; margin-top: 4px; }
  .exp-bullets li { margin-bottom: 7px; }
  .exp-bullets li::before { margin-right: 8px; }

  .exp-project {
    padding: 12px 14px;
    margin: 14px 0 4px;
    font-size: 14px;
    line-height: 1.6;
    border-radius: 8px;
  }

  /* ------------------------------------------------------ PIED / FLECHES */
  .scroll-down-arrow { margin-top: 26px; }
  .scroll-up-arrow { margin: 18px 0 10px; }
  .arrow-circle { width: 46px; height: 46px; }

  .footer {
    margin-top: 30px;
    padding: 36px 20px calc(36px + env(safe-area-inset-bottom));
    font-size: 13px;
    line-height: 1.6;
  }

  /* Pastille fixe decorrrative : masquee sur petit ecran */
  .scroll-indicator { display: none; }

  p,
  .section-text,
  .exp-bullets li,
  .exp-project { text-wrap: pretty; }
}

/* Petits telephones (iPhone SE, 360 px et moins) */
@media (max-width: 400px) {
  :root { --cv-pad: 15px; }
  .hero-subtitle { font-size: 14.5px; }

  .card { margin: 14px 10px; padding: 20px var(--cv-pad); }
  .card-title { font-size: 24px; }
  .card-subtitle { font-size: 13px; }

  .badge { font-size: 12px; padding: 6px 10px; }

  .expertise-grid { gap: 8px; }
  .expertise-box { font-size: 12.5px; padding: 11px 8px; }

  .stat-number { font-size: 34px; }

  .exp-title { font-size: 16px; }
}

/* Sur écran tactile, les survols restent « collés » après le tap */
@media (hover: none) {
  .card:hover,
  .badge:hover,
  .pill:hover,
  .expertise-box:hover { transform: none; }

  .card:hover { background: rgba(28, 28, 30, 0.5); }
  .experience-item:hover .exp-title { color: #f5f5f7; }
}

/* Respect de la préférence système « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  html { scroll-behavior: auto; }
}