/* ==========================================================
   css/projet-style.css : l'apparence du formulaire (couleurs, tailles, mise en page)
   ========================================================== */

/* ==========================================================
   POLICE : Plus Jakarta Sans, hébergée sur le site (aucun appel à Google).
   Le fichier se trouve dans le dossier fonts/ (créé avec preparer_polices.py).
   Si le fichier manque, le navigateur utilise la police système (voir "body").
   ========================================================== */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plusjakartasans-wght.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================
   1. COULEURS ET RÉGLAGES (à modifier ici, en un seul endroit)
   ========================================================== */
:root {
  --pomme: #8DB600;
  /* vert pomme : titre, icône, bouton */
  --fond-page: #E8EDEA;
  /* fond derrière le cadre */
  --fond-cadre: #173A32;
  /* fond du cadre du formulaire */
  --fond-champ: #1F4A40;
  /* fond des champs de saisie */
  --bordure: #34675A;
  /* contour des champs */
  --texte: #F2F7EF;
  /* texte principal */
  --texte-doux: #C9D8C3;
  /* libellés et texte secondaire */
  --texte-invite: #A3BDB2;
  /* texte gris dans les champs vides */
  --texte-sur-pomme: #10261F;
  /* texte du bouton vert */
}

/* ==========================================================
   2. MISE EN PAGE GÉNÉRALE
   ========================================================== */
* {
  box-sizing: border-box;
}

/* L'attribut "hidden" doit toujours cacher l'élément */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  /* centre le cadre dans l'écran */
  padding: 16px;
  background: var(--fond-page);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--texte);
}

/* ==========================================================
   3. LE CADRE DU FORMULAIRE
   ========================================================== */
.cadre {
  width: min(760px, 100%);
  background: var(--fond-cadre);
  border-radius: 20px;
  padding: 24px 28px 22px;
  box-shadow: 0 18px 40px rgba(16, 38, 31, 0.25);
}

/* --- En-tête : titre à gauche, bouton "Fermer" à droite --- */
.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.titre {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: clamp(1.25rem, 3.4vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pomme);
}

.titre img {
  flex: none;
}

.bouton-fermer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: transparent;
  color: var(--texte-doux);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.bouton-fermer:hover {
  background: var(--fond-champ);
  color: var(--texte);
}

/* ==========================================================
   4. LES CHAMPS
   ========================================================== */
/* Grille à 2 colonnes : Nom | E-mail  puis  Téléphone | Société */
.grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.champ-large {
  margin-top: 16px;
}

label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--texte-doux);
}

/* L'astérisque des champs obligatoires */
.etoile {
  color: var(--pomme);
  margin-left: 2px;
}

input,
textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  background: var(--fond-champ);
  color: var(--texte);
  font: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

textarea {
  min-height: 110px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--texte-invite);
}

/* Le texte d'invitation disparaît dès que l'utilisateur clique dans la zone */
textarea:focus::placeholder {
  color: transparent;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--pomme);
  box-shadow: 0 0 0 3px rgba(141, 182, 0, 0.35);
}

/* ==========================================================
   5. BAS DU CADRE : message d'état, mention, bouton d'envoi
   ========================================================== */
.statut {
  min-height: 1.4em;
  /* réserve la place pour éviter les sauts */
  margin: 14px 0 0;
  font-size: 0.92rem;
  color: var(--texte-doux);
}

.statut.succes {
  color: var(--pomme);
  font-weight: 600;
}

.statut.erreur {
  color: #FFB4A2;
  font-weight: 600;
}

.pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
}

.mention {
  margin: 0;
  font-size: 0.85rem;
  color: var(--texte-doux);
}

/* Phrase en petite police tout en bas du cadre */
.confidentialite {
  margin: 14px 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--texte-doux);
}

/* Lien "Mentions légales" dans la phrase de confidentialité */
.confidentialite a {
  color: var(--pomme);
  text-underline-offset: 3px;
}

.confidentialite a:focus-visible {
  outline: 3px solid var(--pomme);
  outline-offset: 3px;
  border-radius: 4px;
}

.bouton-envoyer {
  padding: 13px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--pomme);
  color: var(--texte-sur-pomme);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s;
}

.bouton-envoyer:hover:not(:disabled) {
  filter: brightness(1.08);
}

/* Bouton inactif tant que les champs obligatoires ne sont pas remplis */
.bouton-envoyer:disabled {
  background: #2C554A;
  color: var(--texte-invite);
  cursor: not-allowed;
}

/* Contour bien visible pour la navigation au clavier */
button:focus-visible {
  outline: 3px solid var(--pomme);
  outline-offset: 3px;
}

/* ==========================================================
   6. PETITS ÉCRANS (téléphone) : les champs passent en une colonne
   ========================================================== */
@media (max-width: 600px) {
  .cadre {
    padding: 20px 18px;
  }

  .grille {
    grid-template-columns: 1fr;
  }

  .pied {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .bouton-envoyer {
    width: 100%;
  }
}

/* Respecte le réglage "réduire les animations" du système */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}