/* Carte d'un groupe composite (lueur, dégradé) dans un formulaire d'options du
   back-office. Balisage : CMS_Service_Template_Option_Composite (repères
   `data-composite-*`), gabarit Popup/Options/Template/compositeNote.phtml, et
   form/composite/card.js qui construit la carte. Chargé pour tout le
   back-office par GCS_Controller_Admin, comme l'aperçu du dégradé. */

/* La carte est une `div` que le script crée : elle échappe aux règles des
   champs du BO, qui imposent leurs marges en `!important`. Les champs qu'elle
   contient gardent les leurs.
   `form` en tête de sélecteur, ici comme sur le mode d'emploi plus bas : le BO
   remet à zéro bordure et arrondi de tout élément de formulaire
   (`.cs-form-abstract *`, émise dans la popup donc après cette feuille), à
   spécificité égale d'une classe seule. */
form .cs-compositeCard {
    box-sizing: border-box;
    flex: 0 0 100%;
    width: 100%;
    margin-top: 22px;
    padding: 16px 20px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 20px;
    background: #f5f8fa;
    border: 1px solid #e0e7eb;
    border-radius: 12px;
}

/* Groupe masqué par sa condition (#71955) : conditionalOptions.js masque
   l'intertitre et chaque champ, la carte vide suit l'intertitre. */
.cs-compositeCard:has(> [data-composite-note][style*="display: none"]) {
    display: none;
}

.cs-compositeCard > .cs-form-element {
    width: 100%;
}

/* Les réglages qui vont par deux — couleur et sa version sombre, départ et
   arrivée, centre horizontal et vertical, largeur et hauteur — sur une ligne. */
.cs-compositeCard > [data-composite-layout="half"] {
    width: calc(50% - 10px);
}

@media (max-width: 760px) {
    .cs-compositeCard > [data-composite-layout="half"] {
        width: 100%;
    }
}

/* ---- intertitre ---- */

.cs-compositeCard > [data-composite-note] {
    align-items: stretch;
}

/* L'espace au-dessus du titre est celui de la carte, et lui seul : la marge
   que le BO donne à l'intertitre varie selon l'écran (1,5rem en `!important`
   dans une popup de page, rien ailleurs), et collait le titre au bord de la
   carte là où elle manquait. Sélecteur long et `!important` pour défaire la
   règle de `bo2_2.css` (0,4,2) partout où elle s'applique. */
form.cs-form-abstract fieldset .cs-compositeCard > .cs-form-element.note[data-composite-note] {
    margin-top: 0 !important;
}

.cs-compositeCard > [data-composite-note] .content {
    width: 100%;
    font-size: 13px;
    color: #66737a;
}

.cs-compositeNote {
    position: relative;
}

.cs-compositeNote_title {
    display: block;
    /* Réserve la place du lien « Comment ça marche ? », posé en haut à droite. */
    padding-right: 170px;
    font-family: "Nunito Sans", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #1c222e;
}

.cs-compositeNote_desc {
    margin: 4px 0 0;
}

.cs-compositeNote_help {
    font-size: 12.5px;
}

/* Le lien reste en haut à droite de la carte ; ouvert, le mode d'emploi se
   déplie à sa place dans le flux, sous la description. */
.cs-compositeNote_help summary {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: #3b8ea3;
}

.cs-compositeNote_help summary::-webkit-details-marker {
    display: none;
}

.cs-compositeNote_help summary::before {
    content: 'i';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font: italic 700 10px/1 Georgia, serif;
}

form .cs-compositeNote_help p {
    margin: 10px 0 0;
    padding: 10px 12px;
    line-height: 1.45;
    color: #5a6f76;
    background: #fff;
    border: 1px solid #e0e7eb;
    border-radius: 8px;
}

.cs-compositeCard .cs-linearPreview {
    margin: 12px 0 0;
}

/* ---- champs ---- */

.cs-compositeCard > [data-composite] > label {
    font-size: 12.5px;
    font-weight: 600;
    color: #3d4b52;
}

/* En demi-largeur, la liste des couleurs du site et le champ libre doivent
   tenir sur une ligne. `max-width` et non `width` : le widget pose sa largeur
   en style inline, qu'un `max-width` borne sans recourir à `!important`. */
.cs-compositeCard .cs-colorPalette {
    margin-right: 6px;
}

.cs-compositeCard .cs-colorPalette button.ui-multiselect {
    max-width: 175px;
}

.cs-compositeCard .clr-field {
    flex: 1 1 auto;
    min-width: 0;
}

.cs-compositeCard .clr-field input {
    width: 100%;
}

.cs-compositeCard input[type="range"] {
    flex: 1 1 auto;
    min-width: 0;
}

.cs-compositeCard .cs-form-element-range-display-value {
    min-width: 34px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #3d4b52;
}

/* ---- case qui fait apparaître un groupe (« Ajouter une seconde lueur ») ----
   Sélecteur long à dessein : le BO remet à zéro le padding des champs avec
   `form.cs-form-abstract.cardContainer fieldset .cs-form-element` et leur
   impose une marge en `!important`. */
form.cs-form-abstract fieldset .cs-form-element.checkbox[data-composite-toggle] {
    box-sizing: border-box;
    width: 100%;
    margin-top: 22px !important;
    padding: 12px 16px;
    border: 1.5px dashed #b9cbd2;
    border-radius: 12px;
}

.cs-form-element[data-composite-toggle] > label {
    font-size: 13px;
    font-weight: 600;
    color: #3b8ea3;
}