/* The questionnaire of three profiles (page-selection-profils.php), 24/10.
   The fields, boxes and pills are the shared ones of base.css (.field, .choices,
   .consent); this sheet only lays out the three parts. */

.sel-intro{padding:clamp(2rem,1.5rem + 2vw,3rem) 0 0}
.sel-intro .lead{max-width:60ch}

.sel-form-band{padding:clamp(1.5rem,1rem + 2vw,2.5rem) 0 clamp(3rem,2rem + 3vw,5rem)}
.sel-form,.sel-form-band .form-ok{max-width:760px}

.sel-part{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
    padding:clamp(1.3rem,1rem + 1.5vw,2.2rem);margin-bottom:1.4rem}
.sel-part h2{font-size:clamp(1.35rem,1.15rem + .8vw,1.75rem);margin-bottom:1.2rem}

.sel-group{border:0;padding:0;margin:0 0 1.3rem;min-width:0}
.sel-group .choices{gap:.5rem}
.sel-form .field{margin-bottom:1.1rem}
/* 25/10, Valérie: « mettre en rouge : Vous êtes, Votre âge, Votre taille [...] un
   message pour Valérie », every question of the form. The red of the titles,
   8.9:1 on the cream; « (facultatif) » stays grey, it is not the question. */
.sel-form .field>label,.sel-group legend{color:var(--accent)}
.sel-form .optional{font-weight:400;color:var(--muted)}
.sel-form textarea{width:100%;min-height:5.5rem;padding:.7rem .9rem;font:inherit;color:var(--ink);
    background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r)}
.sel-form textarea:focus-visible{outline:3px solid var(--brand);outline-offset:1px}

.sel-grid{display:grid;grid-template-columns:1fr;gap:0 1.2rem}
@media (min-width:700px){.sel-grid{grid-template-columns:1fr 1fr}}

.sel-form .consent{margin-top:.4rem}
.sel-form .consent-note{margin:.6rem 0 1.3rem;color:var(--ink-2);font-size:.92rem}