/* ==========================================================================
   CPAS Saint-Gilles — Formulaire de demande d'aide (Contact Form 7)
   À coller dans Apparence > Personnaliser > CSS additionnel,
   ou dans l'onglet "Réglages additionnels" du formulaire CF7.
   ========================================================================== */

:root{
  --og-red:#C00036;
  --og-red-dark:#98002a;
  --og-teal:#00B29D;
  --og-bg:#F5FBFE;
  --og-ink:#1c2530;
  --og-muted:#5c6b7a;
  --og-border:#dfe8ee;
  --og-font-head:'Montserrat', sans-serif;
  --og-font-body:'Crimson Pro', serif;
}

/* Conteneur global du formulaire */
.wpcf7-form{
  font-family:var(--og-font-body);
  color:var(--og-ink);
  background:#fff;
  border:1px solid var(--og-border);
  border-radius:14px;
  padding:2rem 2rem 2.4rem;
  max-width:760px;
  margin:0 auto;
  box-shadow:0 1px 3px rgba(20,30,40,.05);
}

/* Sections numérotées façon "étapes" — un compteur par h3 */
.wpcf7-form{counter-reset: og-step;}
.wpcf7-form h3{
  counter-increment: og-step;
  position:relative;
  font-family:var(--og-font-head);
  font-weight:700;
  font-size:1.1rem;
  color:var(--og-ink);
  margin:2.4rem 0 1.3rem;
  padding-bottom:.75rem;
  padding-left:2.6rem;
  border-bottom:1px solid var(--og-border);
}
.wpcf7-form h3:first-child{margin-top:0;}
.wpcf7-form h3::before{
  content: counter(og-step);
  position:absolute;
  left:0;
  top:-.2rem;
  width:34px;height:34px;
  border-radius:50%;
  background:var(--og-red);
  color:#fff;
  font-family:var(--og-font-head);
  font-weight:700;
  font-size:.95rem;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Un fil discret entre les puces, pour renforcer la lecture "progression" */
.wpcf7-form h3:not(:first-child)::after{
  content:"";
  position:absolute;
  left:17px;
  top:-1.6rem;
  width:2px;
  height:1.6rem;
  background:var(--og-border);
}

/* Champs */
.wpcf7-form p{margin:0 0 1.3rem;}
.wpcf7-form label{
  display:block;
  font-family:var(--og-font-head);
  font-size:.88rem;
  font-weight:600;
  /* pas de majuscules forcées — lisibilité avant tout */
  color:var(--og-ink);
  margin-bottom:1.6rem; /* espace entre ce champ et le suivant */
}

/* Espace entre le texte du label (+ hint éventuel) et le champ lui-même.
   Le control-wrap suit toujours un <br> dans le gabarit CF7. */
.wpcf7-form .wpcf7-form-control-wrap{
  display:block;
  margin-top:.55rem;
}

/* Texte d'aide sous un label — à encadrer dans <span class="og-hint">
   directement dans le gabarit du formulaire CF7 (voir message). */
.wpcf7-form label .og-hint{
  display:block;
  font-family:var(--og-font-body);
  font-size:.92rem;
  font-weight:400;
  text-transform:none;
  color:var(--og-muted);
  margin-top:.25rem;
}

.wpcf7-form input.wpcf7-form-control,
.wpcf7-form textarea.wpcf7-form-control{
  width:100%;
  font-family:var(--og-font-body);
  font-size:1rem;
  padding:.7rem .85rem;
  border:1px solid var(--og-border);
  border-radius:8px;
  background:#fbfdfe;
  color:var(--og-ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.wpcf7-form textarea.wpcf7-form-control{min-height:110px;resize:vertical;}

.wpcf7-form input.wpcf7-form-control:focus-visible,
.wpcf7-form textarea.wpcf7-form-control:focus-visible{
  outline:none;
  border-color:var(--og-red);
  box-shadow:0 0 0 3px rgba(192,0,54,.12);
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder{color:#9aa8b3;}

/* Champ date en trois blocs (jour/mois/année) placés côte à côte,
   en largeurs flexibles pour toujours tenir sur une seule ligne. */
.wpcf7-form .og-date-row{display:flex;gap:.5rem;}
.wpcf7-form .og-date-row input{
  flex:1 1 0;
  min-width:0;
  text-align:center;
}
.wpcf7-form .og-date-row input[name="naissance_annee"]{
  flex:1.3 1 0;
}


/* Upload de fichier — CF7 rend un input natif, on l'habille au mieux sans JS */
.wpcf7-form input[type="file"]{
  width:100%;
  padding:.6rem;
  border:1.5px dashed var(--og-border);
  border-radius:10px;
  background:#fbfdfe;
  font-family:var(--og-font-body);
  color:var(--og-muted);
  cursor:pointer;
}
.wpcf7-form input[type="file"]:hover{border-color:var(--og-teal);}
.wpcf7-form input[type="file"]::file-selector-button{
  font-family:var(--og-font-head);
  font-weight:600;
  font-size:.85rem;
  color:#fff;
  background:var(--og-teal);
  border:none;
  border-radius:6px;
  padding:.5rem .9rem;
  margin-right:.8rem;
  cursor:pointer;
}

/* Case RGPD (acceptance) */
.wpcf7-form .wpcf7-acceptance{
  display:flex;
  gap:.7rem;
  align-items:flex-start;
  background:var(--og-bg);
  border:1px solid var(--og-border);
  border-radius:10px;
  padding:1.1rem 1.2rem;
  margin-top:.5rem;
}
.wpcf7-form .wpcf7-acceptance input[type="checkbox"]{
  margin-top:.3rem;
  flex:none;
  width:18px;height:18px;
  accent-color:var(--og-red);
}
.wpcf7-form .wpcf7-acceptance label{
  display:flex;
  gap:.7rem;
  align-items:flex-start;
  margin-bottom:0; /* évite l'espacement de champ standard ici */
}
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label,
.wpcf7-form .wpcf7-acceptance label > *:not(input){
  font-size:.92rem;
  font-weight:400;
  text-transform:none;
  color:var(--og-muted);
  flex:1 1 auto;
  min-width:0;
}
.wpcf7-form .wpcf7-acceptance a{color:var(--og-red);font-weight:600;}

/* Bouton d'envoi */
.wpcf7-form input.wpcf7-submit{
  font-family:var(--og-font-head);
  font-weight:700;
  font-size:.95rem;
  color:#fff;
  background:var(--og-red);
  border:none;
  border-radius:8px;
  padding:.85rem 1.8rem;
  cursor:pointer;
  margin-top:1.6rem;
  transition:background .15s ease, transform .1s ease;
}
.wpcf7-form input.wpcf7-submit:hover{background:var(--og-red-dark);}
.wpcf7-form input.wpcf7-submit:active{transform:translateY(1px);}
.wpcf7-form input.wpcf7-submit:disabled{opacity:.5;cursor:not-allowed;}

/* Messages de validation / envoi */
.wpcf7-form .wpcf7-not-valid-tip{
  display:block;
  font-family:var(--og-font-head);
  font-size:.85rem;
  font-weight:600;
  color:var(--og-red);
  margin-top:.4rem;
}
.wpcf7-form-control-wrap.wpcf7-not-valid input,
.wpcf7-form-control-wrap.wpcf7-not-valid textarea{
  border-color:var(--og-red);
}

.wpcf7 .wpcf7-response-output{
  font-family:var(--og-font-body);
  border-radius:10px;
  padding:1rem 1.2rem;
  margin-top:1.5rem;
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}
.wpcf7-mail-sent-ok{
  border:1px solid var(--og-teal) !important;
  color:#00695c;
  background:#e6f7f5;
}
.wpcf7-validation-errors,
.wpcf7-mail-sent-ng{
  border:1px solid var(--og-red) !important;
  color:var(--og-red-dark);
  background:#fdeaee;
}

/* ==========================================================================
   Navigation par étapes (générée par cpas-formulaire-cf7-steps.js)
   ========================================================================== */

.og-cf7-stepper{
  display:flex;
  align-items:flex-start;
  gap:0;
  list-style:none;
  padding:0;
  max-width:760px;
  margin:0 auto 1.6rem;
}
.og-cf7-stepper li{
  flex:1;
  text-align:center;
  position:relative;
  font-family:var(--og-font-head);
}
.og-cf7-stepper li:not(:last-child)::after{
  content:"";
  position:absolute;
  top:17px;
  left:60%;
  width:80%;
  height:2px;
  background:var(--og-border);
  z-index:0;
}
.og-cf7-stepper li.og-step-done:not(:last-child)::after{background:var(--og-red);}
.og-cf7-stepper .og-step-num{
  width:34px;height:34px;
  border-radius:50%;
  border:2px solid var(--og-border);
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto .5rem;
  font-weight:700;
  font-size:.9rem;
  color:var(--og-muted);
  position:relative;z-index:1;
}
.og-cf7-stepper .og-step-label{
  font-size:.72rem;
  font-weight:600;
  color:var(--og-muted);
  display:block;
  line-height:1.2;
}
.og-cf7-stepper li[aria-current="step"] .og-step-num{
  border-color:var(--og-red);
  color:var(--og-red);
  box-shadow:0 0 0 4px rgba(192,0,54,.08);
}
.og-cf7-stepper li[aria-current="step"] .og-step-label{color:var(--og-red);}
.og-cf7-stepper li.og-step-done .og-step-num{
  background:var(--og-red);
  border-color:var(--og-red);
  color:#fff;
}
.og-cf7-stepper li.og-step-done .og-step-label{color:var(--og-ink);}

/* Une fois le JS actif, les h3 ne servent plus de repère numéroté
   (c'est le bandeau ci-dessus qui prend ce rôle) — on neutralise
   le compteur/badge posé plus haut pour éviter la redondance. */
.og-step-section h3::before,
.og-step-section h3::after{display:none;}
.og-step-section h3{padding-left:0;}

.og-step-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  margin-top:1.8rem;
  padding-top:1.4rem;
  border-top:1px solid var(--og-border);
}
.og-step-nav > *{
  width:auto !important;
  flex:0 0 auto !important;
}
.og-step-nav input.wpcf7-submit{
  margin-top:0 !important;
}
.og-btn{
  font-family:var(--og-font-head);
  font-weight:700;
  font-size:.95rem;
  border:none;
  border-radius:8px;
  padding:.75rem 1.5rem;
  cursor:pointer;
  transition:background .15s ease, transform .1s ease;
}
.og-btn:active{transform:translateY(1px);}
.og-btn-primary{background:var(--og-red) !important;color:#fff !important;border:none !important;}
.og-btn-primary:hover{background:var(--og-red-dark) !important;}
.og-btn-ghost{background:var(--og-ink) !important;color:#fff !important;border:none !important;}
.og-btn-ghost:hover{background:#000 !important;}

/* Le bouton d'envoi vit maintenant directement dans .og-step-nav
   (voir règle .og-step-nav input.wpcf7-submit plus haut). */

/* Mobile */
@media (max-width:560px){
  .wpcf7-form{padding:1.4rem 1.2rem 1.8rem;}
  .og-cf7-stepper .og-step-label{display:none;}

  .og-step-nav{
    flex-direction:column;
    align-items:stretch;
    gap:.75rem;
  }
  .og-step-nav > *{
    width:100% !important;
    flex:1 1 auto !important;
  }
  /* Sur mobile, "Précédent" en second (sous le bouton principal),
     pour garder l'action la plus probable en haut au pouce. */
  .og-step-nav .og-step-prev{
    order:2;
  }
  /* Le span vide ne sert qu'au calage space-between du desktop
     (étape 1 sans bouton Précédent) — inutile en mobile empilé. */
  .og-step-nav > span:empty{
    display:none;
  }
}

/* Panneau de confirmation après envoi réussi (remplace le rendu
   brut de CF7, généré par cpas-formulaire-cf7-steps.js) */
.og-form-confirm{
  text-align:center;
  padding:2rem 1rem;
}
.og-form-confirm .og-check{
  width:56px;height:56px;
  border-radius:50%;
  background:var(--og-teal);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1rem;
  font-size:1.6rem;
  font-family:var(--og-font-head);
}
.og-form-confirm h2{
  font-family:var(--og-font-head);
  font-weight:800;
  font-size:1.4rem;
  color:var(--og-ink);
  margin:0 0 .6rem;
}
.og-form-confirm p{
  font-family:var(--og-font-body);
  font-size:1.05rem;
  color:var(--og-muted);
  max-width:48ch;
  margin:0 auto;
}
.og-form-confirm .og-confirm-copy{
  font-size:.95rem;
  margin-top:.6rem;
}
.og-form-confirm .og-confirm-copy strong{color:var(--og-ink);}
.og-form-confirm .og-ref{
  display:inline-block;
  margin-top:1.2rem;
  padding:.6rem 1.1rem;
  background:var(--og-bg);
  border:1px solid var(--og-border);
  border-radius:8px;
  font-family:var(--og-font-head);
  font-weight:700;
  color:var(--og-red);
  letter-spacing:.03em;
}