/* Page Contact, système de design version 2 (13 octobre 2026).
   FICHIER GÉNÉRÉ par site/outils/_appliques/integrer_contact.py à partir de la maquette validée. Ne pas le modifier à la main.
   Le socle (variables, .lar, titres, boutons, étiquettes) vient de accueil.css, chargée avant. */
.k-ouv{max-width:760px;padding-top:64px}
.k-ouv .a-h1{font-size:clamp(40px,5.2vw,68px)}

/* le formulaire : libellé au-dessus de chaque champ */
.k-form{display:grid;gap:22px;max-width:620px}
.k-ch{display:grid;gap:7px}
.k-ch label,.k-choix legend{font:600 15px/1.3 var(--texte)}
.k-ch label i{font:400 13px/1 var(--texte);font-style:normal;color:var(--gris-texte);margin-left:6px}
.k-ch input,.k-ch select,.k-ch textarea{width:100%;min-height:52px;padding:0 14px;border:2px solid var(--encre);background:#fff;font:400 17px/1.4 var(--texte);color:var(--encre);border-radius:0}
.k-ch textarea{padding:12px 14px;resize:vertical}
.k-ch small{font-size:13.5px;line-height:1.4;color:var(--gris-texte)}
.k-ch input:focus,.k-ch select:focus,.k-ch textarea:focus{outline:3px solid var(--bleu-clair);border-color:var(--bleu)}
.k-bt{justify-self:start;min-height:58px;padding:0 28px;font-size:18.5px;border:0;cursor:pointer}
.k-form .a-note{margin-top:-8px}
.k-commu{font-size:15px;color:var(--gris-texte)}
.k-commu a,.k-c-bas a{color:var(--encre);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}

/* A. le formulaire, et un seul encart */
.k-deux{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:64px;align-items:start;margin-top:48px}
.k-cote{background:var(--creme);padding:26px;display:grid;gap:14px;justify-items:start}
.k-cote-t{font:800 24px/1.15 var(--titre);letter-spacing:-.03em}
.k-cote p:not(.k-cote-t):not(.k-commu){font-size:16px;line-height:1.5}
.k-cote .k-commu{border-top:1px solid var(--filet);padding-top:14px;width:100%}

/* B. d'abord trois chemins */
.k-chemins{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.k-chemins li{border:2px solid var(--encre);padding:24px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.k-n{font:600 14px/1 var(--mono);color:var(--bleu)}
.k-chemins h2{font:800 26px/1.12 var(--titre);letter-spacing:-.03em;margin:0;text-wrap:balance}
.k-chemins p:not(.k-n){font-size:16px;line-height:1.5;color:var(--gris-texte)}
.k-chemins .c-bt{margin-top:auto}
.k-chemins .c-bt--l{font-size:15.5px;min-height:48px;display:inline-flex;align-items:center}
.k-ici{background:var(--bleu-clair)}
.k-b-form{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:start;margin-top:88px;border-top:2px solid var(--encre);padding-top:28px}

/* C. une colonne, le sujet en choix visibles */
.k-c .k-form{margin-top:44px;max-width:720px}
.k-choix{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.k-choix legend{grid-column:1/-1;padding:0;margin-bottom:9px}
.k-choix label{position:relative;display:block;cursor:pointer}
.k-choix input{position:absolute;opacity:0;inset:0}
.k-choix span{display:flex;align-items:center;min-height:50px;padding:8px 14px;border:2px solid var(--encre);font:600 15.5px/1.3 var(--texte);background:#fff}
.k-choix input:checked + span{background:var(--encre);color:#fff}
.k-choix input:focus-visible + span{outline:3px solid var(--bleu);outline-offset:3px}
.k-c-bas{max-width:720px;margin-top:48px;border-top:2px solid var(--encre);padding-top:20px;display:grid;gap:10px;font-size:16px;line-height:1.5}

@media (max-width:900px){
  .k-ouv{padding-top:36px}
  .k-deux,.k-b-form{grid-template-columns:1fr;gap:36px;margin-top:36px}
  .k-b-form{margin-top:56px}
  .k-chemins{grid-template-columns:1fr;gap:16px;margin-top:32px}
  .k-bt{width:100%}
  .k-choix{grid-template-columns:1fr}
}

/* ce que le socle de l'accueil ne porte pas, et ce que le thème impose */
.ctc h1,.ctc h2{color:var(--encre);text-transform:none}
.ctc .k-chemins{list-style:none;padding-left:0}
.ctc .k-chemins li{margin-bottom:0}
.ctc .c-bt--s{background:#fff;color:var(--encre);border:2px solid var(--encre);box-shadow:none}
.ctc a.c-bt--s,.ctc a.c-bt--s:visited{color:var(--encre);text-decoration:none}
.ctc a.c-bt--s:hover{background:var(--encre);color:#fff}
.ctc a.c-bt--l,.ctc a.c-bt--l:visited{color:var(--encre);padding:0;font-weight:600;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;background:none}
.ctc button.c-bt{border:0;border-radius:0;cursor:pointer;font-family:var(--titre)}
.ctc button.c-bt--p{background:var(--bleu);color:#fff}
.ctc button.c-bt--p:hover{background:var(--encre)}
.ctc .k-ch input,.ctc .k-ch select,.ctc .k-ch textarea{box-shadow:none;border-radius:0;font-family:var(--texte)}
.ctc .c-bt:focus-visible,.ctc a:focus-visible{outline:3px solid var(--bleu);outline-offset:3px}
/* les messages de retour après l'envoi */
.k-msg{position:relative;max-width:760px;margin-top:28px;padding:15px 18px 15px 56px;font-size:16.5px;line-height:1.45;border-left:4px solid}
.k-msg span{position:absolute;left:18px;top:17px;font:600 18px/1 var(--mono)}
.k-msg--ok{background:#E3F5EA;border-color:var(--vert)}
.k-msg--ok span{color:var(--vert)}
.k-msg--ko{background:#FFF1E4;border-color:var(--orange)}
.k-msg--ko span{color:var(--orange)}
.ctc .k-libre{margin:64px 0 0;max-width:720px}