/* ═══════════════════════════════════════════════
   RESET & VARIABLES
═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:         #1b2340;
  --navy2:        #232c4a;
  --hero-bg:      #5e7188;
  --gold:         #c8a84b;
  --gold2:        #e8c96a;
  --card:         #e8ecf2;
  --card2:        #dde2ea;
  --white:        #ffffff;
  --text:         #1b2340;
  --muted:        #4a5568;
  --accent:       #e67e22;
  --blue:         #2980b9;
  --dark-section: #1a2035;
  --shadow-sm:    0 2px 10px rgba(0,0,0,0.07);
  --shadow-md:    0 6px 28px rgba(0,0,0,0.13);
  --shadow-lg:    0 16px 48px rgba(0,0,0,0.2);
  --radius:       14px;
  --tr:           0.28s cubic-bezier(.4,0,.2,1);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════════ */
@keyframes fadeInDown {
  from { opacity:0; transform:translateY(-24px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(36px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes bounce {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%      { transform:translateX(-50%) translateY(9px); }
}
@keyframes pulseDot {
  0%,100% { box-shadow:0 0 0 0 rgba(27,35,64,.35); }
  50%      { box-shadow:0 0 0 7px rgba(27,35,64,0); }
}
@keyframes modalIn {
  from { opacity:0; transform:scale(.92) translateY(20px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}

/* ═══════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════ */
nav {
  position: fixed;
  top:0; left:0; right:0;
  z-index: 200;
  background: var(--navy);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2.5rem;
  height: 60px;
  box-shadow: 0 2px 20px rgba(0,0,0,.3);
  animation: fadeInDown .5s ease both;
}

.nav-logo {
  display: flex; align-items: center; gap: .6rem;
  cursor: pointer; text-decoration: none;
  transition: transform var(--tr);
}
.nav-logo:hover { transform: scale(1.04); }
.nav-logo-box {
  width:34px; height:34px;
  border: 2px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  border-radius: 4px;
  transition: background var(--tr);
}
.nav-logo:hover .nav-logo-box { background: var(--gold); }
.nav-logo-box span {
  font-family: 'Playfair Display', serif;
  color: var(--gold); font-size:1.1rem; font-weight:700;
  transition: color var(--tr);
}
.nav-logo:hover .nav-logo-box span { color: var(--navy); }
.nav-logo-text {
  color:var(--white); font-size:.7rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; line-height:1.2;
}
.nav-logo-text small { display:block; font-weight:300; letter-spacing:.08em; font-size:.6rem; }

.nav-links { display:flex; gap:1.8rem; }
.nav-links a {
  color: rgba(255,255,255,.8);
  text-decoration:none; font-size:.82rem; font-weight:500;
  letter-spacing:.04em; position:relative; padding-bottom:4px;
  transition: color var(--tr);
}
.nav-links a::after {
  content:""; position:absolute; bottom:0; left:50%;
  width:0; height:2px; background:var(--gold); border-radius:2px;
  transition: width var(--tr), left var(--tr);
}
.nav-links a:hover { color:var(--gold2); }
.nav-links a:hover::after { width:100%; left:0; }

/* Hamburger */
.nav-hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; background:none; border:none; padding:4px;
}
.nav-hamburger span {
  display:block; width:24px; height:2px;
  background:var(--white); border-radius:2px;
  transition: transform var(--tr), opacity var(--tr);
}
.nav-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.nav-mobile {
  display:none; flex-direction:column;
  position:fixed; top:60px; left:0; right:0;
  background:var(--navy2); z-index:199;
  padding:.5rem 0; box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.nav-mobile.open { display:flex; }
.nav-mobile a {
  color:rgba(255,255,255,.85); text-decoration:none;
  padding:.85rem 2rem; font-size:.9rem; font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition: background var(--tr), color var(--tr);
}
.nav-mobile a:hover { background:rgba(255,255,255,.07); color:var(--gold2); }

/* ═══════════════════════════════════════════════
   HERO — 100vh
═══════════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  background: var(--hero-bg);
  display: flex; flex-direction:column; align-items:center; justify-content:center;
  text-align: center;
  padding: 80px 2rem 6rem;
  position: relative;
  overflow: hidden;
}

/* Image de fond optionnelle */
.hero-bg-img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:.22; pointer-events:none;
}

/* Radial glow */
.hero::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(ellipse 65% 55% at 50% 45%,
    rgba(255,255,255,.1) 0%, transparent 70%);
  pointer-events:none;
}

/* Photo de profil */
.hero-avatar {
  width:110px; height:110px; border-radius:50%;
  border:3px solid var(--gold2);
  object-fit:cover; object-position:center;
  margin-bottom:1.4rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  animation: fadeIn .6s .1s ease both;
  transition: transform var(--tr), box-shadow var(--tr);
  position:relative; z-index:1;
}
.hero-avatar:hover {
  transform:scale(1.06);
  box-shadow:0 12px 40px rgba(200,168,75,.45);
}

/* Placeholder si pas de photo */
.hero-avatar-placeholder {
  width:110px; height:110px; border-radius:50%;
  border:3px dashed var(--gold2);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:.3rem;
  margin-bottom:1.4rem;
  animation:fadeIn .6s .1s ease both;
  position:relative; z-index:1;
  background:rgba(255,255,255,.08);
  color:var(--gold2); font-size:.65rem; text-align:center; line-height:1.3; padding:.5rem;
}

.hero-badge {
  border:2px solid var(--gold2); color:var(--gold2); border-radius:20px;
  padding:.25rem 1.4rem; font-size:.85rem; font-weight:600;
  letter-spacing:.08em; margin-bottom:1.4rem;
  display:inline-block; position:relative; z-index:1;
  animation:fadeInDown .6s .25s ease both;
  transition: background var(--tr), color var(--tr);
}
.hero-badge:hover { background:var(--gold2); color:var(--navy); }

.hero h1 {
  font-family:'Playfair Display', serif;
  font-size: clamp(2.4rem,6vw,4rem);
  font-weight:800; color:var(--white); line-height:1.1;
  animation:fadeInUp .7s .4s ease both;
  position:relative; z-index:1;
}

.hero-subtitle {
  color:rgba(255,255,255,.78);
  font-size:clamp(.85rem,2vw,1rem); font-weight:400;
  margin-top:.9rem; letter-spacing:.04em;
  animation:fadeInUp .7s .55s ease both;
  position:relative; z-index:1;
}

/* Boutons hero */
.hero-actions {
  display:flex; gap:1rem; margin-top:2rem;
  flex-wrap:wrap; justify-content:center;
  animation:fadeInUp .7s .7s ease both;
  position:relative; z-index:1;
}
.btn-hero-primary {
  background:var(--gold); color:var(--navy);
  border:none; border-radius:8px; padding:.75rem 2rem;
  font-family:'DM Sans',sans-serif; font-size:.9rem; font-weight:700;
  cursor:pointer; text-decoration:none; letter-spacing:.04em;
  transition: transform var(--tr), box-shadow var(--tr), background var(--tr);
  box-shadow:0 4px 16px rgba(200,168,75,.45);
}
.btn-hero-primary:hover {
  background:var(--gold2); transform:translateY(-3px);
  box-shadow:0 8px 28px rgba(200,168,75,.55);
}
.btn-hero-secondary {
  background:transparent; color:var(--white);
  border:2px solid rgba(255,255,255,.55); border-radius:8px;
  padding:.73rem 2rem; font-family:'DM Sans',sans-serif;
  font-size:.9rem; font-weight:500; cursor:pointer;
  text-decoration:none; letter-spacing:.04em;
  transition: border-color var(--tr), background var(--tr), transform var(--tr);
}
.btn-hero-secondary:hover {
  border-color:var(--white); background:rgba(255,255,255,.1); transform:translateY(-3px);
}

/* Flèche rebondissante */
.hero-arrow {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  width:44px; height:44px; background:var(--navy2); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:none; z-index:1;
  animation:bounce 2s 1.2s ease-in-out infinite;
  box-shadow:var(--shadow-md);
  transition: background var(--tr), box-shadow var(--tr);
}
.hero-arrow:hover {
  background:var(--gold); box-shadow:0 6px 24px rgba(200,168,75,.45);
  animation-play-state:paused;
}

/* ═══════════════════════════════════════════════
   SECTION TITLES
═══════════════════════════════════════════════ */
.section-title {
  text-align:center; font-family:'Playfair Display',serif;
  font-size:clamp(1.8rem,4vw,2.4rem); font-weight:800;
  color:var(--navy); margin-bottom:.5rem;
}
.section-divider {
  width:60px; height:3px;
  background:linear-gradient(90deg,var(--navy),var(--gold));
  margin:.4rem auto 2.5rem; border-radius:2px;
}

/* Scroll reveal */
.reveal {
  opacity:0; transform:translateY(28px);
  transition:opacity .55s ease, transform .55s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* ═══════════════════════════════════════════════
   A PROPOS
═══════════════════════════════════════════════ */
#apropos { padding:5rem 4rem 4rem; background:var(--white); }
.apropos-top { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:1.5rem; }

/* Cards */
.card {
  background:var(--card); border-radius:var(--radius);
  padding:1.8rem; box-shadow:var(--shadow-sm);
  transition: transform var(--tr), box-shadow var(--tr);
}
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }

.card-profile h2 { font-size:1.15rem; font-weight:700; color:var(--navy); margin-bottom:.2rem; }
.card-profile .subtitle { font-size:.82rem; color:var(--muted); font-style:italic; margin-bottom:1.2rem; }

.contact-item {
  display:flex; align-items:center; gap:.7rem;
  font-size:.85rem; color:var(--text); margin-bottom:.7rem;
  transition:transform var(--tr);
}
.contact-item:hover { transform:translateX(4px); }
.contact-item a { color:var(--blue); text-decoration:none; transition:color var(--tr); }
.contact-item a:hover { color:var(--navy); text-decoration:underline; }
.contact-icon {
  width:28px; height:28px; background:var(--card2);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:background var(--tr), transform var(--tr);
}
.contact-item:hover .contact-icon { background:var(--navy); transform:scale(1.15); }
.contact-item:hover .contact-icon svg { stroke:white; }

/* Bouton CV */
.btn-cv {
  display:block; width:100%; margin-top:1.4rem;
  background:var(--navy2); color:var(--white); border:none;
  border-radius:8px; padding:.85rem 1rem;
  font-family:'DM Sans',sans-serif; font-size:.88rem; font-weight:600;
  text-align:center; cursor:pointer; letter-spacing:.04em; text-decoration:none;
  position:relative; overflow:hidden;
  transition:background var(--tr), box-shadow var(--tr), transform var(--tr);
}
.btn-cv::before {
  content:""; position:absolute; top:0; left:-100%;
  width:60%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.18),transparent);
  transition:left .45s ease;
}
.btn-cv:hover::before { left:140%; }
.btn-cv:hover {
  background:var(--gold); color:var(--navy);
  box-shadow:0 6px 20px rgba(200,168,75,.4); transform:translateY(-2px);
}
.btn-cv:active { transform:translateY(0) scale(.98); box-shadow:none; }

.card-about h3 {
  font-size:1.05rem; font-weight:700; color:var(--navy);
  margin-bottom:.9rem; display:flex; align-items:center; gap:.5rem;
}
.card-about p { font-size:.84rem; line-height:1.65; color:var(--muted); margin-bottom:.8rem; }
.two-cols { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-top:1rem; }
.mini-card {
  background:var(--card2); border-radius:10px; padding:1rem;
  transition:background var(--tr), transform var(--tr);
}
.mini-card:hover { background:var(--navy); transform:scale(1.02); }
.mini-card:hover h4,.mini-card:hover li { color:var(--white); }
.mini-card:hover li::before { color:var(--gold2); }
.mini-card h4 { font-size:.8rem; font-weight:700; color:var(--navy); margin-bottom:.6rem; transition:color var(--tr); }
.mini-card ul { list-style:none; padding:0; }
.mini-card ul li { font-size:.78rem; color:var(--muted); padding:.15rem 0 .15rem .9rem; position:relative; transition:color var(--tr); }
.mini-card ul li::before { content:"•"; position:absolute; left:0; color:var(--navy); transition:color var(--tr); }

/* Bottom */
.apropos-bottom { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.exp-card h3,.parcours-card h3 {
  font-size:1rem; font-weight:700; color:var(--navy);
  margin-bottom:1.2rem; display:flex; align-items:center; gap:.5rem;
}

/* Expérience items */
.exp-item {
  background:var(--white); border-radius:10px; padding:1.1rem;
  margin-bottom:.9rem; border-left:3px solid transparent;
  transition:border-color var(--tr), box-shadow var(--tr), transform var(--tr);
}
.exp-item:last-child { margin-bottom:0; }
.exp-item:hover { border-left-color:var(--gold); box-shadow:var(--shadow-sm); transform:translateX(4px); }

/* Logo entreprise */
.exp-logo {
  height:24px; width:auto; max-width:120px;
  object-fit:contain; margin-bottom:.5rem; display:block;
}
/* Fallback texte si pas de logo */
.exp-logo-placeholder {
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:.4rem;
}
.exp-logo-placeholder.orange { color:var(--accent); }
.exp-logo-placeholder.blue   { color:var(--blue); }

.exp-title { font-size:.88rem; font-weight:700; color:var(--navy); margin-bottom:.25rem; }
.exp-meta { font-size:.72rem; color:var(--muted); margin-bottom:.4rem; display:flex; gap:.8rem; flex-wrap:wrap; }
.exp-meta span { display:flex; align-items:center; gap:.3rem; }
.exp-tasks { list-style:none; padding:0; }
.exp-tasks li { font-size:.78rem; color:var(--muted); padding:.15rem 0 .15rem 1.2rem; position:relative; transition:color var(--tr); }
.exp-tasks li::before { content:"›"; position:absolute; left:0; color:var(--navy); font-weight:700; }
.exp-item:hover .exp-tasks li { color:var(--text); }

/* Timeline */
.timeline { position:relative; padding-left:1.2rem; }
.timeline::before {
  content:""; position:absolute; left:0; top:10px; bottom:10px;
  width:2px; background:linear-gradient(180deg,var(--navy),var(--gold)); border-radius:2px;
}
.timeline-item { position:relative; margin-bottom:1rem; padding-left:1.2rem; }
.timeline-dot {
  position:absolute; left:-1.55rem; top:8px;
  width:10px; height:10px; border-radius:50%;
  background:var(--navy); border:2px solid var(--white);
  animation:pulseDot 2.5s ease-in-out infinite;
}

/* School card */
.school-card {
  background:var(--white); border-radius:10px; padding:1rem 1.1rem;
  border-top:2px solid transparent;
  transition:box-shadow var(--tr), transform var(--tr), border-top-color var(--tr);
}
.school-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); border-top-color:var(--gold); }
.school-header { display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem; }

/* Logo école IMAGE */
.school-logo-img {
  width:32px; height:32px; border-radius:6px;
  object-fit:cover; flex-shrink:0;
  transition:transform var(--tr);
}
.school-card:hover .school-logo-img { transform:rotate(-6deg) scale(1.15); }

/* Icône de secours si pas de logo */
.school-icon {
  width:32px; height:32px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700; color:var(--white); flex-shrink:0;
  transition:transform var(--tr);
}
.school-card:hover .school-icon { transform:rotate(-6deg) scale(1.15); }
.school-icon.orange { background:#e67e22; }
.school-icon.teal   { background:#16a085; }
.school-icon.red    { background:#c0392b; }

.school-name { font-size:.88rem; font-weight:700; color:var(--navy); }
.school-sub  { font-size:.72rem; color:var(--muted); }
.school-desc { font-size:.75rem; color:var(--muted); line-height:1.55; margin-bottom:.6rem; }

/* ── BOUTON "TABLEAU DE SYNTHÈSE" ── */
.btn-synthese {
  display:inline-flex; align-items:center; gap:.45rem;
  background:var(--navy2); color:var(--white);
  border:none; border-radius:6px;
  font-family:'DM Sans',sans-serif; font-size:.72rem; font-weight:600;
  padding:.38rem .9rem; cursor:pointer; letter-spacing:.04em; margin-bottom:.6rem;
  position:relative; overflow:hidden;
  transition:background var(--tr), box-shadow var(--tr), transform var(--tr);
}
.btn-synthese::before {
  content:""; position:absolute; top:0; left:-100%;
  width:60%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.2),transparent);
  transition:left .4s ease;
}
.btn-synthese:hover::before { left:140%; }
.btn-synthese:hover {
  background:var(--gold); color:var(--navy);
  box-shadow:0 4px 14px rgba(200,168,75,.45); transform:translateY(-2px);
}
.btn-synthese svg { transition:transform var(--tr); }
.btn-synthese:hover svg { transform:translateX(3px); }

.school-tasks { list-style:none; padding:0; }
.school-tasks li { font-size:.74rem; color:var(--muted); padding:.1rem 0 .1rem 1.2rem; position:relative; transition:color var(--tr); }
.school-tasks li::before { content:"›"; position:absolute; left:0; color:var(--navy); font-weight:700; }
.school-card:hover .school-tasks li { color:var(--text); }

/* ═══════════════════════════════════════════════
   DOCUMENTATION
═══════════════════════════════════════════════ */
#documentation { padding:5rem 4rem 4rem; background:var(--white); }

.doc-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
  margin-top:2.5rem;
}

.doc-card {
  background:var(--card); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform var(--tr), box-shadow var(--tr);
}
.doc-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }

