/* =========================================================================
   RGD Renova — formulaires, habillage « cartes en relief »

   Chaque champ vit dans sa propre carte : elle se soulève au survol et
   s'entoure d'orange quand on y écrit. Les choix sont des pastilles qui
   grossissent. Feuille autonome, indépendante du thème.
   ========================================================================= */

.rgdform {
  --f-orange: #FD7A2D;
  --f-orange-fonce: #C4560F;
  --f-encre: #212121;
  --f-encre-doux: #5C5854;
  --f-creme: #FFF4EA;
  --f-vert: #2EA05A;
  --f-rouge: #C0392B;

  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border-radius: 22px;
  background: var(--f-creme);
  color: var(--f-encre);
  font-size: 15px;
  text-align: left;
}
.rgdform *, .rgdform *::before, .rgdform *::after { box-sizing: border-box; }

/* ==========================================================  fil des étapes */
.rgdform-fil {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}
.rgdform-fil__item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  border: 0;
  background: #fff;
  font: inherit;
  font-size: .81rem;
  font-weight: 600;
  color: var(--f-encre-doux);
  cursor: pointer;
  box-shadow: 0 2px 10px -6px rgba(120, 70, 30, .6);
  transition: transform .22s cubic-bezier(.2, .7, .3, 1), background .22s ease, color .22s ease;
}
.rgdform-fil__item:hover { transform: translateY(-2px); background: #FFE7CE; color: var(--f-orange-fonce); }
.rgdform-fil__item.is-active { background: var(--f-orange); color: #fff; }
.rgdform-fil__item.is-done { color: var(--f-orange-fonce); }
.rgdform .rgdform-fil__num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background: rgba(33, 33, 33, .1);
  font-size: .76rem;
  font-weight: 800;
}
.rgdform-fil__item.is-active .rgdform-fil__num { background: rgba(255, 255, 255, .3); color: #fff; }
.rgdform-fil__item.is-done .rgdform-fil__num { background: var(--f-orange); color: #fff; font-size: 0; }
.rgdform-fil__item.is-done .rgdform-fil__num::after { content: "\2713"; font-size: .72rem; }
.rgdform-fil__fleche { color: rgba(33, 33, 33, .25); }

/* =================================================================  étapes */
.rgdform-etape { display: none; }
.rgdform-etape.is-active { display: block; animation: rgdform-entree .4s cubic-bezier(.2, .7, .3, 1); }

@keyframes rgdform-entree {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* En-tête d'étape : pastille qui pulse */
.rgdform-etape__titre {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.5rem;
}
.rgdform .rgdform-etape__pastille {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background: var(--f-orange);
  color: #fff;
  font-weight: 800;
  font-size: .96rem;
  animation: rgdform-pulse 2.4s ease-in-out infinite;
}
@keyframes rgdform-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(253, 122, 45, .5); }
  60%      { box-shadow: 0 0 0 12px rgba(253, 122, 45, 0); }
}
.rgdform .rgdform-etape__titre span {
  display: block;
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  font-weight: 800;
  line-height: 1.2;
}
.rgdform-etape__titre small {
  display: block;
  margin-top: .18rem;
  font-size: .82rem;
  color: rgba(33, 33, 33, .6);
  font-weight: 500;
}

/* ==============================================  grille et cartes de champ */
.rgdform-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.rgdform-groupe {
  background: #fff;
  border-radius: 14px;
  padding: 1rem 1.1rem;
  border: 1.5px solid transparent;
  box-shadow: 0 2px 10px -6px rgba(120, 70, 30, .5);
  transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease, border-color .25s ease;
}
.rgdform-groupe--large { grid-column: 1 / -1; }
.rgdform-groupe:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(120, 70, 30, .8); }
.rgdform-groupe:focus-within {
  border-color: var(--f-orange);
  box-shadow: 0 16px 34px -18px rgba(253, 122, 45, .9);
}

.rgdform .rgdform-label {
  display: block;
  margin-bottom: .35rem;
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--f-orange-fonce);
}
.rgdform-groupe--requis > .rgdform-label::after { content: " *"; color: var(--f-orange); }

.rgdform .rgdform-champ {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: .94rem;
  line-height: 1.45;
  color: var(--f-encre);
  padding: 0;
  border-radius: 0;
}
.rgdform .rgdform-champ:focus { outline: none; }
.rgdform .rgdform-champ::placeholder { color: rgba(33, 33, 33, .34); }
.rgdform textarea.rgdform-champ { resize: vertical; min-height: 96px; }

/* La liste déroulante prend la même allure que les pastilles : fond crème,
   chevron dans une pastille orange qui s'anime au survol. */
