/* ===== page Contact (s'ajoute à ludique.css) ===== */
.hero h1{font-size:clamp(2.1rem,4.4vw,3.6rem)}
.infos{display:grid;gap:14px;margin-top:30px}
.info{display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--ink);font-weight:500}
.info .ico2{flex:none;width:46px;height:46px;border-radius:14px;border:var(--bw) solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:grid;place-items:center}
.info .ico2 svg{width:22px;height:22px}
a.info:hover .txt{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.info small{display:block;color:var(--muted);font-weight:400;font-size:.875rem}

.formcard{background:var(--paper);border:var(--bw) solid var(--ink);border-radius:28px;box-shadow:var(--sh-lg);padding:clamp(24px,4vw,40px);text-align:left;position:relative}
.formcard h2{font-size:1.7rem;margin-bottom:6px}
.formcard .sub{color:var(--muted);margin-bottom:26px}
.field{display:grid;gap:8px;margin-bottom:20px}
.field label,.field .lbl{font-family:var(--display);font-weight:600;font-size:1.0625rem}
.field .opt{font-family:var(--body);font-weight:400;color:var(--muted);font-size:.875rem}
.field input[type=text],.field select,.field textarea{font:inherit;font-size:1rem;padding:13px 16px;border:var(--bw) solid var(--ink);border-radius:14px;background:#fff;color:var(--ink);width:100%;transition:box-shadow .15s}
.field textarea{min-height:150px;resize:vertical;line-height:1.5}
.field select{appearance:none;-webkit-appearance:none;padding-right:44px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314121F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/18px}
.field input::placeholder,.field textarea::placeholder{color:#8B8896}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--blue);outline-offset:2px;box-shadow:3px 3px 0 var(--ink)}
.field .err{display:none;color:#B0103B;font-size:.875rem;font-weight:500}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#B0103B;background:#FFF3F6}
.field.bad .err{display:block}
.check{display:flex;gap:12px;align-items:flex-start;margin-bottom:6px}
.check input{appearance:none;-webkit-appearance:none;flex:none;width:26px;height:26px;margin:2px 0 0;border:var(--bw) solid var(--ink);border-radius:8px;background:#fff;cursor:pointer;display:grid;place-items:center}
.check input:checked{background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314121F' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/16px no-repeat}
.check input:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.check label{font-size:.9688rem;cursor:pointer;line-height:1.45}
.field.check-field{margin-bottom:24px}
.formcard .btn{width:100%;justify-content:center;font-size:1.125rem;padding:15px 26px}
.formcard .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.status{display:none;margin-top:20px;padding:16px 20px;border:var(--bw) solid var(--ink);border-radius:16px;font-weight:500;box-shadow:3px 3px 0 var(--ink)}
.status.ok{display:block;background:var(--lime)}
.status.ko{display:block;background:#FFE0EC}
.status a{font-weight:600}
.formnote{margin-top:16px;font-size:.875rem;color:var(--muted);text-align:center}
.formnote a{color:inherit}
.sticker.fc{top:-16px;right:24px;left:auto;bottom:auto;background:var(--lime);transform:rotate(4deg)}

@media(max-width:900px){.formcard{margin-top:8px}}
.hero-grid{align-items:start}
.hero-grid .copy{padding-top:clamp(0px,3vw,36px)}

/* formulaire à gauche sur desktop, juste après l'intro sur mobile */
.hero-grid{grid-template-columns:1fr 1.05fr;grid-template-areas:"stage copy" "stage infos";grid-template-rows:auto 1fr;align-content:start}
.hero-grid .copy{grid-area:copy;align-self:start}
.hero-grid .stage{grid-area:stage}
.hero-grid .infos{grid-area:infos;margin-top:0;align-self:start}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;grid-template-areas:"copy" "stage" "infos";grid-template-rows:auto}}