/* experiences — repris du <style> de experiences.html.
   Genere par _tools/build-pagecss.py : ne pas modifier a la main. */
.dist{max-width:900px;margin:0 auto;padding:var(--s5) clamp(20px,4vw,52px) var(--s6)}
.dist-row{display:grid;grid-template-columns:82px 1fr auto;gap:clamp(12px,2.4vw,26px);align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.dist-row:first-of-type{border-top:1px solid var(--line)}
.dist-row .t{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--gold)}
.dist-row .bar{height:2px;background:linear-gradient(90deg,var(--gold),rgba(176,139,62,.14));border-radius:2px}
.dist-row .n{font-size:.98rem}
.xp{max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,52px) var(--s6)}
.xp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(20px,2.6vw,32px);margin-top:var(--s4)}
.xp-card{background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.xp-card:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(7,23,16,.12)}
.xp-card .cimg{width:100%;aspect-ratio:3/2;overflow:hidden;background:var(--cream)}
.xp-card .cimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)}
.xp-card:hover .cimg img{transform:scale(1.05)}
.xp-card .cbody{padding:26px 28px 30px;display:flex;flex-direction:column;gap:12px;flex:1}
.xp-card h3{font-family:var(--serif);font-weight:400;font-size:var(--step-1);color:var(--pine)}
.xp-card p{font-size:.95rem}
.xp-card .meta{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.req{background:var(--cream);padding:var(--s6) clamp(20px,4vw,52px)}
.req .in{max-width:900px;margin:0 auto}
.req form{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:var(--s4)}
.req .full{grid-column:1/-1}
.req label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--green);margin-bottom:9px}
.req input,.req select,.req textarea{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 15px;font-family:var(--sans);font-size:16px;font-weight:300;color:var(--ink);outline:none;transition:border-color .3s}
.req input:focus,.req select:focus,.req textarea:focus{border-color:var(--gold)}
.req textarea{min-height:118px;resize:vertical}
.req .hint{font-size:.85rem;opacity:.7;margin-top:10px}
@media (max-width:700px){.req form{grid-template-columns:1fr}}