/* 
* Document:forms.css
* Version:mai-2025
* Auteur:gilles DARNET
* Description:styles complémentaires pour les formulaires Contact et Calculette
,*/@charset "UTF-8";form,#result-container{display:grid;grid-template-columns:1fr;margin-inline:auto;padding-inline:var(--space-xs);padding-block:var(--space-s);border:1px solid var(--color-medium-grey);border-radius:var(--border-radius);background-color:var(--color-primary-light);gap:calc(var(--space-gap) / 2);font-size:var(--fontsize-s1);}form#swapForm{grid-template-columns:1fr 1fr;}.form-group{display:grid;gap:calc(var(--space-gap) / 3);}.form-group fieldset{display:grid;grid-template-columns:1fr 1fr;justify-items:center;column-gap:calc(var(--space-gap) / 3);padding:0;margin:0;border:none;}.form-group input:not([type="checkbox"],[type="radio"]),.form-group textarea,.form-group select,.form-group output{padding:var(--space-2xs);border:1px solid var(--color-medium-grey);border-radius:var(--border-radius);width:100%;}.form-group label,.form-group .label{display:block;font-weight:500;text-transform:uppercase;}form input[type="text"],form input[type="number"],form textarea,form select,form input[type="email"],#result-container output{background-color:var(--color-white);border:1px solid var(--color-medium-grey);border-radius:var(--border-radius);}form button{justify-self:center;}form#contactForm textarea{resize:vertical;}#result-container{visibility:hidden;background-color:var(--color-primary-light);}form input:not(:placeholder-shown).valid{background-color:var(--color-vert-bg)}form input:not(:placeholder-shown).invalid{background-color:var(--color-rouge-bg)}form .comment{background-color:transparent;border:none;font-weight:500;resize:none;}.form-group output{text-align:center;}.formContainer{container-type:inline-size;container-name:swapCalculator;}@container swapCalculator (width < 528px){form#swapForm{grid-template-columns:1fr}}.spinner{display:none;width:15px;height:15px;border:2px solid var(--color-light-grey);border-top:2px solid var(--color-primary);border-radius:50%;animation:spin 1s linear infinite;}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.spinner.active{display:inline-block;margin-left:var(--space-2xs);}