/*
Theme Name: Strategeek
Author: Strategeek
Author URI:  https://www.strategeek.fr
Theme URI: https://www.strategeek.fr
Template: artech-theme
Description: This is a theme for Strategeek.
Version: 1.0.2
Text Domain: strategeek
Tags: one-column, two-columns, right-sidebar,custom-colors,featured-images
*/

/* ---------------------------------------------
   Style global du formulaire narratif
   --------------------------------------------- */
.form-narratif {
  font-size: 1.5rem;             /* Taille de police principale */
  line-height: 1.2;              /* Hauteur de ligne compacte */
  display: flex;                 /* Active le modèle flexbox */
  flex-direction: column;       /* Empile les paragraphes verticalement */
  align-items: center;          /* Centre les paragraphes horizontalement */
  text-align: center;           /* Centre le contenu textuel à l’intérieur des paragraphes */
}

/* ---------------------------------------------
   Style des paragraphes : compacts et alignés
   --------------------------------------------- */
.form-narratif p {
  margin: 0.6rem 0;             /* Marge verticale entre chaque ligne */
  display: flex;                /* Flexbox pour permettre l’alignement des inputs et du texte */
  flex-wrap: wrap;              /* Permet aux éléments de passer à la ligne si nécessaire */
  align-items: baseline;        /* Aligne le texte et les champs sur la ligne de base */
  gap: 0.5ch;                   /* Espacement horizontal entre les éléments */
  color: black;                 /* Couleur du texte principale */
}

/* ---------------------------------------------
   Style général des champs de saisie
   --------------------------------------------- */
.form-narratif input {
  font-size: 1.5rem;            /* Taille de texte égale à celle du paragraphe */
  font-style: italic;           /* Style en italique pour différencier le champ */
  background: transparent;      /* Fond transparent pour se fondre dans le texte */
  border: none;                 /* Pas de bordure latérale */
  border-bottom: 1px solid #000;/* Soulignement noir */
  outline: none;                /* Retire le contour bleu au focus */
  padding: 0 2px;               /* Légère marge intérieure horizontale */
  line-height: 1;               /* Hauteur de ligne compacte */
}

/* ---------------------------------------------
   Largeur personnalisée pour chaque input
   (alignée avec le placeholder)
   --------------------------------------------- */
.form-narratif input[name="nom"] {
  width: 11ch;                  /* "Nom prénom" */
}

.form-narratif input[name="societe"] {
  width: 15ch;                  /* "Nom de la société" */
}

.form-narratif input[name="projet"] {
  width: 12ch;                  /* "Nom du projet" */
}

.form-narratif input[name="email"] {
  width: 15ch;                  /* "Mon adresse mail" */
}

.form-narratif input[name="telephone"] {
  width: 22ch;                  /* "Mon numéro de téléphone" */
}

/* ---------------------------------------------
   Style du texte secondaire (en dessous du projet)
   --------------------------------------------- */
.form-narratif .commentaire {
  font-size: 1.5rem;            /* Même taille que le reste du formulaire */
  font-style: italic;           /* Italique pour le différencier */
  color: #666;                  /* Gris plus doux */
  margin-top: 0;                /* Pas d’espace au-dessus (écrase le style global éventuel) */
  margin-bottom: 25px;          /* Espace sous la ligne explicative */
}

/* ---------------------------------------------
   Bouton d’envoi
   --------------------------------------------- */
.form-narratif button {
  margin-top: 40px;             /* Espace au-dessus du bouton */
  padding: 15px 35px;           /* Taille du bouton (haut/bas et gauche/droite) */
  background: #000;             /* Fond noir */
  color: #fff;                  /* Texte blanc */
  border: none;                 /* Pas de bordure */
  font-size: 1rem;              /* Taille du texte du bouton */
  cursor: pointer;              /* Curseur pointeur au survol */
  transition: background 0.3s;  /* Animation fluide sur le survol */
}

.form-narratif button:hover {
  background: #333;             /* Fond gris foncé au survol */
}

/* ---------------------------------------------
   Ajustement de l’espacement uniquement pour 
   la ligne "J’ai un projet Nom du projet"
   --------------------------------------------- */
.form-narratif p:nth-of-type(3) {
  margin-bottom: 0.2rem;        /* Réduction de l’espace avec la ligne suivante */
}

/* === Barre de séparation verticale (entre deux éléments du footer) === */

.barre-separation {
  display: inline-block;            /* Permet d'afficher la barre dans le flux du texte, sans forcer un retour à la ligne */
  width: 1px;                       /* Épaisseur fine pour un séparateur discret */
  height: 27px;                     /* Hauteur ajustable selon l’alignement des éléments voisins */
  background-color: #999999;        /* Couleur grise moyenne (#999999) pour une séparation sobre et élégante */
  margin: 0 10px;                   /* Espace à gauche et à droite pour éviter que la barre ne colle aux éléments adjacents */
}


/* Message sous le formulaire */
.form-message {
  margin-top: 18px;
  font-size: 1.05rem;
  text-align: center;
}

.form-message.loading { color: #666; }
.form-message.success { color: #1b7f3a; }
.form-message.error   { color: #b3261e; }

/* Honeypot invisible */
.sgk-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Bouton désactivé (optionnel) */
.form-narratif button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}