/* ==========================================================================
   Mathieu Pagnier : fiches réalisations (2026-09-30)
   Fiche = mockup + texte, sans ombre portée ni liseré d'accent.
   Chargé sur les fiches, l'archive des réalisations et l'accueil (vignettes).
   ========================================================================== */

.mpr{--mpr-encre:#1c1b19;--mpr-texte:#3d3a35;--mpr-doux:#6b665d;--mpr-jaune:#ffd23f;--mpr-jaune-pale:#fff5cf;--mpr-creme:#fbf8f1;--mpr-trait:#e7e0d0;
  max-width:1560px;margin:0 auto;padding:clamp(28px,4vw,64px) clamp(18px,5vw,40px) clamp(48px,6vw,96px);color:var(--mpr-texte);font-size:17px;line-height:1.65}
.mpr *,.mpr *::before,.mpr *::after{box-sizing:border-box}
.mpr p{margin:0 0 1em}
.mpr a{color:inherit}
.mpr ul{margin-left:0;padding-left:0}

/* En-tête : texte à gauche, mockup à droite */
.mpr-entete{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,4vw,72px);align-items:center}
.mpr-badge{display:inline-flex;align-items:center;gap:8px;background:var(--mpr-jaune-pale);color:var(--mpr-encre);border-radius:999px;padding:7px 16px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 18px}
.mpr-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mpr-jaune)}
.mpr h1{color:var(--mpr-encre);font-size:clamp(32px,3.6vw,52px);line-height:1.08;letter-spacing:-.02em;margin:0 0 20px}
.mpr-intro{font-size:clamp(17px,1.25vw,19px)}
.mpr-intro strong,.mpr li strong{color:var(--mpr-encre)}
.mpr-etiquettes{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:22px 0 0;padding:0}
.mpr-etiquettes li{background:var(--mpr-creme);border:1px solid var(--mpr-trait);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600;color:var(--mpr-encre)}
.mpr-boutons{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.mpr-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none!important;transition:background-color .2s,color .2s}
.mpr-btn svg{width:17px;height:17px;flex:none}
.mpr-btn--plein{background:var(--mpr-encre);color:#fff!important}
.mpr-btn--plein:hover{background:var(--mpr-jaune);color:var(--mpr-encre)!important}
.mpr-btn--vide{border:1.5px solid var(--mpr-encre);color:var(--mpr-encre)!important}
.mpr-btn--vide:hover{background:var(--mpr-encre);color:#fff!important}
.mpr-visuel{position:relative;margin:0;border-radius:24px;overflow:hidden;aspect-ratio:4/3;background:var(--mpr-creme)}
.mpr-visuel img,.mpr-visuel picture{position:absolute;inset:0;width:100%;height:100%}
.mpr-visuel img{object-fit:cover;display:block}

/* Corps : points forts et détail du projet */
.mpr-corps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,2.4vw,32px);margin-top:clamp(40px,5vw,72px);align-items:stretch}
.mpr-corps>div{border-radius:24px;padding:clamp(24px,3vw,44px)}
.mpr-points{background:var(--mpr-jaune)}
.mpr-detail{background:var(--mpr-creme)}
.mpr-corps h2{color:var(--mpr-encre);font-size:clamp(24px,2vw,30px);line-height:1.15;margin:0 0 18px}
.mpr-corps ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mpr-corps li{position:relative;padding-left:32px}
.mpr-corps li::before{content:"";position:absolute;left:0;top:.3em;width:20px;height:20px;border-radius:50%;
  background:var(--mpr-encre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd23f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
.mpr-detail li::before{background-color:var(--mpr-jaune);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1b19' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.mpr-detail p{margin-bottom:22px}
.mpr .mpr-retour{margin:clamp(36px,4vw,60px) 0 0;text-align:center}
.mpr-retour a{font-weight:700;color:var(--mpr-encre);text-decoration:none;border-bottom:2px solid var(--mpr-jaune);padding-bottom:2px}
.mpr-retour a:hover{border-color:var(--mpr-encre)}

/* Vignettes des réalisations sur l'accueil : carte crème, mockup 4:3, nom, métier et ville.
   Pas de lien (demande du 2026-09-30) : rien ne réagit au survol. */
.kb-query-item [class*="kadence-column4579_240513-51"]{background:#fbf8f1;border-radius:24px;padding:12px 12px 22px;height:100%}
.kb-query-item [class*="kadence-column4579_240513-51"]>.kt-inside-inner-col{padding:0!important}
.kb-image4579_69c401-eb,.kb-image4579_69c401-eb figure{margin:0!important;max-width:none!important;width:100%!important;display:block!important}
.kb-image4579_69c401-eb img{aspect-ratio:4/3;width:100%!important;max-width:100%!important;height:auto;object-fit:cover;border-radius:16px;display:block}
.kb-query-item .kb-dynamic-html-id-4579_ea8521-3e,
.kb-query-item [class*="kb-dynamic-html-id-4579_ea8521-3e"]{margin:18px 10px 0!important}
.kb-query-item .kb-dynamic-html-id-4579_ea8521-3e h3,
.kb-query-item [class*="kb-dynamic-html-id-4579_ea8521-3e"] h3{margin:0!important;font-size:19px!important;line-height:1.25;color:#1c1b19}
.kb-query-item [class*="kb-dynamic-html-id-4579_c3a1f2-7d"]{margin:6px 10px 0!important;color:#6b665d;font-size:15px;line-height:1.4;text-align:center}
.kb-query-item [class*="kb-dynamic-html-id-4579_c3a1f2-7d"] p{margin:0}
/* 10 réalisations sur 3 colonnes : la dernière, seule sur sa ligne, se place au centre */
@media (min-width:1025px){
  .kb-query-grid-wrap>.kb-query-item:last-child:nth-child(3n+1){grid-column:2}
}

/* Tablette et téléphone : le visuel passe au-dessus du texte */
@media (max-width:900px){
  .mpr-entete,.mpr-corps{grid-template-columns:1fr}
  .mpr-entete>.mpr-visuel{order:-1}
  .mpr h1{font-size:clamp(30px,6.4vw,40px)}
}
@media (max-width:560px){
  .mpr-boutons .mpr-btn{flex:1 1 100%}
}