/* ============================================================
   PORTFOLIO-MOBILE.CSS — E-KOULIBA
   Auteur : Axelle (dev) / Claude (assistance)
   max-width: 768px
   ============================================================ */


/* ---- Keyframes ---- */

@keyframes fadeSlideUp   { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeSlideLeft { from { opacity:0; transform:translateX(-16px); } to { opacity:1; transform:translateX(0); } }
@keyframes fadeSlideRight{ from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:translateX(0); } }
@keyframes fadeIn        { from { opacity:0; } to { opacity:1; } }
@keyframes lineGrow      { from { transform:scaleX(0); transform-origin:left; } to { transform:scaleX(1); transform-origin:left; } }
@keyframes pulsePhoto    { 0%,100% { box-shadow:0 4px 20px rgba(212,168,67,.25); } 50% { box-shadow:0 4px 28px rgba(212,168,67,.5),0 0 0 5px rgba(212,168,67,.1); } }
@keyframes shimmerGold   { 0% { box-shadow:0 0 0 0 rgba(212,168,67,0); } 50% { box-shadow:0 0 0 4px rgba(212,168,67,.2); } 100% { box-shadow:0 0 0 0 rgba(212,168,67,0); } }
@keyframes cardPop       { from { opacity:0; transform:scale(0.96) translateY(10px); } to { opacity:1; transform:scale(1) translateY(0); } }
@keyframes pctPop        { 0% { opacity:0; transform:scale(0.6); } 70% { transform:scale(1.15); } 100% { opacity:1; transform:scale(1); } }


/* ============================================================
   STYLES MOBILES
   ============================================================ */

