/* =============================================================================
   Camabe — la page Essayer (25/09/2026) : site-vitrine/essayer.php.
   Le formulaire dans une carte, a gauche ; « ce qui se passe ensuite » et
   l'ouverture par le chat, a droite (dessous sur telephone). S'appuie sur
   .formulaire (pages.css). Variables du socle seulement.
   ========================================================================== */

.es-duo { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.es-formulaire { max-width: none; padding: 30px 32px; border: 1px solid var(--trait); border-radius: 18px; background: var(--carte); box-shadow: var(--ombre); }
.es-formulaire__titre { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
.es-formulaire fieldset { border-radius: 12px; }
.es-deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: end; }
/* Champs et listes de meme hauteur : deux controles cote a cote restent alignes. */
.es-formulaire input:not([type="checkbox"]):not([type="radio"]), .es-formulaire select { min-height: 46px; }
.es-domaines { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 1rem; padding: .8rem 1rem 1rem; }
.es-domaines legend { font-weight: 600; }
.es-formulaire input[type="radio"] { min-height: 0; accent-color: var(--accent); }
/* Le site du cabinet (25/09) : trois reponses ; l adresse sous « deja un site ». */
.es-site { display: grid; gap: .55rem; padding: .8rem 1rem 1rem; }
.es-site legend { font-weight: 600; }
.es-site .case { display: flex; gap: .5rem; align-items: flex-start; }
.es-site__adresse { margin: 0 0 .2rem 1.6rem; }
.es-site > .appui { margin: .3rem 0 0; }

.es-suite { position: sticky; top: calc(var(--haut-barre, 69px) + 24px); display: grid; gap: 18px; }
.es-suite__titre { margin: 0; font-size: 1.3rem; }
.es-etapes { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: es; }
.es-etapes li { position: relative; padding: 14px 16px 14px 54px; border: 1px solid var(--trait); border-radius: 12px; background: var(--carte); color: var(--encre-douce); font-size: .92rem; line-height: 1.5; counter-increment: es; }
.es-etapes li strong { color: var(--encre); }
.es-etapes li::before { content: counter(es); position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-pale); color: var(--accent); font-size: .84rem; font-weight: 700; }
.es-chat { padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--accent-pale) 55%, var(--carte)); }
.es-chat h3 { margin: 0 0 6px; font-size: 1.05rem; }
.es-chat p { margin: 0 0 12px; color: var(--encre-douce); font-size: .9rem; line-height: 1.5; }
.es-liens { margin: 0; font-size: .88rem; }

@media (max-width: 960px) {
  .es-duo { grid-template-columns: minmax(0, 1fr); }
  .es-suite { position: static; }
}
@media (max-width: 600px) {
  .es-formulaire { padding: 20px 16px; }
  .es-deux { grid-template-columns: minmax(0, 1fr); }
}