/* Mive — palette relevée sur son propre portrait : le fond crème de l'image, et
   le cercle bleu → magenta qui l'entoure. Le portrait se fond dans la page au
   lieu d'y être collé. */

:root{
  --creme:#F6EEDC;      /* le fond exact de l'image */
  --sable:#EFE2C8;
  --encre:#241C2E;
  --plume:#6A6076;
  --bleu:#3E9BE8;
  --magenta:#E0218A;
  --trait:rgba(36,28,46,.10);
  --carte:#FFFCF6;
  --ombre:0 2px 4px rgba(36,28,46,.04), 0 12px 32px rgba(36,28,46,.07);
  --r:20px;
}

*{box-sizing:border-box}
[hidden]{display:none !important}   /* display:flex bat l'attribut hidden */

html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--creme); color:var(--encre);
  font:400 17px/1.65 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Le soleil : un halo très doux en haut, qui rappelle les vacances sans folklore */
.soleil{
  position:fixed; inset:-30vh 0 auto 0; height:80vh; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 55% at 50% 40%, rgba(224,33,138,.10), transparent 70%),
    radial-gradient(45% 45% at 22% 30%, rgba(62,155,232,.12), transparent 70%);
}

main{position:relative; z-index:1; max-width:840px; margin:0 auto; padding:0 22px 72px}

/* ── langues ── */
.langues{
  position:absolute; top:18px; right:18px; z-index:3; display:flex; gap:4px;
  background:var(--carte); border:1px solid var(--trait); border-radius:999px; padding:4px;
  box-shadow:var(--ombre);
}
.langues button{
  border:0; background:transparent; color:var(--plume); cursor:pointer;
  font:600 13px/1 Inter,sans-serif; letter-spacing:.04em;
  padding:13px 16px; border-radius:999px; min-height:44px; min-width:44px;
}
.langues button.actif{background:var(--encre); color:#fff}

/* ── héros ── */
.heros{text-align:center; padding:74px 0 8px}

.portrait{position:relative; display:inline-block; margin-bottom:26px}
.portrait img{
  width:min(260px,58vw); height:auto; display:block; border-radius:28px;
  box-shadow:0 4px 10px rgba(36,28,46,.06), 0 24px 60px rgba(36,28,46,.14);
}
.badge{
  position:absolute; bottom:-11px; left:50%; transform:translateX(-50%);
  white-space:nowrap;
  background:linear-gradient(96deg,var(--bleu),var(--magenta)); color:#fff;
  font:600 12.5px/1 Inter,sans-serif; letter-spacing:.05em; text-transform:uppercase;
  padding:9px 16px; border-radius:999px;
  box-shadow:0 4px 14px rgba(224,33,138,.32);
}

h1{
  font:600 clamp(30px,6.2vw,46px)/1.14 Fraunces,Georgia,serif;
  letter-spacing:-.018em; margin:0 0 12px;
}
.sous-titre{
  font-size:clamp(17px,2.4vw,19.5px); color:var(--plume);
  max-width:30ch; margin:0 auto 30px; text-wrap:balance;
}

.cta{
  position:relative; border:0; cursor:pointer;
  background:linear-gradient(96deg,var(--bleu),var(--magenta)); color:#fff;
  font:600 17px/1 Inter,sans-serif;
  padding:19px 38px; border-radius:999px; min-height:56px;
  box-shadow:0 6px 20px rgba(224,33,138,.30);
  transition:transform .16s ease, box-shadow .16s ease;
}
.cta:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(224,33,138,.38)}
.cta:active{transform:translateY(0)}
.cta:focus-visible{outline:3px solid var(--encre); outline-offset:3px}
.onde{
  position:absolute; inset:0; border-radius:999px; pointer-events:none;
  box-shadow:0 0 0 0 rgba(224,33,138,.42); animation:onde 2.8s ease-out infinite;
}
@keyframes onde{
  0%{box-shadow:0 0 0 0 rgba(224,33,138,.40)}
  70%{box-shadow:0 0 0 18px rgba(224,33,138,0)}
  100%{box-shadow:0 0 0 0 rgba(224,33,138,0)}
}
.indice{font-size:14.5px; color:var(--plume); margin:16px 0 0}

/* ── les trois cartes ── */
.cartes{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:16px; margin:64px 0 0;
}
.cartes article{
  background:var(--carte); border:1px solid var(--trait); border-radius:var(--r);
  padding:26px 22px; box-shadow:var(--ombre);
}
.pastille{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(96deg,var(--bleu),var(--magenta)); color:#fff;
  font:600 14px/1 Inter,sans-serif; margin-bottom:13px;
}
.cartes h2{font:600 18px/1.3 Fraunces,Georgia,serif; margin:0 0 7px}
.cartes p{margin:0; font-size:15.5px; color:var(--plume)}

/* ── message écrit ── */
.message{
  background:var(--carte); border:1px solid var(--trait); border-radius:var(--r);
  padding:clamp(26px,4vw,40px); margin:22px 0 0; box-shadow:var(--ombre);
}
.message h2{font:600 clamp(22px,3.4vw,28px)/1.2 Fraunces,Georgia,serif; margin:0 0 8px}
.chapo{color:var(--plume); margin:0 0 26px; font-size:16px}

form label{display:block; margin:0 0 16px}
form label>span{
  display:block; font:500 13.5px/1 Inter,sans-serif; color:var(--plume);
  margin:0 0 7px; letter-spacing:.01em;
}
.paire{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
input,textarea{
  width:100%; font:400 16px/1.5 Inter,sans-serif; color:var(--encre);
  background:var(--creme); border:1px solid var(--trait); border-radius:12px;
  padding:13px 14px; min-height:48px; resize:vertical;
}
input:focus,textarea:focus{outline:2px solid var(--bleu); outline-offset:1px; border-color:transparent}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--magenta)}

.envoyer{
  border:0; cursor:pointer; background:var(--encre); color:#fff;
  font:600 16px/1 Inter,sans-serif; padding:16px 30px; border-radius:999px;
  min-height:52px; margin-top:6px;
}
.envoyer:hover{background:#3a2f4a}
.envoyer:disabled{opacity:.5; cursor:default}
.envoyer:focus-visible{outline:3px solid var(--magenta); outline-offset:3px}

.etat{min-height:22px; margin:14px 0 0; font-size:15px}
.etat.ok{color:#1E7A46; font-weight:500}
.etat.ko{color:var(--magenta)}

/* ── pied ── */
footer{margin:52px 0 0; text-align:center}
.franc{
  font-size:14.5px; line-height:1.7; color:var(--plume);
  max-width:58ch; margin:0 auto 22px; text-wrap:pretty;
}
.menu{
  display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:center; align-items:center;
  font-size:13.5px; color:var(--plume); margin:0;
}
.menu a{color:var(--plume); display:inline-block; padding:11px 4px; min-height:44px}
.marque{font:600 13px/1 Inter,sans-serif; letter-spacing:.09em; text-transform:uppercase; opacity:.55}

/* ── le halo du widget, à ses couleurs à elle ──
   Le moteur pose du violet en dur ; on le repeint sans toucher au moteur. */
.vrp-root .vrp-face::after{
  box-shadow:0 0 0 2px rgba(224,33,138,.45) !important;
}

@media (max-width:560px){
  .heros{padding:66px 0 4px}
  .paire{grid-template-columns:1fr}
  .langues{top:14px; right:14px}
}

@media (prefers-reduced-motion:reduce){
  .onde{animation:none}
  .cta{transition:none}
}