/* Zone image/logo en haut de la carte */
.doc-card-img {
  width:100%; height:160px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; flex-shrink:0;
}
.doc-card-img img {
  max-width:70%; max-height:80%;
  object-fit:contain;
}
.doc-card-img--dark  { background:#111; }
.doc-card-img--gray  { background:#c8c8c8; }
.doc-card-img--white { background:#fff; border-bottom:1px solid var(--card2); }

.doc-img-text {
  font-size:1.05rem; font-weight:700; letter-spacing:.08em;
  color:#555; text-align:center;
}
.doc-img-fallback {
  color:#fff; font-size:1rem; font-weight:700;
  text-align:center; line-height:1.4;
}

/* Corps de la carte */
.doc-card-body {
  padding:1.3rem 1.3rem 1.5rem;
  display:flex; flex-direction:column; gap:.7rem; flex:1;
}
.doc-card-body h3 {
  font-size:.9rem; font-weight:700; color:var(--navy); line-height:1.45;
}
.doc-card-body p {
  font-size:.82rem; color:var(--muted); line-height:1.6; flex:1;
}

/* Bouton "Voir plus" */
.btn-voirplus {
  display:inline-flex; align-items:center; gap:.35rem;
  background:var(--card2); border:none; border-radius:8px;
  padding:.6rem 1.1rem; font-family:'DM Sans',sans-serif;
  font-size:.82rem; font-weight:600; color:var(--navy);
  cursor:pointer; align-self:flex-start;
  transition:background var(--tr), color var(--tr), transform var(--tr), box-shadow var(--tr);
}
.btn-voirplus:hover {
  background:var(--navy); color:var(--white);
  transform:translateX(3px); box-shadow:var(--shadow-sm);
}
.btn-voirplus--modal {
  margin-top:1.2rem; align-self:stretch;
  background:var(--navy2); color:var(--white);
  justify-content:center; padding:.85rem 1rem;
}
.btn-voirplus--modal:hover {
  background:var(--gold); color:var(--navy);
  transform:none; box-shadow:0 6px 20px rgba(200,168,75,.4);
}

/* Modal documentation — plus large */
.modal-box--doc {
  max-width:700px;
}
.doc-modal-subtitle {
  font-size:.9rem; color:var(--navy); text-align:center;
  margin-bottom:1.4rem; line-height:1.5;
}
.doc-modal-text {
  font-size:.84rem; color:var(--muted); line-height:1.7;
  margin-bottom:.85rem;
}
.doc-modal-list {
  list-style:none; padding:0; margin-bottom:.85rem; margin-left:.5rem;
}
.doc-modal-list li {
  font-size:.84rem; color:var(--muted); line-height:1.65;
  padding:.2rem 0 .2rem 1.2rem; position:relative;
}
.doc-modal-list li::before { content:"•"; position:absolute; left:0; color:var(--navy); font-weight:700; }

/* ═══════════════════════════════════════════════
   MODAL — Tableau de synthèse
═══════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; z-index:1000;
  background:rgba(10,15,30,.72);
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal-overlay.open .modal-box { animation:modalIn .3s ease both; }

.modal-box {
  background:var(--white); border-radius:16px;
  width:100%; max-width:600px; max-height:85vh; overflow-y:auto;
  box-shadow:var(--shadow-lg); padding:2.2rem 2rem 2rem;
  position:relative;
}
.modal-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.2rem; gap:1rem; }
.modal-header h2 { font-family:'Playfair Display',serif; font-size:1.35rem; color:var(--navy); }
.modal-close {
  background:var(--card); border:none; cursor:pointer;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:background var(--tr), transform var(--tr);
}
.modal-close:hover { background:var(--navy); transform:rotate(90deg); }
.modal-close:hover svg { stroke:white; }
.modal-close svg { stroke:var(--navy); transition:stroke var(--tr); }

.modal-divider { height:2px; background:linear-gradient(90deg,var(--navy),var(--gold)); border-radius:2px; margin-bottom:1.4rem; }

.modal-section { margin-bottom:1.3rem; }
.modal-section h3 { font-size:.8rem; font-weight:700; color:var(--gold); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.6rem; }
.modal-section ul { list-style:none; padding:0; }
.modal-section ul li { font-size:.83rem; color:var(--muted); line-height:1.65; padding:.2rem 0 .2rem 1.2rem; position:relative; }
.modal-section ul li::before { content:"›"; position:absolute; left:0; color:var(--navy); font-weight:700; }

/* ═══════════════════════════════════════════════
   FORMATION
═══════════════════════════════════════════════ */
#formation { padding:5rem 4rem 4rem; background:var(--white); }
.formation-dark { background:var(--dark-section); border-radius:16px; padding:2.5rem; color:var(--white); box-shadow:var(--shadow-lg); }
.formation-dark h3 { font-size:1rem; font-weight:700; color:var(--white); margin-bottom:1.5rem; border-bottom:1px solid rgba(255,255,255,.15); padding-bottom:.7rem; }
.formation-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-bottom:2rem; }
.formation-col { background:rgba(255,255,255,.04); border-radius:10px; padding:1.1rem; border:1px solid rgba(255,255,255,.07); transition:background var(--tr), transform var(--tr), border-color var(--tr); }
.formation-col:hover { background:rgba(200,168,75,.1); border-color:var(--gold); transform:translateY(-4px); }
.formation-col h4 { font-size:.82rem; font-weight:700; color:var(--gold2); margin-bottom:.9rem; display:flex; align-items:center; gap:.4rem; }
.formation-col ul { list-style:none; padding:0; }
.formation-col ul li { font-size:.78rem; color:rgba(255,255,255,.75); padding:.2rem 0 .2rem 1.2rem; position:relative; line-height:1.5; transition:color var(--tr); }
.formation-col ul li::before { content:""; position:absolute; left:0; top:.55rem; width:6px; height:6px; border-radius:50%; background:var(--gold2); transition:transform var(--tr); }
.formation-col:hover ul li { color:rgba(255,255,255,.95); }
.formation-col:hover ul li::before { transform:scale(1.4); }

.competences-section h3 { font-size:1rem; font-weight:700; color:var(--white); margin-bottom:1.2rem; border-bottom:1px solid rgba(255,255,255,.15); padding-bottom:.7rem; }
.competences-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.competence-block { background:rgba(255,255,255,.04); border-radius:10px; padding:1rem; border:1px solid rgba(255,255,255,.07); transition:background var(--tr), transform var(--tr), border-color var(--tr); }
.competence-block:hover { background:rgba(200,168,75,.1); border-color:var(--gold); transform:translateY(-3px); }
.competence-block h5 { font-size:.78rem; font-weight:700; color:var(--gold2); margin-bottom:.6rem; }
.competence-block ul { list-style:none; padding:0; }
.competence-block ul li { font-size:.75rem; color:rgba(255,255,255,.7); padding:.15rem 0 .15rem 1rem; position:relative; transition:color var(--tr); }
.competence-block ul li::before { content:"›"; position:absolute; left:0; color:var(--gold2); font-weight:700; }
.competence-block:hover ul li { color:rgba(255,255,255,.95); }

/* ═══════════════════════════════════════════════
   OPTIONS SISR / SLAM
═══════════════════════════════════════════════ */
.options-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:1.5rem; margin-top:2rem;
  background:var(--dark-section); border-radius:16px;
  padding:2rem 2.5rem; box-shadow:var(--shadow-lg);
}
.option-card {
  background:rgba(255,255,255,.03);
  border-radius:14px; padding:1.8rem;
  border:1px solid rgba(255,255,255,.08);
  transition:transform var(--tr), box-shadow var(--tr);
}
.option-card:hover { transform:translateY(-4px); }
.option-sisr { border-top:3px solid var(--accent); }
.option-sisr:hover { box-shadow:0 8px 32px rgba(230,126,34,.15); }
.option-slam { border-top:3px solid #5b8dd9; box-shadow:0 0 0 1px rgba(91,141,217,.12); }
.option-slam:hover { box-shadow:0 8px 32px rgba(91,141,217,.2); }

.option-header { display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem; }
.option-icon { flex-shrink:0; }
.option-title { font-size:1.1rem; font-weight:700; color:var(--white); margin-bottom:.2rem; }
.option-subtitle { font-size:.8rem; font-weight:600; }
.sisr-color { color:var(--accent); }
.slam-color { color:#5b8dd9; }

.option-block {
  background:rgba(255,255,255,.04); border-radius:10px;
  padding:1rem 1.1rem; margin-bottom:.9rem;
  border:1px solid rgba(255,255,255,.07);
}
.option-block:last-child { margin-bottom:0; }
.option-block h4 {
  font-size:.8rem; font-weight:700; color:rgba(255,255,255,.85);
  margin-bottom:.7rem;
}
.option-block ul { list-style:none; padding:0; }
.option-block ul li {
  font-size:.78rem; color:rgba(255,255,255,.65);
  padding:.2rem 0 .2rem 1.1rem; position:relative;
}
.option-block ul li::before {
  content:"›"; position:absolute; left:0;
  font-weight:700; font-size:.9rem;
}
.option-sisr .option-block ul li::before { color:var(--accent); }
.option-slam .option-block ul li::before { color:#5b8dd9; }

.option-two-cols { display:grid; grid-template-columns:1fr 1fr; gap:0 .5rem; }

/* ═══════════════════════════════════════════════
   COMPÉTENCES TECHNIQUES
═══════════════════════════════════════════════ */
#competences { padding:5rem 4rem 4rem; background:var(--white); }
.section-intro {
  text-align:center; color:var(--muted); font-size:.95rem;
  max-width:640px; margin:0 auto 2.5rem; line-height:1.7;
}

.comp-dark {
  background:var(--dark-section); border-radius:16px;
  padding:2.5rem; box-shadow:var(--shadow-lg);
}

/* Catégorie header */
.comp-category {
  display:flex; align-items:center; gap:1rem;
  margin-bottom:1.8rem;
}
.comp-cat-icon {
  width:42px; height:42px; border-radius:10px;
  background:var(--accent); display:flex;
  align-items:center; justify-content:center; flex-shrink:0;
}
.comp-category h3 {
  font-size:1.1rem; font-weight:700; color:var(--white);
}

/* Grille de cartes */
.comp-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem;
}
.comp-card {
  background:rgba(255,255,255,.05); border-radius:12px;
  padding:1.2rem; border:1px solid rgba(255,255,255,.08);
  transition:background var(--tr), transform var(--tr), border-color var(--tr);
}
.comp-card:hover {
  background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.18);
  transform:translateY(-3px);
}
.comp-card-header {
  display:flex; align-items:center; gap:.8rem; margin-bottom:.8rem;
}
.comp-logo-box {
  width:38px; height:38px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.blue-bg, .dark-bg, .orange-bg, .teal-bg { background:#2e3448; }

.comp-logo-img { width:26px; height:26px; object-fit:contain; }

.comp-card-title {
  font-size:.92rem; font-weight:700; color:var(--white);
}
.comp-card-desc {
  font-size:.78rem; color:rgba(255,255,255,.6); line-height:1.6;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width:1024px) {
  #apropos, #formation, #competences, #documentation { padding:4rem 2.5rem; }
  .comp-grid { grid-template-columns:repeat(2,1fr); }
  .doc-grid  { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .hero { padding:80px 1.5rem 5rem; }
  .hero-actions { flex-direction:column; align-items:center; }
  .btn-hero-primary,.btn-hero-secondary { width:100%; max-width:260px; text-align:center; }
  #apropos, #formation, #competences, #documentation { padding:4rem 1.5rem; }
  .comp-grid { grid-template-columns:1fr; }
  .doc-grid  { grid-template-columns:1fr; }
  .apropos-top, .apropos-bottom { grid-template-columns:1fr; }
  .formation-grid, .competences-grid { grid-template-columns:1fr; }
  .two-cols { grid-template-columns:1fr; }
  .options-grid { grid-template-columns:1fr; }
  .option-two-cols { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  nav { padding:0 1.2rem; }
  #apropos, #formation, #documentation { padding:3rem 1rem; }
  .card { padding:1.3rem; }
  .modal-box { padding:1.5rem 1.2rem; }
}