@media (max-width: 768px) {


  /* ======================================================
     1. HERO
     Grille 2 colonnes teal | Stats absolute en bas
     ====================================================== */

  .portfolio-hero {
    display: grid;
    grid-template-columns: 52% 48%;
    min-height: unset;
    position: relative;   /* containing block pour .hero-stats */
    padding-bottom: 54px; /* espace réservé barre stats */
    align-items: stretch;
  }

  /* Colonne gauche */
  .hero-left {
    padding: 22px 10px 22px 16px;
    gap: 10px;
    background-color: var(--color-teal);
    animation: fadeSlideLeft 0.6s ease both;
  }

  .hero-left::before { display: none; }

  .portfolio-hero__label { margin-bottom: 4px; gap: 8px; }
  .portfolio-hero__label .label-line { width: 20px; animation: lineGrow 0.6s ease both; }
  .label-text       { font-size: 0.67rem; }
  .hero-nom         { font-size: 1.3rem; line-height: 1.15; animation: fadeSlideUp 0.5s 0.1s ease both; }
  .hero-titre-pro   { font-size: 0.72rem; animation: fadeIn 0.5s 0.2s ease both; }

  /* Description : coupe avant le tiret, sans ellipsis */
  .hero-description {
    font-size: 0.72rem;
    line-height: 1.5;
    max-height: calc(0.72rem * 1.5 * 1.8);
    overflow: hidden;
    animation: fadeIn 0.5s 0.25s ease both;
  }

  /* 2 tags max */
  .hero-tags { flex-wrap: nowrap; overflow: hidden; gap: 6px; animation: fadeIn 0.5s 0.3s ease both; }
  .hero-tag  { font-size: 0.63rem; padding: 3px 7px; flex-shrink: 0; transition: border-color 0.2s ease, color 0.2s ease; }
  .hero-tag:nth-child(n+3) { display: none; }

  /* Boutons côte à côte */
  .hero-actions { flex-direction: row; gap: 6px; margin-top: 2px; flex-wrap: nowrap; animation: fadeSlideUp 0.5s 0.35s ease both; }
  .btn-hero {
    flex: 1; justify-content: center;
    font-size: 0.56rem; font-weight: 600;
    padding: 5px 4px; gap: 3px;
    white-space: nowrap; border-radius: 5px;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
  }
  .btn-icon { width: 10px; height: 10px; flex-shrink: 0; }

  /* Colonne droite — position: static pour que hero-stats soit bien positionné */
  .hero-right {
    position: static;
    background-color: var(--color-teal);
    padding: 20px 10px 14px 8px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    gap: 0;
    animation: fadeIn 0.6s 0.1s ease both;
  }

  .hero-right::after { display: none; }

  /* Photo */
  .hero-photo-wrapper {
    width: 115px; height: 115px;
    margin-top: 30px;
    border: 2.5px solid var(--color-or); padding: 3px;
    animation: pulsePhoto 3.5s ease-in-out 1s infinite;
  }

  /* Cercles sociaux */
  .hero-socials {
    margin-top: 10px;
    display: flex; flex-direction: row;
    gap: 8px; justify-content: center; flex-wrap: nowrap;
    animation: fadeSlideUp 0.5s 0.4s ease both;
  }

  .hero-social-item   { gap: 4px; transition: transform 0.2s ease; }
  .social-icon-circle { width: 30px; height: 30px; border-color: rgba(212,168,67,.65); transition: background-color 0.25s ease, border-color 0.25s ease; }
  .social-icon        { width: 12px; height: 12px; stroke: rgba(255,255,255,.85); }
  .social-label       { font-size: 0.52rem; color: rgba(255,255,255,.65); }

  /* Stats — absolute pleine largeur en bas du hero */
  .hero-stats {
    position: absolute; bottom: 0; left: 0; right: 0;
    width: 100%; box-sizing: border-box; margin: 0;
    padding: 12px 16px;
    border-radius: 0; border: none;
    border-top: 1px solid var(--color-separator);
    background-color: var(--color-bg-secondary);
    display: flex; justify-content: space-around; align-items: center; gap: 0;
    animation: fadeSlideUp 0.5s 0.5s ease both;
  }

  .stat-chiffre  { font-size: 1.2rem; transition: color 0.2s ease; }
  .stat-label    { font-size: 0.6rem; }
  .hero-stat-sep { height: 24px; }

  /* Hover hero */
  @media (hover: hover) {
    .btn-hero--teal:hover    { background-color: var(--color-or-hover); border-color: var(--color-or-hover); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(212,168,67,.45); }
    .btn-hero--outline:hover { background-color: rgba(212,168,67,.15); border-color: var(--color-or-hover); color: var(--color-or); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(212,168,67,.2); }
    .hero-social-item:hover  { transform: translateY(-3px); }
    .hero-social-item:hover .social-icon-circle { background-color: var(--color-or); border-color: var(--color-or); animation: shimmerGold 0.6s ease; }
    .hero-social-item:hover .social-icon { stroke: #1C1C1C; }
    .hero-stat:hover .stat-chiffre { color: var(--color-teal); }
  }

  /* Dark mode hero */
  body.dark-mode .hero-right { background-color: var(--color-teal); }
  body.dark-mode .hero-stats { background-color: var(--color-bg-secondary); border-color: var(--color-separator); }


  /* ======================================================
     2. À PROPOS
     Colonne unique | PARCOURS CLÉ masqué
     ====================================================== */

  .apropos {
    padding: 30px 0 36px;
    border-top: 1px solid var(--color-separator);
    animation: fadeSlideUp 0.6s ease both;
  }

  .apropos-container { padding: 0 20px; max-width: 100%; }

  .portfolio-section-label { margin-bottom: 24px; }
  .portfolio-section-label .label-line  { width: 20px; animation: lineGrow 0.6s ease both; }
  .portfolio-section-label .label-text  { font-size: 0.82rem; }

  .apropos-grid { display: block; }

  .apropos-left {
    display: flex; flex-direction: column; gap: 14px;
    width: 100%; box-sizing: border-box;
    border-left: none !important; padding-left: 0 !important;
    animation: fadeSlideUp 0.5s 0.1s ease both;
  }

  .apropos-titre  { font-size: 1.25rem; text-align: left; }
  .apropos-texte  { font-size: 0.85rem; line-height: 1.7; }

  /* 4 tags compacts sur une ligne */
  .apropos-tags { flex-wrap: nowrap; gap: 5px; margin-top: 4px; overflow: hidden; }
  .apropos-tag  { font-size: 0.62rem; padding: 3px 7px; white-space: nowrap; }
  .apropos-tag:nth-child(4) { display: inline-flex; }

  /* PARCOURS CLÉ masqué sur mobile */
  .apropos-right { display: none; }

  /* Dark mode à propos */
  body.dark-mode .apropos { background-color: var(--color-bg-secondary); }
  body.dark-mode .apropos-tag--outline { border-color: var(--color-separator); color: var(--color-text-primary); }


  /* ======================================================
     3. COMPÉTENCES
     Grille 2 colonnes côte à côte (Option A)
     Techniques (or) | Transversales (teal)
     ====================================================== */

  .competences { margin: 0; padding: 32px 16px; border-radius: 0; animation: fadeSlideUp 0.6s ease both; }
  .competences-container { padding: 0; }
  .competences-titre { font-size: 1.1rem; margin-bottom: 20px; animation: fadeSlideUp 0.5s 0.05s ease both; }

  .competences-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }

  .competences-col:first-child { animation: fadeSlideLeft  0.55s 0.1s ease both; min-width: 0; }
  .competences-col:last-child  { animation: fadeSlideRight 0.55s 0.15s ease both; min-width: 0; }

  .comp-header { gap: 5px; margin-bottom: 8px; flex-wrap: nowrap; align-items: center; overflow: hidden; animation: fadeIn 0.4s 0.25s ease both; }
  .comp-header-icon  { width: 12px; height: 12px; flex-shrink: 0; }
  .comp-header-titre { font-size: 0.6rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .comp-separator    { margin-bottom: 12px; }

  .comp-list { gap: 12px; }

  .comp-item { gap: 5px; animation: fadeSlideUp 0.4s ease both; }
  .comp-item:nth-child(1) { animation-delay: 0.2s; }
  .comp-item:nth-child(2) { animation-delay: 0.3s; }
  .comp-item:nth-child(3) { animation-delay: 0.4s; }
  .comp-item:nth-child(4) { animation-delay: 0.5s; }

  .comp-item-top { display: flex; justify-content: space-between; align-items: center; gap: 4px; }

  .comp-label { font-size: 0.62rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
  .comp-label::after { display: none; }

  .comp-pct { font-size: 0.62rem; flex-shrink: 0; animation: pctPop 0.4s ease both; }
  .comp-item:nth-child(1) .comp-pct { animation-delay: 0.9s; }
  .comp-item:nth-child(2) .comp-pct { animation-delay: 1.0s; }
  .comp-item:nth-child(3) .comp-pct { animation-delay: 1.1s; }
  .comp-item:nth-child(4) .comp-pct { animation-delay: 1.2s; }

  .comp-bar { height: 5px; }
  .comp-item:nth-child(1) .comp-bar-fill { animation-delay: 0.3s; }
  .comp-item:nth-child(2) .comp-bar-fill { animation-delay: 0.4s; }
  .comp-item:nth-child(3) .comp-bar-fill { animation-delay: 0.5s; }
  .comp-item:nth-child(4) .comp-bar-fill { animation-delay: 0.6s; }

  @media (hover: none) { .comp-item:hover .comp-bar { transform: none; } }

  /* Dark mode compétences */
  body.dark-mode .competences { background-color: #252218; border-color: rgba(61,58,46,.4); }


  /* ======================================================
     4. EXPÉRIENCE
     Option B : carrousel horizontal scrollable
     ====================================================== */

  .experience { padding: 36px 0 40px; animation: fadeSlideUp 0.6s ease both; }
  .experience-container { padding: 0; max-width: 100%; overflow: hidden; }

  .experience-container .portfolio-section-label { padding: 0 20px; margin-bottom: 20px; animation: fadeSlideLeft 0.5s ease both; }
  .experience-container .portfolio-section-label .label-line { animation: lineGrow 0.6s ease both; }
  .experience-titre { font-size: 1.1rem; margin: 0 0 24px; padding: 0 20px; animation: fadeSlideUp 0.5s 0.08s ease both; }

  /* Carrousel scroll horizontal */
  .exp-timeline {
    display: flex; flex-direction: row; gap: 14px;
    overflow-x: auto; overflow-y: visible;
    scroll-snap-type: x mandatory;
    padding: 8px 20px 20px;
    grid-template-columns: unset; align-items: unset;
  }


/* Cache scrollbar webkit et firefox */
  .exp-timeline:-webkit-scrollbar { display: none; }
  .exp-timeline { -ms-overflow-style: none; }
  .exp-timeline:-webkit-scrollbar-width { display: none; }

  /* Cards scrollables */
  .exp-card {
    flex: 0 0 78vw; scroll-snap-align: start;
    min-width: 0; padding: 20px 18px 18px;
    border-radius: 10px; gap: 8px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    animation: cardPop 0.5s ease both;
  }

  .exp-card:nth-child(1) { animation-delay: 0.1s; }
  .exp-card:nth-child(2) { animation-delay: 0.22s; }
  .exp-card:nth-child(3) { animation-delay: 0.34s; }

  .exp-card::before { font-size: 3rem; top: -6px; right: 12px; }

  .exp-date       { font-size: 0.7rem; letter-spacing: 0.05em; animation: fadeIn 0.4s ease both; }
  .exp-card-titre { font-size: 0.92rem; line-height: 1.3; animation: fadeSlideUp 0.4s 0.15s ease both; }
  .exp-card-desc  { font-size: 0.78rem; line-height: 1.65; animation: fadeIn 0.4s 0.25s ease both; }

  @media (hover: none) { .exp-card:hover { transform: none; } .exp-card--or:hover, .exp-card--teal:hover { box-shadow: none; } }
  @media (hover: hover) {
    .exp-card--or:hover   { box-shadow: 0 10px 28px rgba(212,168,67,.18); transform: translateY(-3px); }
    .exp-card--teal:hover { box-shadow: 0 10px 28px rgba(27,74,71,.18);   transform: translateY(-3px); }
  }

  /* Dark mode expérience */
  body.dark-mode .exp-card            { background-color: var(--color-bg-secondary); }
  body.dark-mode .exp-card-titre--dark { color: var(--color-teal); }


  /* ======================================================
     5. FORMATION
     Cards horizontales (icon gauche | contenu droite)
     Conteneur sans bordure, fond bg-secondary
     ====================================================== */
.formations { padding: 36px 20px 40px; margin: 0; background-color: var(--color-bg-secondary); border-radius: 0; animation: fadeSlideUp 0.6s ease both; }
  .formations-container { padding: 0; max-width: 100%; }

  .formations-container .portfolio-section-label { animation: fadeSlideLeft 0.5s ease both; }
  .formations-container .portfolio-section-label .label-line { animation: lineGrow 0.6s ease both; }
  .formations-titre { font-size: 1.1rem; margin-bottom: 24px; animation: fadeSlideUp 0.5s 0.05s ease both; }

  .formations-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }

  /* Cards horizontales */
  .formation-card {
    display: flex; flex-direction: row; align-items: stretch;
    background-color: var(--color-bg-primary);
    border: 1.5px solid var(--color-separator);
    border-radius: 8px; overflow: hidden;
    transition: box-shadow 0.25s ease;
    animation: fadeSlideUp 0.5s ease both;
  }

  .formation-card--teal,
  .formation-card--outline { border-top: 1.5px solid var(--color-separator); }

  .formation-card:nth-child(1) { animation-delay: 0.1s; }
  .formation-card:nth-child(2) { animation-delay: 0.2s; }
  .formation-card:nth-child(3) { animation-delay: 0.3s; }

  /* Header icône */
  .formation-card__header { width: 60px; min-height: 80px; height: auto; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 0; }
  .formation-card__header--light { background-color: var(--color-bg-secondary); border-right: 1px solid var(--color-separator); border-bottom: none; }
  .formation-icon { width: 26px; height: 26px; stroke: var(--color-or); stroke-width: 1.5; transition: transform 0.3s ease; }

  /* Body contenu */
  .formation-card__body { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
  .formation-label { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.07em; color: var(--color-or); }
  .formation-titre { font-size: 0.86rem; font-weight: 700; line-height: 1.3; margin: 0; }
  .formation-desc  { font-size: 0.74rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2;  line-clamp: 2;   -webkit-box-orient: vertical; overflow: hidden; }
  .formation-footer { margin-top: 6px; display: flex; align-items: center; justify-content: space-between; }
  .formation-meta  { font-size: 0.7rem; color: var(--color-or); font-weight: 500; }
  .btn-formation   { font-size: 0.68rem; padding: 4px 10px; border-radius: 4px; transition: background-color 0.2s ease, transform 0.2s ease; }

  @media (hover: hover) {
    .formation-card--teal:hover    { box-shadow: 0 4px 16px rgba(27,74,71,.15); }
    .formation-card--outline:hover { box-shadow: 0 4px 16px rgba(212,168,67,.15); }
    .formation-card:hover .formation-icon { transform: scale(1.12) rotate(-6deg); }
    .btn-formation:hover { background-color: var(--color-or-hover); transform: translateY(-1px); }
  }

  /* Dark mode formation */
  body.dark-mode .formations { background-color: var(--color-bg-secondary); }
  body.dark-mode .formation-card--teal,
  body.dark-mode .formation-card--outline { background-color: var(--color-bg-secondary); border-color: var(--color-separator); }
  body.dark-mode .formation-card__header--light { background-color: var(--color-bg-primary); border-color: var(--color-separator); }


  /* ======================================================
     6. CONTACT
     Option A : formulaire → encart teal → socials
     ====================================================== */

  .contact { padding: 28px 0 36px; animation: fadeSlideUp 0.6s ease both; }
  .contact-container { padding: 0 16px; max-width: 100%; }

  .contact-container .portfolio-section-label { animation: fadeSlideLeft 0.5s ease both; }
  .contact-container .portfolio-section-label .label-line { animation: lineGrow 0.6s ease both; }

  .contact-grid  { display: flex; flex-direction: column; gap: 20px; }

  /* Formulaire */
  .contact-left  { width: 100%; box-sizing: border-box; animation: fadeSlideUp 0.5s 0.1s ease both; }
  .contact-titre { font-size: 1rem; margin-bottom: 10px; }
  .contact-separateur { margin-bottom: 16px; }
  .contact-form  { gap: 10px; width: 100%; }

  .contact-row   { display: flex; flex-direction: column; gap: 10px; width: 100%; }
  .contact-field { width: 100%; box-sizing: border-box; }
  .contact-label { font-size: 0.75rem; }

  .contact-input,
  .contact-textarea { font-size: 0.8rem; padding: 8px 10px; width: 100%; box-sizing: border-box; }
  .contact-textarea  { min-height: 90px; }

  .btn-contact { width: 100%; align-self: stretch; font-size: 0.82rem; padding: 11px 16px; transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease; }

  /* Encart teal + socials */
  .contact-right { padding-top: 0; gap: 14px; animation: fadeSlideUp 0.5s 0.2s ease both; }

  .contact-encart { padding: 16px; border-radius: 8px; }
  .contact-encart-titre    { font-size: 0.9rem; margin-bottom: 8px; }
  .contact-encart-citation { font-size: 0.78rem; line-height: 1.55; }

  .contact-socials       { justify-content: center; gap: 16px; animation: fadeSlideUp 0.5s 0.3s ease both; }
  .contact-social-item   { gap: 4px; }
  .contact-social-circle { width: 38px; height: 38px; }
  .contact-social-icon   { width: 15px; height: 15px; }
  .contact-social-label  { font-size: 0.62rem; }

  @media (hover: hover) {
    .btn-contact:hover { background-color: var(--color-or-hover); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(212,168,67,.35); }
    .contact-encart:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(27,74,71,.25); }
    .contact-social-item:hover { transform: translateY(-2px); transition: transform 0.2s ease; }
  }

  /* Dark mode contact */
  body.dark-mode .contact-input,
  body.dark-mode .contact-textarea { background-color: var(--color-bg-secondary); border-color: var(--color-separator); color: var(--color-text-primary); }
  body.dark-mode .contact-input:focus,
  body.dark-mode .contact-textarea:focus { border-color: var(--color-or); }


} /* fin @media (max-width: 768px) */