/*
Theme Name: Karine Christine José — Auxiliaire de vie
Theme URI: https://www.karine-christine-jose.fr/
Author: Site personnalisé
Description: Site vitrine WordPress fidèle au flyer fourni, avec formulaire de contact.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
*/

:root{
  --navy:#08284f;
  --terracotta:#a84b27;
  --cream:#f8eee3;
  --line:#d9b8a5;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--navy);
  font-family:Arial, Helvetica, sans-serif;
}
.site{
  min-height:100vh;
}
.flyer-wrap{
  width:min(1024px, 100%);
  margin:0 auto;
  position:relative;
  line-height:0;
  box-shadow:0 12px 40px rgba(8,40,79,.12);
}
.flyer{
  display:block;
  width:100%;
  height:auto;
}
.hotspot{
  position:absolute;
  display:block;
  z-index:3;
  background:transparent;
  border-radius:999px;
  text-decoration:none;
}
.hotspot:hover,
.hotspot:focus{
  outline:3px solid rgba(168,75,39,.45);
  outline-offset:2px;
}
.hotspot-karine{left:50%;top:91.8%;width:25%;height:2.7%}
.hotspot-christine{left:50%;top:94.4%;width:25%;height:2.7%}
.hotspot-jose{left:50%;top:97.0%;width:25%;height:2.7%}
.hotspot-site{left:27%;top:98.5%;width:49%;height:1.5%}
.hotspot-qr{left:76%;top:88.5%;width:16%;height:8.5%}

.contact-section{
  width:min(900px, calc(100% - 32px));
  margin:28px auto 48px;
  padding:34px;
  background:#fffaf4;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 10px 35px rgba(8,40,79,.08);
}
.contact-section h2{
  margin:0 0 8px;
  text-align:center;
  color:var(--navy);
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(28px,5vw,42px);
}
.contact-intro{
  margin:0 auto 26px;
  text-align:center;
  color:var(--terracotta);
  font-size:18px;
  line-height:1.5;
}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
label{font-weight:700;color:var(--navy)}
input,textarea{
  width:100%;
  border:1px solid #cdb8aa;
  border-radius:12px;
  padding:13px 14px;
  font:inherit;
  color:var(--navy);
  background:white;
}
textarea{min-height:150px;resize:vertical}
input:focus,textarea:focus{
  outline:3px solid rgba(168,75,39,.15);
  border-color:var(--terracotta);
}
.submit{
  margin-top:18px;
  border:0;
  border-radius:999px;
  padding:14px 28px;
  background:var(--navy);
  color:white;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
}
.submit:hover{filter:brightness(1.12)}
.notice{
  margin:0 0 18px;
  padding:12px 14px;
  border-radius:12px;
  line-height:1.45;
}
.notice.success{background:#e9f5ed;color:#245c38}
.notice.error{background:#fff0eb;color:#8b321c}
.footer-note{
  width:min(900px, calc(100% - 32px));
  margin:-20px auto 30px;
  text-align:center;
  font-size:13px;
  color:#5c6270;
  line-height:1.5;
}
.sr-only{
  position:absolute!important;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

@media (max-width:700px){
  .contact-section{padding:24px 18px}
  .form-grid{grid-template-columns:1fr}
  .field.full{grid-column:auto}
  .hotspot-karine,.hotspot-christine,.hotspot-jose{left:49%;width:31%}
  .hotspot-site{left:25%;width:53%}
}