/* ============================================================
   YELLOWPONIES — COMPOSANTS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--yp-font-body);
  color: var(--yp-black);
  background: var(--yp-white);
  -webkit-font-smoothing: antialiased;
}
/* TYPOGRAPHIE */
.yp-h1 { font-family: var(--yp-font-display); font-size: var(--yp-text-hero); font-weight: var(--yp-weight-extrabold); line-height: var(--yp-leading-tight); letter-spacing: var(--yp-tracking-tight); text-transform: uppercase; }
.yp-h2 { font-family: var(--yp-font-display); font-size: var(--yp-text-4xl); font-weight: var(--yp-weight-extrabold); line-height: var(--yp-leading-tight); letter-spacing: var(--yp-tracking-tight); text-transform: uppercase; }
.yp-h3 { font-family: var(--yp-font-display); font-size: var(--yp-text-3xl); font-weight: var(--yp-weight-bold); line-height: var(--yp-leading-snug); letter-spacing: var(--yp-tracking-tight); text-transform: uppercase; }
.yp-h4 { font-family: var(--yp-font-display); font-size: var(--yp-text-xl); font-weight: var(--yp-weight-bold); text-transform: uppercase; }
.yp-subtitle { font-size: var(--yp-text-lg); font-weight: var(--yp-weight-light); line-height: var(--yp-leading-normal); }
.yp-body { font-size: var(--yp-text-base); line-height: var(--yp-leading-normal); }
.yp-caption { font-size: var(--yp-text-sm); color: var(--yp-gray-mid); }
.yp-label { font-size: var(--yp-text-xs); font-weight: var(--yp-weight-bold); letter-spacing: var(--yp-tracking-wider); text-transform: uppercase; }
.yp-outline { -webkit-text-stroke: 2px var(--yp-black); color: transparent; }
.yp-outline-pink { -webkit-text-stroke: 2px var(--yp-pink); color: transparent; }
.yp-pink { color: var(--yp-pink); }
.yp-yellow { color: var(--yp-yellow); }
/* BOUTONS */
.yp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--yp-space-2); font-family: var(--yp-font-body); font-weight: var(--yp-weight-bold); font-size: var(--yp-text-sm); letter-spacing: var(--yp-tracking-wider); text-transform: uppercase; border: 2px solid var(--yp-black); cursor: pointer; white-space: nowrap; transition: background var(--yp-duration-base) var(--yp-ease-out), box-shadow var(--yp-duration-base) var(--yp-ease-out), transform var(--yp-duration-fast) var(--yp-ease-out); text-decoration: none; }
.yp-btn-sm { padding: var(--yp-space-2) var(--yp-space-5); font-size: var(--yp-text-xs); }
.yp-btn-md { padding: var(--yp-space-3) var(--yp-space-8); }
.yp-btn-lg { padding: var(--yp-space-4) var(--yp-space-12); font-size: var(--yp-text-md); }
.yp-btn-yellow { background: var(--yp-yellow); color: var(--yp-black); }
.yp-btn-pink   { background: var(--yp-pink);   color: var(--yp-black); }
.yp-btn-black  { background: var(--yp-black);  color: var(--yp-white); border-color: var(--yp-black); }
.yp-btn-outline { background: transparent; color: var(--yp-black); }
.yp-btn-outline-white { background: transparent; color: var(--yp-white); border-color: var(--yp-white); }
.yp-btn-yellow:hover  { box-shadow: var(--yp-shadow-black);  transform: translate(-3px, -3px); }
.yp-btn-pink:hover    { box-shadow: var(--yp-shadow-yellow); transform: translate(-3px, -3px); }
.yp-btn-black:hover   { box-shadow: var(--yp-shadow-yellow); transform: translate(-3px, -3px); }
.yp-btn-outline:hover { background: var(--yp-black); color: var(--yp-white); box-shadow: var(--yp-shadow-yellow); transform: translate(-3px, -3px); }
.yp-btn-pill { border-radius: var(--yp-radius-pill); }
/* TAGS */
.yp-tag { display: inline-flex; align-items: center; font-weight: var(--yp-weight-bold); font-size: var(--yp-text-xs); letter-spacing: var(--yp-tracking-wide); text-transform: uppercase; padding: var(--yp-space-1) var(--yp-space-3); border: 1.5px solid var(--yp-black); }
.yp-tag-yellow  { background: var(--yp-yellow); color: var(--yp-black); }
.yp-tag-pink    { background: var(--yp-pink);   color: var(--yp-black); }
.yp-tag-black   { background: var(--yp-black);  color: var(--yp-white); }
.yp-tag-outline { background: transparent;      color: var(--yp-black); }
.yp-tag-pill    { border-radius: var(--yp-radius-pill); }
/* NAVIGATION */
.yp-nav { display: flex; align-items: center; justify-content: space-between; padding: var(--yp-space-5) var(--yp-gutter); background: var(--yp-white); border-bottom: 2px solid var(--yp-black); position: sticky; top: 0; z-index: 100; }
.yp-nav-logo { font-family: var(--yp-font-display); font-size: var(--yp-text-xl); font-weight: var(--yp-weight-extrabold); text-transform: uppercase; letter-spacing: var(--yp-tracking-tight); }
.yp-nav-links { display: flex; gap: var(--yp-space-8); list-style: none; font-weight: var(--yp-weight-bold); font-size: var(--yp-text-sm); letter-spacing: var(--yp-tracking-wide); text-transform: uppercase; }
/* HERO */
.yp-hero { min-height: 100vh; background: var(--yp-yellow); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--yp-space-20) var(--yp-gutter); position: relative; overflow: hidden; border-bottom: 3px solid var(--yp-black); }
.yp-hero-lightning { position: absolute; font-size: 12rem; opacity: 0.08; pointer-events: none; }
.yp-hero-lightning-tl { top: -2rem; left: -2rem; transform: rotate(-20deg); }
.yp-hero-lightning-br { bottom: -2rem; right: -2rem; transform: rotate(160deg); }
/* LISTE PROJETS */
.yp-projects-list { list-style: none; border-top: 2px solid var(--yp-black); }
.yp-projects-item { border-bottom: 2px solid var(--yp-black); transition: background var(--yp-duration-base) var(--yp-ease-out); cursor: pointer; }
.yp-projects-item:hover { background: var(--yp-yellow); }
.yp-projects-link { display: flex; align-items: center; justify-content: space-between; padding: var(--yp-space-6) var(--yp-gutter); gap: var(--yp-space-6); }
.yp-projects-name { font-family: var(--yp-font-display); font-size: clamp(2rem, 5vw, 5rem); font-weight: var(--yp-weight-extrabold); text-transform: uppercase; letter-spacing: var(--yp-tracking-tight); -webkit-text-stroke: 2px var(--yp-black); color: transparent; transition: color var(--yp-duration-base) var(--yp-ease-out), -webkit-text-stroke var(--yp-duration-base) var(--yp-ease-out); }
.yp-projects-item:hover .yp-projects-name { color: var(--yp-black); -webkit-text-stroke: 0; }
/* ACCORDION */
.yp-accordion { border-top: 2px solid var(--yp-black); }
.yp-accordion-item { border-bottom: 2px solid var(--yp-black); }
.yp-accordion-header { display: flex; align-items: center; justify-content: space-between; padding: var(--yp-space-8) var(--yp-gutter); cursor: pointer; transition: background var(--yp-duration-fast) var(--yp-ease-out); }
.yp-accordion-header:hover { background: var(--yp-yellow); }
.yp-accordion-title { font-family: var(--yp-font-display); font-size: var(--yp-text-3xl); font-weight: var(--yp-weight-extrabold); text-transform: uppercase; letter-spacing: var(--yp-tracking-tight); }
.yp-accordion-content { padding: var(--yp-space-8) var(--yp-gutter); background: var(--yp-gray-light); display: grid; grid-template-columns: 1fr 1fr; gap: var(--yp-space-10); }
/* CARD PROJET */
.yp-card-project { border: 2px solid var(--yp-black); background: var(--yp-white); overflow: hidden; cursor: pointer; transition: box-shadow var(--yp-duration-base) var(--yp-ease-out), transform var(--yp-duration-base) var(--yp-ease-out); }
.yp-card-project:hover { box-shadow: var(--yp-shadow-yellow-lg); transform: translate(-5px, -5px); }
.yp-card-project-img { width: 100%; aspect-ratio: 4/3; background: var(--yp-gray-light); object-fit: cover; }
.yp-card-project-body { padding: var(--yp-space-5); border-top: 2px solid var(--yp-black); }
.yp-card-project-title { font-family: var(--yp-font-display); font-size: var(--yp-text-xl); font-weight: var(--yp-weight-extrabold); text-transform: uppercase; letter-spacing: var(--yp-tracking-tight); }
/* CARD EQUIPE */
.yp-card-team { border: 2px solid var(--yp-black); background: var(--yp-white); overflow: hidden; position: relative; }
.yp-card-team-img { width: 100%; object-fit: cover; display: block; filter: grayscale(100%); }
.yp-card-team-img-xl { aspect-ratio: 3/5; }
.yp-card-team-img-l  { aspect-ratio: 3/4; }
.yp-card-team-img-m  { aspect-ratio: 1/1; }
.yp-card-team-badge { position: absolute; top: var(--yp-space-3); right: var(--yp-space-3); width: 48px; height: 48px; background: var(--yp-yellow); border: 2px solid var(--yp-black); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.yp-card-team-body { padding: var(--yp-space-4); border-top: 2px solid var(--yp-black); }
.yp-card-team-name { font-family: var(--yp-font-display); font-size: var(--yp-text-lg); font-weight: var(--yp-weight-extrabold); text-transform: uppercase; }
.yp-card-team-role { color: var(--yp-pink); font-size: var(--yp-text-sm); font-weight: var(--yp-weight-bold); text-transform: uppercase; letter-spacing: var(--yp-tracking-wide); margin-top: var(--yp-space-1); }
/* KEYWORDS */
.yp-keywords { list-style: none; }
.yp-keyword-item { display: flex; align-items: center; gap: var(--yp-space-4); padding: var(--yp-space-4) 0; border-bottom: 1px solid #eee; cursor: pointer; }
.yp-keyword-text { font-family: var(--yp-font-display); font-size: var(--yp-text-3xl); font-weight: var(--yp-weight-extrabold); text-transform: uppercase; letter-spacing: var(--yp-tracking-tight); -webkit-text-stroke: 2px var(--yp-black); color: transparent; transition: color var(--yp-duration-base) var(--yp-ease-out), -webkit-text-stroke var(--yp-duration-base) var(--yp-ease-out); }
.yp-keyword-item:hover .yp-keyword-text { color: var(--yp-black); -webkit-text-stroke: 0; }
/* MARQUEE */
.yp-marquee-wrapper { overflow: hidden; }
.yp-marquee-row { display: flex; gap: var(--yp-space-10); padding: var(--yp-space-4) 0; white-space: nowrap; border-bottom: 1px solid var(--yp-black); animation: yp-marquee 20s linear infinite; }
.yp-marquee-row:nth-child(even) { animation-direction: reverse; }
.yp-marquee-row:last-child { border-bottom: none; }
@keyframes yp-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.yp-marquee-item { display: inline-flex; align-items: center; padding: 0 var(--yp-space-6); font-weight: var(--yp-weight-bold); font-size: var(--yp-text-sm); letter-spacing: var(--yp-tracking-wider); text-transform: uppercase; color: var(--yp-gray-mid); flex-shrink: 0; }
/* CTA */
.yp-cta { background: var(--yp-black); color: var(--yp-white); padding: var(--yp-space-24) var(--yp-gutter); text-align: center; border-top: 3px solid var(--yp-yellow); }
.yp-cta-title { font-family: var(--yp-font-display); font-size: clamp(2.5rem, 6vw, 6rem); font-weight: var(--yp-weight-extrabold); text-transform: uppercase; letter-spacing: var(--yp-tracking-tight); line-height: var(--yp-leading-tight); max-width: 900px; margin: 0 auto; }
/* FORMULAIRE */
.yp-form { display: flex; flex-direction: column; gap: var(--yp-space-6); }
.yp-form-label { display: block; font-weight: var(--yp-weight-bold); font-size: var(--yp-text-sm); letter-spacing: var(--yp-tracking-wide); text-transform: uppercase; margin-bottom: var(--yp-space-2); }
.yp-form-input, .yp-form-textarea { font-family: var(--yp-font-body); font-size: var(--yp-text-base); padding: var(--yp-space-4); border: 2px solid var(--yp-black); background: var(--yp-white); outline: none; width: 100%; transition: box-shadow var(--yp-duration-fast) var(--yp-ease-out); }
.yp-form-input:focus, .yp-form-textarea:focus { box-shadow: var(--yp-shadow-yellow); }
.yp-form-textarea { resize: vertical; min-height: 140px; }
/* UTILITIES */
.yp-bg-yellow { background: var(--yp-yellow); }
.yp-bg-pink   { background: var(--yp-pink); }
.yp-bg-black  { background: var(--yp-black); color: var(--yp-white); }
.yp-bg-white  { background: var(--yp-white); }
.yp-border    { border: 2px solid var(--yp-black); }
.yp-shadow-y  { box-shadow: var(--yp-shadow-yellow); }
.yp-shadow-p  { box-shadow: var(--yp-shadow-pink); }
.yp-shadow-b  { box-shadow: var(--yp-shadow-black); }
.yp-container { max-width: var(--yp-container-wide); margin: 0 auto; padding: 0 var(--yp-gutter); }
.yp-section   { padding: var(--yp-space-20) var(--yp-gutter); }
.yp-grid-2    { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--yp-space-6); }
.yp-grid-3    { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--yp-space-6); }
.yp-grid-4    { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--yp-space-6); }