/* TiKamp — refonte graphique 2026-10 : styles d'ORIGINE de la page « contact ».
   FICHIER PRODUIT par scripts/refonte-feuille-origine.js — NE PAS MODIFIER À LA MAIN.
   Il reprend, sous la garde html[data-refonte], les règles de la page d'origine et
   celles que ses scripts posent eux-mêmes. L'habillage refondu est écrit à la main
   dans tk-refonte-public.css (chargée après). */

/* ── contact.html — <style> n° 1 ── */
html[data-refonte] body.page-contact { --border-2:#C9D1C7; --err:#B42318; --err-soft:#FDECEA }
html[data-refonte] main.origine * { box-sizing:border-box; }
html[data-refonte] main.origine [hidden] { display:none !important; }
html[data-refonte] body.page-contact { margin:0; background:var(--bg); color:var(--ink); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; font-size:16px; line-height:1.55; }
html[data-refonte] main.origine a { color:var(--primary); text-underline-offset:3px; }
html[data-refonte] main.origine a:hover { color:var(--primary-hover); }
html[data-refonte] main.origine :focus-visible { outline:2px solid var(--ink); outline-offset:3px; border-radius:6px; }
html[data-refonte] main.origine .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
html[data-refonte] main.origine .skip { position:absolute; top:-56px; left:8px; background:var(--ink); color:#fff; padding:12px 16px; border-radius:8px; z-index:100; }
html[data-refonte] main.origine .skip:focus { top:8px; }
html[data-refonte] main.origine .o-entete.top { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; border-bottom:1px solid var(--border); background:var(--surface); }
html[data-refonte] main.origine .back-link { display:inline-flex; align-items:center; min-height:44px; padding:8px 0; font-size:14px; font-weight:600; color:var(--ink-2); text-decoration:none; }
html[data-refonte] main.origine .back-link:hover { color:var(--primary); }
html[data-refonte] main.origine { max-width:720px; margin:0 auto; padding:40px 16px 48px; }
html[data-refonte] main.origine h1 { font-size:32px; line-height:1.15; margin:0 0 12px; letter-spacing:-.02em; text-wrap:balance; }
html[data-refonte] main.origine .lead { color:var(--ink-2); margin:0 0 32px; max-width:58ch; font-size:17px; }
html[data-refonte] main.origine .carte { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:32px; box-shadow:0 1px 2px rgba(10,31,20,.04); }
html[data-refonte] main.origine .grille { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px 24px; }
html[data-refonte] main.origine .champ { display:flex; flex-direction:column; gap:8px; min-width:0; }
html[data-refonte] main.origine .champ.large { grid-column:1 / -1; }
html[data-refonte] main.origine .champ label { font-size:15px; font-weight:600; color:var(--ink); }
html[data-refonte] main.origine .champ label .opt { font-weight:400; color:var(--ink-2); }
html[data-refonte] main.origine .req { color:var(--err); }
html[data-refonte] main.origine .champ input,
html[data-refonte] main.origine .champ select,
html[data-refonte] main.origine .champ textarea { width:100%; min-height:48px; padding:12px 16px; font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--border-2); border-radius:12px; transition:border-color .16s ease, box-shadow .16s ease; }
html[data-refonte] main.origine .champ textarea { min-height:160px; resize:vertical; line-height:1.55; }
html[data-refonte] main.origine .champ select { appearance:none; -webkit-appearance:none; padding-right:44px; text-overflow:ellipsis; overflow:hidden; white-space:normal; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%233A453F' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; }
html[data-refonte] main.origine .champ input:hover,
html[data-refonte] main.origine .champ select:hover,
html[data-refonte] main.origine .champ textarea:hover { border-color:var(--ink-3); }
html[data-refonte] main.origine .champ input:focus,
html[data-refonte] main.origine .champ select:focus,
html[data-refonte] main.origine .champ textarea:focus { outline:2px solid var(--primary); outline-offset:1px; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft); }
html[data-refonte] main.origine .champ [aria-invalid="true"] { border-color:var(--err); background-color:var(--err-soft); }
html[data-refonte] main.origine .champ [aria-invalid="true"]:focus { outline-color:var(--err); border-color:var(--err); box-shadow:0 0 0 4px var(--err-soft); }
html[data-refonte] main.origine .champ ::placeholder { color:var(--ink-3); opacity:1; }
html[data-refonte] main.origine .aide-champ { margin:0; font-size:14px; color:var(--ink-2); background:var(--primary-soft); border-radius:10px; padding:12px 16px; }
html[data-refonte] main.origine .err-champ { margin:0; font-size:14px; font-weight:600; color:var(--err); }
html[data-refonte] main.origine .err-champ:empty { display:none; }
html[data-refonte] main.origine .hp-field { position:absolute; left:-9999px; opacity:0; pointer-events:none; }
html[data-refonte] main.origine .actions { margin-top:24px; display:flex; align-items:center; gap:12px 20px; flex-wrap:wrap; }
html[data-refonte] main.origine .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 24px; font:inherit; font-weight:600; text-decoration:none; cursor:pointer; border-radius:12px; border:1px solid var(--border-2); background:var(--surface); color:var(--ink); transition:background-color .16s ease, border-color .16s ease, color .16s ease, transform .1s ease; }
html[data-refonte] main.origine .btn:hover { border-color:var(--primary); color:var(--primary); }
html[data-refonte] main.origine .btn:active { transform:translateY(1px); }
html[data-refonte] main.origine .btn.plein { background:var(--primary); border-color:var(--primary); color:#fff; }
html[data-refonte] main.origine .btn.plein:hover { background:var(--primary-hover); border-color:var(--primary-hover); color:#fff; }
html[data-refonte] main.origine .btn[disabled] { cursor:progress; background:var(--ink-3); border-color:var(--ink-3); color:#fff; transform:none; }
html[data-refonte] main.origine .btn svg { flex:none; }
html[data-refonte] main.origine .tourne { width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; animation:tourne .8s linear infinite; flex:none; }
@keyframes tourne { to { transform:rotate(360deg); } }
html[data-refonte] main.origine .note { font-size:14px; color:var(--ink-2); }
html[data-refonte] main.origine .note a { color:var(--ink-2); font-weight:600; }
html[data-refonte] main.origine .note a:hover { color:var(--primary); }
html[data-refonte] main.origine .alerte { margin:20px 0 0; padding:12px 16px; border-radius:12px; background:var(--err-soft); border:1px solid #F3B5AE; color:#7A1A10; font-size:15px; overflow-wrap:anywhere; }
html[data-refonte] main.origine .alerte:empty { display:none; }
html[data-refonte] main.origine .alerte a { color:inherit; font-weight:600; }
html[data-refonte] main.origine .envoye { text-align:center; padding:40px 32px; }
html[data-refonte] main.origine .envoye .rond { width:56px; height:56px; margin:0 auto 16px; border-radius:50%; background:var(--primary-soft); color:var(--primary); display:flex; align-items:center; justify-content:center; }
html[data-refonte] main.origine .envoye h2 { margin:0 0 8px; font-size:22px; line-height:1.25; }
html[data-refonte] main.origine .envoye h2:focus { outline:none; }
html[data-refonte] main.origine .envoye p { margin:0 auto 24px; color:var(--ink-2); max-width:46ch; overflow-wrap:anywhere; }
html[data-refonte] main.origine .envoye .actions { justify-content:center; margin-top:0; }
html[data-refonte] main.origine .autres { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; margin-top:32px; }
html[data-refonte] main.origine .autre { display:flex; gap:16px; padding:24px; border-radius:16px; background:var(--surface); border:1px solid var(--border); min-width:0; }
html[data-refonte] main.origine .autre .ico { flex:none; width:40px; height:40px; border-radius:12px; background:var(--primary-soft); color:var(--primary); display:flex; align-items:center; justify-content:center; }
html[data-refonte] main.origine .autre .ico svg { display:block; }
html[data-refonte] main.origine .autre h2 { margin:0 0 4px; font-size:16px; line-height:1.3; }
html[data-refonte] main.origine .autre p { margin:0; color:var(--ink-2); font-size:15px; }
html[data-refonte] main.origine .autre a { display:inline-block; padding:10px 0; font-weight:600; overflow-wrap:anywhere; }
html[data-refonte] main.origine .autre > div { min-width:0; }
@media (max-width:640px) {
  html[data-refonte] main.origine { padding-top:32px; }
  html[data-refonte] main.origine h1 { font-size:28px; }
  html[data-refonte] main.origine .lead { font-size:16px; margin-bottom:24px; }
  html[data-refonte] main.origine .carte { padding:24px 16px; }
  html[data-refonte] main.origine .grille,
  html[data-refonte] main.origine .autres { grid-template-columns:minmax(0,1fr); }
  html[data-refonte] main.origine .champ.large { grid-column:1; }
  html[data-refonte] main.origine .actions .btn { width:100%; }
  html[data-refonte] main.origine .envoye { padding:32px 16px; }
}
@media (prefers-reduced-motion:reduce) {
  html[data-refonte] main.origine .champ input,
  html[data-refonte] main.origine .champ select,
  html[data-refonte] main.origine .champ textarea,
  html[data-refonte] main.origine .btn { transition:none; }
  html[data-refonte] main.origine .tourne { animation-duration:2.4s; }
}