.rgdform .rgdform-champ-boite { position: relative; }
.rgdform select.rgdform-champ {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding: .55rem 2.9rem .55rem .8rem;
  background: var(--f-creme);
  border-radius: 10px;
  font-weight: 600;
  transition: background .2s ease, color .2s ease;
}
.rgdform select.rgdform-champ:hover { background: #FFE7CE; }
.rgdform select.rgdform-champ:focus { background: #FFE7CE; }
.rgdform select.rgdform-champ option { font-weight: 500; color: var(--f-encre); background: #fff; }

/* Chevron posé par-dessus, dans une pastille */
.rgdform .rgdform-champ-boite::after {
  content: "";
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background-color: var(--f-orange);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  pointer-events: none;
  transition: transform .25s cubic-bezier(.2, .7, .3, 1), background-color .2s ease;
}
.rgdform-groupe:hover .rgdform-champ-boite::after { background-color: #E5651A; }
.rgdform-groupe:focus-within .rgdform-champ-boite::after {
  transform: translateY(-50%) rotate(180deg);
}

/* =====================================================  choix en pastilles */
.rgdform-choix-liste { display: flex; flex-wrap: wrap; gap: .45rem; }
.rgdform-choix { position: relative; display: inline-flex; }
.rgdform-choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.rgdform .rgdform-choix label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem .95rem;
  border-radius: 999px;
  background: var(--f-creme);
  font-size: .83rem;
  font-weight: 600;
  color: var(--f-encre);
  cursor: pointer;
  user-select: none;
  transition: transform .2s cubic-bezier(.2, .7, .3, 1), background .2s ease, color .2s ease;
}
.rgdform-choix label:hover { background: rgba(253, 122, 45, .2); transform: scale(1.05); }
.rgdform-choix input:checked + label {
  background: var(--f-orange);
  color: #fff;
  transform: scale(1.05);
}
.rgdform-choix input:checked + label::before { content: "\2713"; font-weight: 800; }
.rgdform-choix input:focus-visible + label { outline: 3px solid rgba(253, 122, 45, .55); outline-offset: 2px; }

/* Champ conditionnel : masqué tant que la réponse attendue n'est pas donnée.
   !important parce que .rgdform-groupe impose un display. */
.rgdform .rgdform-groupe--masque { display: none !important; }

/* ==========================================================  acceptation */
.rgdform-groupe--acceptation { box-shadow: none; background: transparent; }
.rgdform-groupe--acceptation:hover { transform: none; box-shadow: none; }
.rgdform-acceptation { position: relative; display: block; padding-left: 2rem; }
.rgdform-acceptation input { position: absolute; opacity: 0; width: 0; height: 0; }
.rgdform-acceptation__lien {
  display: inline-block;
  margin: .45rem 0 0 2rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--f-orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rgdform-acceptation__lien:hover { color: #E06413; }

.rgdform-acceptation label { font-size: .84rem; color: var(--f-encre-doux); cursor: pointer; line-height: 1.5; }
.rgdform-acceptation label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 21px;
  height: 21px;
  border: 1.5px solid rgba(33, 33, 33, .22);
  border-radius: 7px;
  background: #fff;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.rgdform-acceptation input:checked + label::before {
  content: "\2713";
  display: grid;
  place-items: center;
  background: var(--f-orange);
  border-color: var(--f-orange);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  transform: scale(1.06);
}

/* ==========================================================  validation */
.rgdform-aide {
  display: block;
  margin-top: .3rem;
  font-size: .8rem;
  color: var(--f-encre-doux);
  min-height: 1em;
}
.rgdform-groupe.is-erreur {
  border-color: var(--f-rouge);
  box-shadow: 0 14px 30px -18px rgba(192, 57, 43, .7);
}
.rgdform-groupe.is-erreur .rgdform-aide { color: var(--f-rouge); font-weight: 600; }
.rgdform-groupe.is-erreur .rgdform-label { color: var(--f-rouge); }

.rgdform-groupe.is-valide { border-color: rgba(46, 160, 90, .5); }
.rgdform-groupe.is-valide .rgdform-label::before {
  content: "\2713 ";
  color: var(--f-vert);
  font-weight: 800;
}

.rgdform-message { margin: 1.2rem 0 0; font-size: .93rem; min-height: 1.2em; }
.rgdform-message.is-erreur {
  color: var(--f-rouge);
  background: rgba(192, 57, 43, .08);
  border-left: 3px solid var(--f-rouge);
  padding: .8rem 1rem;
  border-radius: 10px;
  font-weight: 500;
}

/* ==========================================================  navigation */
.rgdform-nav { display: flex; gap: .8rem; margin-top: 1.6rem; }
.rgdform-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex: 1;
  padding: 1.05rem 1.8rem;
  border: 0;
  border-radius: 999px;
  background: var(--f-orange);
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: .95rem;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.rgdform-btn:hover {
  transform: translateY(-3px) scale(1.01);
  background: #FFBC7D;
  color: var(--f-encre);
}
.rgdform-btn:disabled { opacity: .6; cursor: wait; transform: none; }
.rgdform-btn svg { transition: transform .2s ease; }
.rgdform-btn:hover svg { transform: translateX(4px); }

.rgdform-btn--ghost {
  flex: 0 0 auto;
  background: #fff;
  color: var(--f-encre);
  box-shadow: 0 2px 10px -6px rgba(120, 70, 30, .6);
}
.rgdform-btn--ghost:hover { background: #FFE7CE; color: var(--f-orange-fonce); }
.rgdform-btn--ghost:hover svg { transform: translateX(-4px); }

.rgdform-btn--envoi,
.rgdform-btn:not(.rgdform-btn--ghost) {
  background: linear-gradient(120deg, #FF9A4D, #FD7A2D 55%, #E5651A);
  box-shadow: 0 14px 30px -12px rgba(253, 122, 45, .95);
}
.rgdform-btn:not(.rgdform-btn--ghost):hover {
  background: linear-gradient(120deg, #FFD1A3, #FFBC7D 55%, #FFA55C);
  color: var(--f-encre);
  box-shadow: 0 20px 40px -12px rgba(253, 122, 45, .8);
}

.rgdform-compteur {
  display: block;
  margin-top: .3rem;
  font-size: .79rem;
  color: rgba(33, 33, 33, .5);
  text-align: right;
}

/* ==========================================================  responsive */
@media (max-width: 760px) {
  .rgdform-grille { grid-template-columns: 1fr; }
  .rgdform-nav { flex-direction: column-reverse; }
  .rgdform-btn { width: 100%; flex: none; }
  .rgdform-fil__fleche { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rgdform-etape.is-active { animation: none; }
  .rgdform-etape__pastille { animation: none; }
  .rgdform * { transition: none !important; }
}

/* =========================================================================
   Section qui accueille le formulaire
   Le fond sombre du site est remplacé par un dégradé clair, introduit par
   une vague, pour que le formulaire ne flotte plus sur du noir.
   ========================================================================= */
.rgdfs {
  position: relative;
  /* La photo de la section d'origine, mais voilée de crème au lieu du noir
     à 50 % qui écrasait tout : le chantier se devine, le formulaire reste lisible. */
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .90) 0%, rgba(255, 244, 234, .88) 45%, rgba(255, 233, 214, .92) 100%),
    url("../medias/2025/09/Renovation-interieure-RGD-Renova-Oise-et-Ile-de-france.avif");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, scroll;
  color: #212121;
  padding: clamp(2.6rem, 5vw, 4.2rem) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
.rgdfs__vague {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  line-height: 0;
  pointer-events: none;
}
.rgdfs__vague svg { display: block; width: 100%; height: clamp(24px, 2.6vw, 35px); }
.rgdfs__vague path { fill: #212121; }

.rgdfs__wrap { width: min(100% - 2.5rem, 1200px); margin-inline: auto; position: relative; }

.rgdfs__entete { text-align: center; margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }
.rgdfs__eyebrow {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #FD7A2D;
  margin-bottom: .8rem;
}
.rgdfs__titre.rgdfs__titre {
  font-size: clamp(1.4rem, 2.5vw, 1.95rem);
  line-height: 1.2;
  margin: 0 0 .7rem;
  color: #212121;
}
.rgdfs__intro {
  max-width: 640px;
  margin: 0 auto;
  font-size: .94rem;
  line-height: 1.6;
  color: #5C5854;
}

/* Repères sous le formulaire */
.rgdfs__reperes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem 2.4rem;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  list-style: none;
  padding: 0;
  font-size: .92rem;
  font-weight: 600;
  color: #5C5854;
}
.rgdfs__reperes li { display: flex; align-items: center; gap: .5rem; }
.rgdfs__reperes svg { flex: none; color: #FD7A2D; }

/* Sans vague : la section enchaîne directement sur celle du dessus */
.rgdfs--sans-vague { padding-top: clamp(1.6rem, 3vw, 2.6rem); }

/* Titre plus discret, quand la page porte déjà son grand titre plus haut */
.rgdfs--compact .rgdfs__titre { font-size: clamp(1.3rem, 2.1vw, 1.75rem); }
.rgdfs--compact .rgdfs__intro { font-size: .97rem; }