:root{
  --paper:#FAF6EF;
  --ink:#141210;
  --orange:#F04525;
  --muted:#77726A;
  --hairline:#D8D2C6;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
body{ margin:0; background:var(--paper); font-family:'Bricolage Grotesque',sans-serif; color:var(--ink); overflow-x:hidden; }
a{ color:inherit; }
p{ text-align:justify; }
::selection{ background:var(--orange); color:#fff; }
:focus-visible{ outline:2.5px solid var(--orange); outline-offset:3px; }

/* Structure */
.sheet{ width:100%; max-width:980px; margin:64px auto 0; padding:64px 64px 0; }
hr{ border:none; border-top:1px solid var(--hairline); margin:64px 0; }
.metro-line{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  margin-top:24px;
  height:20px;
  touch-action:none;
}
.metro-line::before{
  content:"";
  position:absolute;
  left:0; right:0; top:50%;
  height:7px;
  border-radius:999px;
  background:var(--orange);
  transform:translateY(-50%);
  z-index:0;
}
.metro-stop{
  position:relative;
  z-index:1;
  width:18px; height:18px;
  border-radius:50%;
  background:var(--orange);
  border:3px solid var(--orange);
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.metro-stop.active,
.metro-stop.hovered{
  background:var(--paper);
  border-color:var(--ink);
  border-width:2px;
}
.projects-wrap{ position:relative; }
.projects-hint{
  position:absolute;
  top:50%;
  font-size:28px;
  font-weight:800;
  color:var(--orange);
  pointer-events:none;
  z-index:2;
  opacity:.75;
}
.projects-hint-left{ left:-6px; animation:hint-left 1.6s ease-in-out infinite; }
.projects-hint-right{ right:-6px; animation:hint-right 1.6s ease-in-out infinite; }

@keyframes hint-right{
  0%,100%{ transform:translate(0,-50%); }
  50%{ transform:translate(8px,-50%); }
}
@keyframes hint-left{
  0%,100%{ transform:translate(0,-50%); }
  50%{ transform:translate(-8px,-50%); }
}

/* Titres et textes : mêmes classes partout sur le site */
.titre1{ margin:0; font-size:40px; font-weight:800; letter-spacing:-.01em; line-height:1.1; }
.titre2{ color:var(--orange); font-weight:800; font-size:28px; margin:0 0 16px; letter-spacing:-.01em; }
.titre3{ font-size:18px; font-weight:700; margin:0 0 12px; line-height:1.25; }
.sous-titre{ font-size:16px; font-weight:600; margin:12px 0 0; text-align:left; }
.date{ font-size:13px; color:var(--muted); margin:12px 0 0; }
.texte{ font-size:14px; line-height:1.45; margin:12px 0 0; }
.texte + .texte{ margin-top:20px; }
.todo{ color:var(--muted); font-style:italic; font-weight:500; }

/* En-tête */
.head-row{ display:flex; justify-content:space-between; gap:24px 64px; flex-wrap:wrap; }
.intro-block{ width:100%; margin-top:0; }
.logos-row{ display:flex; flex-wrap:wrap; align-items:center; gap:32px; margin:24px 0; }
.logo{ height:50px; width:auto; display:block; }
.logo-grand{ height:60px; }
.logos-ligne{ display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin:16px 0; }
.logos-ligne img{ height:24px; width:auto; display:block; }
.logo-separator{ width:1px; height:20px; background:var(--hairline); flex-shrink:0; }
.project-card .logos-ligne img{ height:26px; }
.logos-static{ display:flex; flex-wrap:wrap; align-items:center; gap:32px; margin:16px 0; }
.logos-static img{ height:17px; width:auto; display:block; }

/* Boutons de contact */
.contact-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:40px; }
.pill{ display:inline-flex; align-items:center; border:3px solid var(--pill-color, var(--orange)); color:var(--pill-color, var(--orange)); border-radius:10px; padding:9px 20px; font-size:16px; font-weight:500; text-decoration:none; background:var(--paper); transition:background .15s ease,color .15s ease; }
.pill:hover{ background:var(--pill-color, var(--orange)); color:var(--paper); }
.pill-linkedin:hover{ background:#0A66C2; border-color:#0A66C2; color:#fff; }

.pill-sm{ padding:4px 10px; font-size:12px; border-width:1.5px; border-radius:7px; }

.project-link-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:12px; flex-wrap:wrap; }
.project-link-row .project-link{ margin:0; }

.pill-sm{ padding:4px 10px; font-size:12px; border-width:1.5px; border-radius:7px; }

.project-link-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:12px; flex-wrap:wrap; }
.project-link-row .project-link{ margin:0; }

/* Compétences */
.comp-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:40px; align-items:flex-start; }
.comp-grid > p{ font-size:26px; line-height:1.5; font-weight:800; margin:0; }
.comp-grid > *{ min-width:0; }
.comp-side p{ margin:0; font-size:16px; line-height:1.5; font-weight:400; }
.comp-side .sub-label{ color:var(--orange); font-weight:700; font-size:13px; margin-bottom:8px; }
.comp-side div{ margin-bottom:20px; }
.comp-side div:last-child{ margin-bottom:0; }
.skills-marquee-group{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.skills-marquee{ overflow:hidden; width:100%; }
.skills-marquee-track{ display:flex; width:max-content; white-space:nowrap; animation:marquee linear infinite; }
.skills-marquee-track span{ margin-right:48px; flex-shrink:0; font-weight:700; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.skills-marquee:nth-of-type(1) .skills-marquee-track{ animation-duration:80s; }
.skills-marquee:nth-of-type(2) .skills-marquee-track{ animation-duration:130s; }
.skills-marquee:nth-of-type(3) .skills-marquee-track{ animation-duration:100s; }
.skills-marquee:nth-of-type(4) .skills-marquee-track{ animation-duration:150s; }
.skills-marquee:nth-of-type(5) .skills-marquee-track{ animation-duration:90s; }

/* Grille 3 colonnes (Formations, Expériences, Bénévolat) */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.card{ min-width:0; }
.card .sub-entry{ margin-bottom:20px; }
.card .sub-entry:last-child{ margin-bottom:0; }
.card > .texte{ margin-bottom:20px; }

/* Projets : défilement horizontal, un projet par écran, illustrations réservées à la page détail */
.projects-scroll{ display:flex; align-items:flex-start; overflow-x:auto; scroll-snap-type:x mandatory; gap:56px; margin-top:24px; padding-bottom:16px; scrollbar-width:none; }
.projects-scroll::-webkit-scrollbar{ display:none; }
.project-card{ flex:0 0 calc((100% - 56px) / 2); scroll-snap-align:start; }
.project-card .media-frame{ margin-top:0; }
.project-link{ margin:12px 0 0; font-size:13.5px; }
.project-link a{ color:var(--orange); font-weight:600; text-decoration:none; }
.project-link a:hover{ text-decoration:underline; }

/* Cadre média (utilisé sur les pages détail /projet/) : photo, vidéo, PDF, ou vide = "+ Illustration à ajouter" */
.media-frame{ width:100%; aspect-ratio:16/9; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.media-frame img,.media-frame video,.media-frame iframe{ width:100%; height:100%; display:block; border:none; object-fit:cover; }
.media-frame:empty,.media-placeholder,.pdf-tile{ flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:16px; }
.media-frame:empty,.media-placeholder{ display:flex; gap:6px; color:var(--muted); font-size:12.5px; line-height:1.6; }
.media-frame.taille-originale{ aspect-ratio:auto; }
.media-frame.taille-originale img{ height:auto; object-fit:contain; }
.media-placeholder{ width:100%; height:100%; }
.media-frame:empty::before,.media-placeholder .plus{ content:"+"; display:block; font-size:22px; color:var(--orange); margin-bottom:8px; }
.media-frame:empty::after{ content:"Illustration à ajouter"; }
.pdf-tile{ width:100%; height:100%; display:flex; gap:8px; text-decoration:none; color:var(--ink); font-size:13px; }
.pdf-tile .pdf-icon{ display:inline-flex; align-items:center; justify-content:center; background:var(--orange); color:var(--paper); font-size:11px; font-weight:800; letter-spacing:.03em; border-radius:3px; padding:4px 8px; }
.pdf-tile .pdf-name{ font-size:12px; font-weight:600; }
.pdf-tile:hover .pdf-icon{ background:var(--ink); }

/* Pages détail projet (/projet/) */
.back-link{ margin:0 0 32px; font-size:14px; }
.back-link a{ color:var(--orange); font-weight:600; text-decoration:none; }
.back-link a:hover{ text-decoration:underline; }
.detail-header{ margin-bottom:24px; }
.detail-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.detail-gallery, .media-frame{ margin-top:32px; }
body.detail-page .sheet{ padding-bottom:80px; }

/* Panneau de contact (hors de .sheet, prend toute la largeur naturellement) */
.contact-panel{ background:var(--ink); color:var(--paper); margin-top:112px; }
.contact-panel-inner{ max-width:980px; margin:0 auto; padding:56px 64px; }
.contact-panel .pill{ background:var(--ink); }
.contact-panel .pill:hover{ background:var(--orange); border-color:var(--orange); }
.contact-panel .pill-linkedin:hover{ background:#0A66C2; border-color:#0A66C2; }
.contact-panel .texte{ color:var(--paper); margin-top:12px; }
.contact-panel .contact-row{ margin-top:0; }
.panel-footer{ margin-top:40px; padding-top:20px; border-top:.5px solid var(--paper); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:11.5px; color:var(--paper); }

/* Figure avec légende */
.figure{ margin:0; min-width:0; }
.legende{ font-size:13px; line-height:1.4; color:var(--muted); margin:8px 0 0; text-align:left; }

/* Points avec icône et retrait */
.point{ display:flex; gap:12px; align-items:flex-start; }
.point-icone{ flex:0 0 1.5em; }
.texte.point + .texte.point{ margin-top:12px; }

/* Responsive */
@media (max-width:760px){ .grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:720px){
  .sheet{ padding:32px 16px 0; }
  .contact-panel-inner{ padding:32px 16px; }
}
@media (max-width:680px){ .projects-scroll{ gap:24px; } .project-card{ flex-basis:100%; } }
@media (max-width:640px){ .comp-grid{ grid-template-columns:1fr; } }
@media (max-width:520px){ .grid-3{ grid-template-columns:1fr; } .detail-gallery{ grid-template-columns:1fr; } .titre1{ font-size:30px; } }