/* ============================================================
   formulaire-contact.css — le formulaire de contact des sites de spiKto
   ============================================================
   Le même fichier sur spikto.com, app.spikto.com et nergo-editions.com,
   avec formulaire-contact.js. Chaque site y met ses couleurs par les
   variables --cf-… (posées sur .cf ou un parent) ; le reste ne bouge pas.
   Téléphone d'abord : une colonne, des champs de 16 px (en dessous,
   l'iPhone zoome à la saisie), 48 px pour tout ce qui se touche.
   ============================================================ */
/* Les couleurs par défaut, sans poids (:where) : la règle .cf d'un site l'emporte, où qu'elle soit. */
:where(.cf, .cf-merci) {
  --cf-accent: #C8267D; --cf-accent-doux: rgba(200, 38, 125, .15); --cf-focus: #0089D4;
  --cf-encre: #3f362b; --cf-doux: #75685b; --cf-filet: #ddd5c8; --cf-fond-champ: #fff;
  --cf-fond-fichier: #fdf6fa; --cf-erreur: #b3261e; --cf-rayon: 12px; --cf-bouton-encre: #fff;
}
.cf {
  display: grid; gap: 1rem; margin: 0 auto; max-width: 640px; text-align: left; color: var(--cf-encre);
}
/* « hidden » l'emporte sur display:grid (le formulaire laisse la place au remerciement). */
.cf[hidden], .cf-merci[hidden] { display: none !important; }
.cf-ligne { display: grid; gap: 1rem; }
.cf-champ { display: grid; gap: .35rem; min-width: 0; }
.cf-champ label { font-weight: 700; font-size: .9rem; color: var(--cf-doux); }
.cf-champ input, .cf-champ textarea {
  width: 100%; box-sizing: border-box; min-height: 48px; margin: 0;
  font: inherit; font-size: 1rem; line-height: 1.45; color: var(--cf-encre);
  padding: .7rem .9rem; border: 1.5px solid var(--cf-filet); border-radius: var(--cf-rayon); background: var(--cf-fond-champ);
  transition: border-color .2s, box-shadow .2s;
}
.cf-champ textarea { resize: vertical; min-height: 9rem; }
.cf-champ input:focus, .cf-champ textarea:focus { outline: none; border-color: var(--cf-focus); box-shadow: 0 0 0 3px var(--cf-accent-doux); }
.cf [aria-invalid="true"] { border-color: var(--cf-erreur) !important; }

/* La pièce jointe : une zone en pointillés ; le vrai champ fichier reste atteignable au clavier, sous la zone. */
.cf-fichier { position: relative; display: flex; align-items: center; gap: .6rem; }
.cf-fichier input[type="file"] { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; }
.cf-fichier-zone {
  flex: 1; min-width: 0; min-height: 48px; box-sizing: border-box; display: flex; align-items: flex-start; gap: .7rem; cursor: pointer;
  padding: .8rem 1rem; border: 1.5px dashed var(--cf-accent); border-radius: var(--cf-rayon); background: var(--cf-fond-fichier);
  font-size: .95rem; line-height: 1.45; color: var(--cf-encre); transition: border-color .2s, background .2s;
}
.cf-fichier-zone svg { flex-shrink: 0; margin-top: .1rem; color: var(--cf-accent); }
.cf-fichier-zone:hover { border-style: solid; }
.cf-fichier input:focus-visible + .cf-fichier-zone { outline: 3px solid var(--cf-focus); outline-offset: 2px; }
.cf-fichier-txt { display: flex; flex-direction: column; min-width: 0; }
.cf-fichier-zone small { color: var(--cf-doux); font-size: .85rem; }
.cf-fichier-nom { display: block; font-weight: 700; overflow-wrap: anywhere; }
.cf-fichier-nom:empty { display: none; }
.cf-fichier--plein .cf-fichier-zone { border-style: solid; background: var(--cf-fond-champ); }
.cf-fichier--plein .cf-fichier-nom { order: -1; }
.cf-fichier--plein .cf-fichier-formats, .cf-fichier--plein .cf-fichier-facultatif { display: none; }
.cf-fichier--plein .cf-fichier-action { font-weight: 500; font-size: .88rem; color: var(--cf-accent); text-decoration: underline; }
.cf-fichier-retirer { flex-shrink: 0; min-height: 44px; border: 0; background: none; padding: .4rem .5rem; font: inherit; font-weight: 700; font-size: .9rem; color: var(--cf-accent); cursor: pointer; text-decoration: underline; }
.cf-fichier-retirer[hidden] { display: none; }
.cf-fichier:has(input[aria-invalid="true"]) .cf-fichier-zone { border-color: var(--cf-erreur); }

.cf-case { display: flex; align-items: center; gap: .6rem; min-height: 44px; font-size: .95rem; color: var(--cf-doux); cursor: pointer; }
.cf-case input { width: 20px; height: 20px; flex-shrink: 0; margin: 0; accent-color: var(--cf-accent); }
/* Le piège à robots : hors de l'écran, inatteignable au clavier. */
.cf-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cf-envoyer {
  display: block; width: 100%; min-height: 52px; margin-top: .25rem; padding: .9rem 1.6rem; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--cf-accent); color: var(--cf-bouton-encre); font: inherit; font-size: 1.05rem; font-weight: 800;
}
.cf-envoyer:disabled { opacity: .6; cursor: wait; }
.cf-envoyer:focus-visible { outline: 3px solid var(--cf-focus); outline-offset: 3px; }
.cf-msg { margin: 0; font-size: .95rem; line-height: 1.5; font-weight: 600; color: var(--cf-erreur); }
.cf-msg:empty { display: none; }
.cf-msg.cf-en-cours { color: var(--cf-doux); }
.cf-fichier-msg { margin-top: -.5rem; }
.cf-rgpd { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--cf-doux); }
.cf-rgpd a { color: inherit; }
.cf .humain { margin: 0; }

.cf-merci { max-width: 640px; margin: 0 auto; padding: 2rem 1.25rem; border-radius: 18px; text-align: center; outline: none; }
.cf-merci p { margin: 0; line-height: 1.55; }
.cf-merci .cf-merci-t { font-size: 1.3rem; font-weight: 800; margin-bottom: .5rem; color: var(--cf-accent); }

@media (min-width: 600px) {
  .cf-ligne { grid-template-columns: 1fr 1fr; }
  .cf-envoyer { width: auto; justify-self: start; }
}