/* contact : feuille propre à la page Contact (10708, voir CHANGES-WORDPRESS.md). Chargée après site.css.
   Tout est préfixé contact- ; le formulaire natif est rendu par inc/contact.php ([wakademy_contact]). */

/* ---------- Icônes (même trait doré que les atouts du thème) ---------- */
.contact-ico--mail { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C48738' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.contact-ico--tel { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C48738' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h4l2 5-2.5 1.5a11 11 0 0 0 6 6L16 13l5 2v4a2 2 0 0 1-2 2A17 17 0 0 1 3 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.contact-ico--horloge { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C48738' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }

/* ---------- Haut de page : la question à gauche, le portrait à droite ---------- */
.contact-hero { padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80); }
.contact-hero .wp-block-columns { gap: clamp(2rem, 4vw, 5rem); }
.contact-hero h1.wp-block-heading { font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem); }
.contact-hero .wk-chapeau { font-size: var(--wp--preset--font-size--l); font-weight: 600; color: var(--wk-ecorce); }
.contact-hero .wp-block-buttons { margin-top: 1.75rem; gap: .75rem; }
/* La petite phrase sur le délai : une pastille horloge, texte discret */
.wk-section .contact-delai { display: flex; align-items: center; gap: .8rem; max-width: 34rem; margin-top: 1.5rem; font-size: var(--wp--preset--font-size--s); line-height: 1.4; color: var(--wk-taupe); }
.contact-delai::before { content: ""; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(196, 135, 56, .14) no-repeat center / 1.3rem var(--ico); }
/* Portrait : comme celui de « Mon histoire » (histoire.css) — arrondi du thème, ombre douce, rien d'autre. */
.contact-hero .contact-portrait { margin: 0; max-width: 26rem; margin-inline: auto; }
.contact-hero .contact-portrait img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; border-radius: var(--wk-rayon-grand); box-shadow: 0 20px 50px rgba(0, 0, 0, .14); }
@media (max-width: 781px) {
	.contact-hero .contact-portrait { max-width: 22rem; }
	.contact-hero .contact-portrait img { aspect-ratio: 4 / 4.4; }
}

/* ---------- Le message : formulaire à gauche, e-mail et téléphone à droite ---------- */
.contact-section { scroll-margin-top: 5rem; }
.contact-duo { gap: clamp(1.5rem, 3vw, 3.5rem); margin-top: var(--wp--preset--spacing--50); }
.contact-duo > .wp-block-column > * { margin-block: 0; }
.wk-section .contact-canaux { display: grid; gap: .8rem; }
.wk-section .contact-canaux > * { margin: 0; }
.contact-canaux .wk-surtitre { margin-bottom: .25rem; }
.contact-canal a { display: grid; grid-template-columns: 2.75rem 1fr; column-gap: 1rem; align-items: center; padding: 1rem 1.2rem; border-radius: 18px; background: var(--wk-carte); border: 1.5px solid rgba(196, 135, 56, .22); color: inherit; text-decoration: none; transition: transform .3s var(--wk-ease), border-color .2s ease; }
.wk-section .contact-canal a:not(.wp-block-button__link) { text-decoration-line: none; }
.contact-canal a:hover { transform: translateY(-3px); border-color: var(--wk-or); }
.contact-canal a::before { content: ""; grid-row: 1 / span 2; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(196, 135, 56, .14) no-repeat center / 1.4rem var(--ico); }
.contact-canal strong { display: block; font-size: var(--wp--preset--font-size--m); font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.contact-canal span { display: block; margin-top: .15rem; font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wk-or-texte); }
@media (min-width: 782px) {
	.contact-duo > .wp-block-column:last-child { padding-top: .5rem; }
}

