/* =========================================
   CSS V3 — PARTIE 1/5 (Global + Nav + Hero)
   Correctifs : gutter, particles, layout
   ========================================= */

/* ---------- Global ---------- */
html{
  height:100%;
  overflow-y:scroll;
  scroll-behavior:smooth;
  scrollbar-gutter: stable;
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  min-height:100%;
  font-family:'Poppins',sans-serif;
  background:#f4f4f4;
  color:#111;
  line-height:1.6;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  transition:background-color .5s ease,color .3s ease;
  width:100%;
}

/* Conteneur principal commun aux pages */
.main-content-wrapper,
.rgpd-main{
  width:100%;
  max-width:1100px;
  margin:20px auto 40px auto;
  position:relative;
  z-index:1;
  flex-grow:1;
}

/* ---------- Navigation ---------- */
.nav{
  background:#33aaff;
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 30px;
  position:sticky;
  top:0;
  z-index:1000;
}

.logo{font-weight:700;font-size:1.2rem}
.menu{display:flex;gap:25px}
.menu a{
  color:#fff;text-decoration:none;font-weight:500;position:relative;transition:.3s
}
.menu a::after{
  content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:#fff;
  transition:width .3s ease
}
.menu a:hover::after{width:100%}
.burger{display:none;font-size:1.5rem;cursor:pointer}