/* ---------- Le formulaire (carte) ---------- */
.wk-section .contact-form { display: grid; gap: 1rem; padding: clamp(1.4rem, .9rem + 2vw, 2.25rem); background: var(--wk-carte); border: 1px solid rgba(57, 41, 29, .1); box-shadow: none; }
.contact-form > *, .contact-form__duo > * { margin: 0; }
.contact-form__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-form__champ { display: grid; gap: .35rem; }
.contact-form__champ label { font-size: var(--wp--preset--font-size--xs); font-weight: 800; letter-spacing: .02em; color: var(--wk-taupe); }
.contact-form :is(input[type="text"], input[type="email"], select, textarea) { width: 100%; box-sizing: border-box; margin: 0; padding: 0 1.1rem; border: 1.5px solid rgba(57, 41, 29, .22); border-radius: var(--wk-rayon-bouton); background: #FFF; color: var(--wk-ecorce); font: 500 var(--wp--preset--font-size--s) / 1.3 var(--wk-police); transition: border-color .15s ease, box-shadow .15s ease; }
.contact-form :is(input[type="text"], input[type="email"], select) { height: 3.1rem; }
/* Plus spécifique que la règle « :is(input, select, textarea) » ci-dessus, sinon le champ garde la pilule et un padding nul. */
.wk-section .contact-form textarea { min-height: 9rem; padding: .9rem 1.1rem; border-radius: var(--wk-rayon); resize: vertical; }
.contact-form :is(input, select, textarea):focus { outline: none; border-color: var(--wk-or); box-shadow: 0 0 0 3px rgba(196, 135, 56, .25); }
/* Liste déroulante : flèche du thème, pas celle du navigateur */
.contact-form__select { position: relative; display: block; }
.contact-form__select select { appearance: none; -webkit-appearance: none; padding-right: 3rem; cursor: pointer; }
.contact-form__select::after { content: ""; position: absolute; top: 50%; right: 1.2rem; width: .6rem; height: .6rem; border-right: 2px solid var(--wk-or); border-bottom: 2px solid var(--wk-or); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.contact-form__envoi { margin-top: .25rem; }
.contact-form__envoi .wk-bouton { width: 100%; min-height: 3.5rem; font-size: var(--wp--preset--font-size--m); font-weight: 800; box-shadow: none; }
.contact-form__erreur { padding: .8rem 1rem; border-radius: var(--wk-rayon); background: rgba(184, 56, 43, .1); color: var(--wk-erreur); font-size: var(--wp--preset--font-size--s); font-weight: 600; line-height: 1.4; }
.contact-form__erreur[hidden] { display: none; }
/* Pot de miel : hors de l'écran, jamais dans le parcours au clavier */
.contact-form__piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Réussite : la carte prend la place du formulaire */
.wk-section .contact-form__merci { display: grid; gap: .5rem; padding: clamp(1.6rem, 1rem + 2vw, 2.5rem); background: rgba(74, 155, 126, .12); border: 1.5px solid rgba(74, 155, 126, .35); box-shadow: none; }
.contact-form__merci[hidden] { display: none; }
.contact-form__merci > * { margin: 0; }
.contact-form__merci::before { content: ""; width: 3rem; height: 3rem; margin-bottom: .5rem; border-radius: 50%; background: var(--wk-sauge) no-repeat center / 1.5rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }
.contact-form__merci-titre { font-size: var(--wp--preset--font-size--l); font-weight: 800; line-height: 1.2; color: var(--wk-ecorce); }
.contact-form__merci p:not(.contact-form__merci-titre) { color: var(--wk-taupe); font-size: var(--wp--preset--font-size--s); line-height: 1.5; }
.contact-form__merci:focus { outline: none; }

@media (max-width: 40rem) {
	.contact-form__duo { grid-template-columns: 1fr; }
	.contact-canal strong { font-size: var(--wp--preset--font-size--s); } /* l'adresse e-mail tient sur une ligne */
}

/* ---------- Mode sombre ---------- */
@media (prefers-color-scheme: dark) {
	body.wk-sombre .contact-canal a { background: #2C2C2E; border-color: rgba(255, 255, 255, .12); }
	body.wk-sombre .contact-canal a:hover { border-color: var(--wk-or-texte); }
	body.wk-sombre .wk-section .contact-form { background: #1C1C1E; border-color: rgba(255, 255, 255, .1); }
	body.wk-sombre .contact-form :is(input[type="text"], input[type="email"], select, textarea) { background: #2C2C2E; color: #F2F2F7; border-color: rgba(255, 255, 255, .18); }
	body.wk-sombre .contact-form :is(input, select, textarea):focus { border-color: var(--wk-or-texte); box-shadow: 0 0 0 3px rgba(227, 168, 98, .25); }
	body.wk-sombre .contact-form__select::after { border-color: var(--wk-or-texte); }
	body.wk-sombre .contact-form__erreur { background: rgba(255, 107, 94, .14); }
	body.wk-sombre .wk-section .contact-form__merci { background: rgba(111, 185, 154, .14); border-color: rgba(111, 185, 154, .35); }
}