/* ---------- Sections génériques ---------- */
.page-section{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;text-align:center
}
.page-title{font-size:2.5rem;font-weight:700;margin-bottom:24px;color:#2176c1}

/* ---------- Hero / Accueil ---------- */
.hero{padding:40px 0}
.section-flex,.section-flex-kia{
  display:flex;align-items:center;gap:32px;max-width:1000px;margin:0 auto
}
.ordi-emoji-img{height:200px;filter:drop-shadow(2px 2px 6px #bbb)}
.photo-cable{
  width:170px;height:180px;border-radius:50%/48%;border:5px solid #a3c9e8;
  display:flex;align-items:center;justify-content:center;background:#fff;
  box-shadow:0 2px 10px rgba(70,150,210,.10)
}
.section-photo{
  width:140px;height:150px;object-fit:cover;border-radius:40%/44%;object-position:center 15%
}
.hero-text,.kia-text{flex:1;max-width:700px}
.hero-text h1{
  font-size:3rem;font-weight:700;
  background:linear-gradient(90deg,#3aa8f2,#005b96);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:20px
}
.hero-text p{font-size:1.2rem}

#hero-hello{font-family:'Poppins','Consolas','Courier New',monospace}
.terminal-cursor{
  color:#005b96!important;-webkit-text-fill-color:#005b96!important;font-weight:700;
  animation:blink-terminal .7s steps(1) infinite;margin-left:4px
}
@keyframes blink-terminal{0%,60%{opacity:1}61%,100%{opacity:0}}
/* ---------- Boutons KIA / Soft skills (visuel cohérent) ---------- */
.kia-text{text-align:center}
.kia-text h2 span{
  font-size:2rem;background:linear-gradient(90deg,#3aa8f2,#005b96);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;display:inline-block;margin-bottom:10px
}
.kia-presentation-card{text-align:left;margin-bottom:20px}
.kia-text .btn{
  background:transparent;border:2px solid #f25c2c;color:#f25c2c;padding:10px 20px;
  border-radius:8px;text-decoration:none;font-weight:600;transition:.3s;display:inline-block;margin-top:30px
}
.kia-text .btn:hover{background:#f25c2c;color:#fff}

.kia-text .soft-skills-container{margin-top:80px;text-align:center;padding:20px}
.kia-text .soft-skills-container h3{font-size:1.6rem;color:#33aaff;margin-bottom:20px}
.soft-skills-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:20px;margin-top:20px
}
.soft-skill{
  background:transparent;border:2px solid #33aaff;border-radius:8px;padding:10px 15px;
  text-align:center;font-weight:500;color:#33aaff;transition:transform .3s,box-shadow .3s,color .3s,background-color .3s;
  box-shadow:0 2px 8px rgba(0,0,0,.08)
}
.soft-skill:hover{transform:translateY(-5px);box-shadow:0 6px 12px rgba(0,0,0,.15);background:#33aaff;color:#fff}

/* ---------- Particles (fond) ---------- */
#particles-js{
  position:fixed;inset:0;width:100%;height:100vh;
  z-index:-1;           /* sous le contenu */
  pointer-events:none;  /* ne bloque jamais les clics */
}
.journey-page #particles-js{z-index:0}

/* ---------- Footer ---------- */
.footer{
  background:linear-gradient(90deg,#5076A5 0%,#35577C 100%);
  width:100%;margin-top:auto;border-radius:18px 18px 0 0;padding:38px 0 18px;
  text-align:center;z-index:10;position:relative
}
.footer-container{
  max-width:1100px;margin:0 auto;padding:0 20px;
  display:flex;justify-content:center;flex-wrap:wrap;gap:42px
}
.footer-nav,.footer-social{flex:1 1 300px;text-align:center}
.footer-nav h4,.footer-social h4{font-weight:600;margin-bottom:12px;color:#f5fbff}
.footer-nav ul.nav-columns{
  display:flex;flex-wrap:wrap;justify-content:center;list-style:none;padding:0;margin:0 auto;max-width:380px
}
.footer-nav ul.nav-columns li{width:50%;margin-bottom:10px}
.footer-nav ul.nav-columns li a{
  display:block;padding:5px 0;text-decoration:none;color:#e8f1fc;font-weight:500;transition:color .3s
}
.footer-nav ul.nav-columns li a:hover{color:#fff}
.footer-social a img{margin-top:10px;transition:transform .3s}
.footer-social a img:hover{transform:scale(1.1)}
.footer-bottom{margin-top:22px;font-size:.85rem;color:#e0eaf8;text-align:center}

/* ---------- Responsive de base ---------- */
@media (max-width:900px){
  .menu{
    display:none;flex-direction:column;gap:0;background:#33aaff;position:absolute;
    top:60px;right:30px;left:30px;border-radius:10px;box-shadow:0 4px 24px rgba(0,0,0,.09);
    padding:10px 0;z-index:999
  }
  .menu.show{display:flex}
  .burger{display:block}
  .main-content-wrapper{max-width:100%;margin:0;padding:0 10px}
  .section-flex,.section-flex-kia{flex-direction:column;gap:24px}
  .footer-container{flex-direction:column;align-items:center;text-align:center;gap:16px}
}
@media (max-width:600px){
  .footer-nav ul.nav-columns li{width:100%}
  .soft-skills-grid{grid-template-columns:1fr}
}
/* =========================================
   CSS V3 — PARTIE 3/5
   Formations + Frise + Compétences
   ========================================= */

/* ---------- FORMATIONS (intro + cartes) ---------- */
.intro-icon-container{
  padding:20px;background:#fff;border-radius:50%;
  box-shadow:0 4px 20px rgba(0,0,0,.08);margin:-10px 0 20px 0
}
.intro-icon-container img{width:60px;height:60px}

.formations-desc{
  text-align:center;color:#415276;font-size:1.1rem;margin-bottom:34px;
  max-width:700px;margin-left:auto;margin-right:auto
}

.formations-section{padding:40px 20px}
.formations-title{
  font-size:2.2rem;font-weight:700;text-align:center;margin-bottom:48px;color:#222
}

.formations-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
  gap:40px;max-width:900px;margin:40px auto
}

.formation-card{
  display:flex;background:#fff;border-radius:16px;
  box-shadow:0 4px 16px rgba(180,198,222,.14);overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  border:1.5px solid #f3f3fa;cursor:pointer
}

/* ---------- FORMATIONS (frise chronologique) ---------- */
.timeline-container{
  position:relative;
  max-width:800px;
  margin:30px auto;
  padding:0 20px;
  /* pas de min-height forcé : la ligne est gérée par ::before */
}

/* pseudo-élément : ligne verticale unique, suit la hauteur du conteneur */
.timeline-container::before{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 3px;
  background: #e0e0e0;
  z-index: 0;
}

.timeline-entry{position:relative;width:50%;margin-bottom:25px;padding:10px 40px;box-sizing:border-box;z-index:2}
.timeline-entry.left{left:0}
.timeline-entry.right{left:50%}
.timeline-dot{
  width:20px;height:20px;background:#fff;border:4px solid #33aaff;border-radius:50%;
  position:absolute;top:28px;z-index:5
}
.timeline-entry.left .timeline-dot{right:-10px}
.timeline-entry.right .timeline-dot{left:-10px}
.timeline-card{
  padding:20px 30px;background:#fff;position:relative;border-radius:8px;
  box-shadow:0 4px 15px rgba(0,0,0,.08)
}
.timeline-card::before{content:" ";height:0;position:absolute;top:22px;width:0;z-index:1;border:medium solid #fff}
.timeline-entry.left .timeline-card::before{left:100%;border-width:10px 0 10px 10px;border-color:transparent transparent transparent #fff}
.timeline-entry.right .timeline-card::before{right:100%;border-width:10px 10px 10px 0;border-color:transparent #fff transparent transparent}
.timeline-date{
  font-size:.9em;font-weight:600;padding:4px 10px;display:inline-block;border-radius:5px;margin-bottom:10px;color:#fff;background:#6c757d
}
.banner-blue{background:#33aaff}
.banner-future{background:#28a745}
.timeline-content strong{display:block;font-size:1.1rem;margin-bottom:5px;color:#333}
.timeline-content small{color:#666;line-height:1.5}

/* ---------- FORMATIONS (section compétences & liens) ---------- */
#competences-liens{
  background:#fff;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,.08);
  padding:40px 30px;margin:60px auto;max-width:950px;text-align:center
}
#competences-liens h2{
  font-size:2rem;font-weight:700;color:#2176c1;margin-bottom:25px;text-transform:uppercase;
  border-bottom:2px solid #33aaff;display:inline-block;padding-bottom:6px
}
#competences-liens ul{
  list-style:none;padding:0;margin:0 auto 20px auto;max-width:800px;text-align:left
}
#competences-liens li{
  background:#f8faff;border:1px solid #e1ebf6;border-radius:10px;padding:14px 18px;margin-bottom:14px;
  font-size:1rem;line-height:1.5;transition:transform .25s ease, box-shadow .25s ease
}
#competences-liens li strong{color:#2176c1}
#competences-liens li a{color:#f25c2c;font-weight:600;text-decoration:none}
#competences-liens li:hover{transform:translateY(-4px);box-shadow:0 6px 18px rgba(0,0,0,.08);background:#fff}
/* ---------- ENTREPRISES (journey immersive) ---------- */
.journey-page{background:#f4f4f4}
.journey-page .main-content-wrapper{max-width:none;padding:0;margin:0}
.experience-journey{width:100%}
.experience-step{
  min-height:100vh;display:flex;justify-content:center;align-items:center;
  padding:80px 40px;box-sizing:border-box;position:relative;overflow:hidden;color:#fff
}
.experience-step::before{
  content:"";position:absolute;inset:0;z-index:1;background-color:inherit;
  transform:skewY(-8deg) translateY(100%);transition:transform 1s cubic-bezier(.25,1,.5,1)
}
.is-visible.experience-step::before{transform:skewY(0) translateY(0)}
.experience-step.intro-step{background:#f4f4f4;color:#111}
#nickel{background:#f36f21}
#leclerc{background:#005a9c}
#dvi{background:#343a40}

.experience-bg-image{
  position:absolute;inset:0;background-size:cover;background-position:center;opacity:.1;z-index:0;transform:scale(1.1)
}
#nickel .experience-bg-image{background-image:url('img/nickel-bg.jpg')}
#leclerc .experience-bg-image{background-image:url('img/leclerc-bg.jpg')}
#dvi .experience-bg-image{background-image:url('img/dvi-bg.jpg')}

.experience-content{
  display:flex;align-items:center;gap:60px;max-width:1100px;width:100%;position:relative;z-index:2
}
.experience-content.reverse{flex-direction:row-reverse}
.company-logo-container{
  flex:1;max-width:280px;background:rgba(255,255,255,.1);padding:30px;border-radius:20px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)
}
.company-logo-container img{width:100%;height:auto;filter:drop-shadow(0 4px 15px rgba(0,0,0,.2))}
.experience-text{flex:2;text-align:left}
.experience-text .dates{font-weight:300;margin-bottom:5px;opacity:.8}
.experience-text h2{
  font-size:2.8rem;margin-bottom:25px;line-height:1.2;text-shadow:0 2px 10px rgba(0,0,0,.2)
}
.experience-text h2 strong{font-weight:700}
.experience-text ul{list-style:none;padding:0}
.experience-text li{margin-bottom:12px;font-size:1.1rem;padding-left:25px;position:relative}
.experience-text li::before{content:'→';position:absolute;left:0;opacity:.7}
.intro-step .intro-content{text-align:center}
.intro-step .intro-content h1{font-size:3.5rem;color:#2176c1}
.intro-step .intro-content p{font-size:1.2rem;color:#555}
.scroll-to-next{
  position:absolute;bottom:30px;left:50%;width:28px;height:28px;border-left:3px solid #fff;border-bottom:3px solid #fff;
  transform:rotate(-45deg);cursor:pointer;opacity:.7;animation:bounce-arrow-light 2s infinite;transition:opacity .3s;z-index:10
}
.intro-step .scroll-to-next{border-color:#33aaff}
.scroll-to-next:hover{opacity:1}
@keyframes bounce-arrow-light{
  0%,20%,50%,80%,100%{transform:translateY(0) rotate(-45deg)}
  40%{transform:translateY(-15px) rotate(-45deg)}
  60%{transform:translateY(-7px) rotate(-45deg)}
}
.animated-item{opacity:0;transform:translateY(30px);transition:opacity .6s ease-out .4s,transform .6s ease-out .4s}
.is-visible .animated-item{opacity:1;transform:translateY(0)}
.is-visible .animated-item:nth-child(2){transition-delay:.6s}

/* ---------- Journey overrides (intro + bandeau logos) ---------- */
.journey-page .page-section{display:none !important}

.journey-page .experience-step.intro-step{
  position:relative;background:transparent !important;
  min-height:calc(100vh - 60px) !important;
  padding:80px 20px 40px !important;display:flex !important;flex-direction:column;
  justify-content:flex-start !important;align-items:center !important;color:#111 !important
}
.journey-page .experience-step.intro-step::before{background:transparent !important}
.journey-page .intro-content{max-width:700px;margin:0 auto;text-align:center}
.journey-page .intro-content h1{margin:0 0 .5em !important;font-size:2.5rem}
.journey-page .intro-content p{margin:0 0 1.5em !important;font-size:1.1rem;color:rgba(0,0,0,.75)}

.journey-page .companies-logos{
  list-style:none;display:flex;justify-content:center;align-items:center;gap:3rem;
  margin:2rem auto;padding:0
}
.journey-page .companies-logos li img{
  width:120px;max-width:25vw;height:auto;transition:transform .3s ease;cursor:pointer
}
.journey-page .companies-logos li img:hover{transform:scale(1.15)}
@media (max-width:480px){
  .journey-page .companies-logos li img{width:80px;max-width:30vw}
}

/* ---------- RGPD page ---------- */
.rgpd-main{
  background:#fff;border-radius:32px;box-shadow:0 4px 28px rgba(80,130,180,.07);
  padding:48px 30px 38px;display:flex;flex-direction:column;align-items:center
}
.rgpd-illu{
  width:120px;height:120px;margin-bottom:18px;border-radius:50%;
  background:linear-gradient(120deg,#e7f4fe 60%,#c9e5fb 100%);
  display:flex;align-items:center;justify-content:center
}
.rgpd-illu img{width:70px;height:70px;object-fit:contain}
.rgpd-title{font-size:2rem;font-weight:700;color:#2176c1;margin-bottom:12px;text-align:center}
.rgpd-sub{color:#3aa8f2;font-size:1.15rem;margin-bottom:26px;text-align:center;font-weight:600}
.rgpd-section{margin-bottom:22px;text-align:left;width:100%}
.rgpd-section h2{font-size:1.19rem;color:#1571e2;margin:18px 0 9px}
.rgpd-section p{font-size:1rem;color:#333;margin-bottom:9px}

/* =========================================
   CSS V3 — PARTIE 5/5
   Page RÉALISATIONS (E5 + Mosaïques + Veille)
   ========================================= */

/* ---- En-tête de page ---- */
#realisations .section-header{
  max-width:1000px;margin:30px auto 10px;text-align:center
}
#realisations .section-header h1{
  font-size:2.6rem;font-weight:800;line-height:1.15;margin-bottom:10px;
  background:linear-gradient(90deg,#3aa8f2,#005b96);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent
}
#realisations .section-header p{
  color:#415276;font-size:1.05rem;max-width:860px;margin:0 auto
}

/* Titres de blocs */
#realisations .formations-title{
  font-size:2rem;font-weight:700;color:#2176c1;text-transform:uppercase;letter-spacing:.5px;
  display:inline-block;padding-bottom:6px;border-bottom:2px solid #33aaff;margin:6px auto 24px
}

/* Projets E5 (cartes) */
#projets-e5{max-width:1100px;margin:26px auto;padding:0 12px}
.real-card{
  width:100%;box-sizing:border-box;
  background:#fff;border:1.5px solid #e6eef8;border-radius:16px;
  padding:22px 22px 18px;margin:18px auto 26px;
  box-shadow:0 6px 18px rgba(80,130,180,.08);
  transition:transform .25s ease, box-shadow .25s ease;
  text-align:left;max-width:1000px
}
.real-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(58,168,242,.16)}
.real-card h3{font-size:1.28rem;color:#171e39;margin-bottom:6px}
.real-meta{
  display:flex;flex-wrap:wrap;gap:10px;font-size:.95rem;color:#5b6a84;margin-bottom:12px
}

/* Accordéons <details> */
.real-card details{
  background:#fbfdff;border:1px solid #e6eef8;border-radius:12px;margin:10px 0;overflow:clip
}
.real-card details + details{margin-top:12px}
.real-card summary{
  list-style:none;display:flex;align-items:center;min-height:46px;padding:12px 16px;
  font-weight:700;color:#2176c1;cursor:pointer;user-select:none;outline:none
}
.real-card summary::-webkit-details-marker{display:none}
.real-card summary::after{
  content:"▸";flex:0 0 16px;text-align:right;margin-left:auto;
  transform:rotate(0deg);transition:transform .22s ease;color:#2176c1;font-weight:900
}
.real-card details[open] summary::after{transform:rotate(90deg)}
.real-card details > *:not(summary){padding:0 24px 14px 24px;animation:acc-fade .18s ease-in}
@keyframes acc-fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.real-card p,.real-card ul,.real-card li{color:#2b3551;font-size:.98rem;line-height:1.58}
.proofs-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px;margin-top:12px
}
.proofs-grid img{
  width:100%;height:auto;border-radius:10px;border:1px solid #e4ecf5;
  box-shadow:0 3px 8px rgba(0,0,0,.06);background:#fff
}

/* Mosaïques */
#mosaiques{max-width:1100px;margin:10px auto 18px;padding:0 12px}
.mosaic-title{
  font-size:1.05rem;font-weight:800;color:#2176c1;text-transform:uppercase;letter-spacing:.6px;
  margin:18px 0 2px 6px
}
.mosaic-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;
   margin-top: 0;
}
.mosaic-card.tile{
  background:#fff;border:1.5px solid #e9eef6;border-radius:14px;padding:16px 16px 18px;min-height:120px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease
}
.mosaic-card.tile:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(58,168,242,.14);border-color:#cfe4fb}
.mosaic-card.tile h4{font-size:1.02rem;color:#171e39;margin-bottom:6px}
.mosaic-card.tile p{color:#465472;font-size:.95rem}

/* Veille & Preuves globales */
#veille{
  background:#fff;border:1px solid #e6eef8;border-radius:16px;
  box-shadow:0 4px 18px rgba(0,0,0,.06);padding:22px 20px;max-width:1000px;margin:8px auto 6px
}
#veille .formations-title{margin-bottom:10px}
.veille-list{padding-left:18px;margin:10px 0 0}
.veille-list li{color:#415276}
.veille-list li::marker{color:#33aaff}

/* Responsive finaux */
@media (max-width:1000px){
  #realisations .section-header h1{font-size:2.2rem}
  .real-card{padding:18px 16px}
  .real-card h3{font-size:1.16rem}
}
@media (max-width:700px){
  #realisations .section-header p{font-size:1rem;padding:0 10px}
  .real-meta{font-size:.9rem}
  .mosaic-grid{grid-template-columns:1fr 1fr;gap:12px}
}
@media (max-width:520px){
  .mosaic-grid{grid-template-columns:1fr}
  .proofs-grid{grid-template-columns:1fr}
}

/* News feed simple styles */
.news-feed {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}
.news-card {
  background-color: #f9f9f9;
  border-left: 5px solid #3498db;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.news-card h3 {
  margin-top: 0;
  color: #2c3e50;
}
.news-card a {
  display: inline-block;
  margin-top: 10px;
  color: #3498db;
  font-weight: bold;
  text-decoration: none;
}
/* Bouton Télécharger PDF (utilisé par <a class="btn-download">) */
.btn-download{
  display:inline-block;
  background:#33aaff;
  color:#fff;
  font-weight:700;
  text-decoration:none;
  padding:10px 16px;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(51,170,255,.14);
  border:1px solid rgba(0,0,0,0.04);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  align-self:flex-start;
  margin-top:14px;
}

/* Icône emoji ou texte dans le bouton (si présent) */
.btn-download::before{
  content:"";
  display:inline-block;
  margin-right:8px;
  vertical-align:middle;
}

/* Hover / focus visibles et accessibles */
.btn-download:hover,
.btn-download:focus{
  background:#2176c1;
  box-shadow:0 10px 26px rgba(33,118,193,.18);
  transform:translateY(-2px);
  outline:none;
}

/* Focus keyboard très visible */
.btn-download:focus{
  box-shadow:0 0 0 4px rgba(51,170,255,.15),0 10px 26px rgba(33,118,193,.18);
}

/* Version large / full-width pour les cartes XL */
.real-card--xl .btn-download{
  display:inline-block;
  margin-top:18px;
}

/* Pour que le bouton soit centré dans certains contextes (optionnel) */
.btn-download--center{
  display:block;
  margin:18px auto 0;
}

/* Petite adaptation mobile */
@media (max-width:900px){
  .btn-download{
    padding:10px 14px;
    font-size:.98rem;
  }
}

/* Assure que le lien PDF ne casse pas la mise en page dans <details> */
.real-card details > *:not(summary) .btn-download,
.real-card details .btn-download{
  margin-top:12px;
}
/* Timeline - liens cliquables visuels */
.timeline-links{list-style:none;padding:8px 0 0;margin:0;display:flex;gap:8px;flex-wrap:wrap}
.timeline-links li{margin:0;padding:0}

/* Pill / badge */
.timeline-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  background:#f2fbff;
  color:#0b3a57;
  border:1px solid rgba(51,170,255,0.15);
  border-radius:999px;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 4px 14px rgba(51,170,255,0.06);
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;
  font-size:.95rem;
}

/* small icon style (if you keep emojis) */
.timeline-pill::before{font-size:1rem;line-height:1}

/* Hover / focus */
.timeline-pill:hover,
.timeline-pill:focus{
  background:#e6f6ff;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(51,170,255,0.12);
  outline:none;
}

/* Secondary simple link style (inside sentence) */
.timeline-link{color:#33aaff;font-weight:700;text-decoration:none;border-bottom:2px solid transparent;transition:border-color .15s}
.timeline-link:hover,.timeline-link:focus{border-color:#bfe7ff}

/* Ensure tappable area on mobile */
@media (max-width:900px){
  .timeline-pill{padding:10px 14px;font-size:1rem}
}
/* ---------- Company cards solid color version (remplacement unique) ---------- */
.company-row{
  display:flex;
  gap:20px;
  align-items:stretch;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-top:18px;
}

/* Solid-color card */
.company-card{
  flex:1 1 calc(33.333% - 14px);
  min-width:260px;
  max-width:360px;
  color:#fff; /* texte clair par défaut */
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 14px 32px rgba(10,30,60,0.08);
  border:1px solid rgba(0,0,0,0.06);
  display:flex;
  flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease;
  position:relative;
}

/* top area: thumbnail + title on semi-transparent overlay to keep contrast */
.company-top{
  display:flex;
  gap:12px;
  align-items:center;
  padding:14px;
  background:rgba(255,255,255,0.06);
  backdrop-filter: blur(3px);
}
.company-thumb{
  width:64px;height:64px;border-radius:10px;object-fit:cover;border:2px solid rgba(255,255,255,0.12);
  flex:0 0 64px;
  background:#fff;
}
.company-title strong{display:block;font-size:1rem;color:#fff}
.company-title small{display:block;font-size:.9rem;color:rgba(255,255,255,0.92);font-weight:600}

/* Body retains readable contrast (text on colored background) */
.company-body{padding:14px 16px 18px;color:rgba(255,255,255,0.95);font-size:.98rem;line-height:1.45}
.company-role{margin:0 0 8px 0;font-weight:700}
.company-features{margin:6px 0 0 18px;padding:0}
.company-features li{margin-bottom:8px}

/* Footer tags */
.company-footer{display:flex;gap:8px;align-items:center;padding:12px 16px;margin-top:auto;background:rgba(255,255,255,0.04)}
.company-tag{background:rgba(255,255,255,0.12);color:#fff;padding:6px 10px;border-radius:999px;font-weight:700;font-size:.85rem}
.company-year{margin-left:auto;font-size:.85rem;color:rgba(255,255,255,0.92);padding:6px 8px;border-radius:8px;background:rgba(255,255,255,0.06)}

/* Hover lift */
.company-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(10,30,60,0.12)}

/* THEME COLORS — full card background (solid but with subtle gradient) */
/* Nickel orange (readable) */
.company-card[data-theme="nickel"]{
  background:linear-gradient(180deg,#f36f21 0%, #ff944d 100%);
  color:#101010;
}
.company-card[data-theme="nickel"] .company-title strong,
.company-card[data-theme="nickel"] .company-title small{
  color:#081421;
}
.company-card[data-theme="nickel"] .company-footer,
.company-card[data-theme="nickel"] .company-top{
  background:rgba(255,255,255,0.12);
}

/* Leclerc blue (adjusted for contrast) */
.company-card[data-theme="leclerc"]{
  background:linear-gradient(180deg,#005a9c 0%, #3b79b3 100%);
}
.company-card[data-theme="leclerc"] .company-title strong,
.company-card[data-theme="leclerc"] .company-title small{
  color:#fff;
}

/* DVI dark (legible) */
.company-card[data-theme="dvi"]{
  background:linear-gradient(180deg,#1f2a36 0%, #3b4750 100%);
}
.company-card[data-theme="dvi"] .company-title strong,
.company-card[data-theme="dvi"] .company-title small{
  color:#fff;
}

/* Responsive: stack on mobile */
@media (max-width:900px){
  .company-row{flex-direction:column;gap:14px}
  .company-card{flex:1 1 100%;max-width:none}
  .company-top{padding:12px}
  .company-thumb{width:56px;height:56px}
}

/* Accessibility focus */
.company-card:focus-within,
.company-card:focus{outline:3px solid rgba(255,255,255,0.12);outline-offset:3px}
/* Overlay link to make full card clickable without breaking layout */
.company-link{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  text-indent:-9999px; /* hide text if any */
}

/* Ensure content remains interactive (links inside card still clickable) */
.company-card a:not(.company-link){ position:relative; z-index:2; }

/* Focus-visible style when tabbing the overlay link */
.company-link:focus{
  outline:3px solid rgba(255,255,255,0.28);
  outline-offset:3px;
  border-radius:12px;
}

/* When hovering card, keep same hover visual but ensure overlay doesn't block pointer-events for inner links */
.company-card:hover{ transform:translateY(-6px); box-shadow:0 30px 60px rgba(10,30,60,0.12); }

/* If you want the overlay to be ignored by pointer for inner elements (e.g., download buttons),
   ensure those inner elements have pointer-events:auto and z-index higher than .company-link */
.company-card .company-footer a,
.company-card .company-body a{
  position:relative; z-index:2; pointer-events:auto;
}