/*
 * Checkbox et radio personnalisé - Inkwell 
 */ 

/* BASE COMMUNE */
.case-inkwell {
    display:inline-flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    font-family:var(--police-corps);
    font-size:0.92rem;
    color:var(--couleur-anthracite);
    user-select:none;
}

.case-inkwell input {
    position:absolute;
    opacity:0;
    width:1px;
    height:1px;
    pointer-events:none;
}

.case-inkwell__visuel {
    position:relative;
    flex-shrink:0;
    width:20px;
    height:20px;
    background-color:#FFFFFF;
    border:2px solid rgba(38, 53, 60, 0.25);
    transition:border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.case-inkwell:hover .case-inkwell__visuel {
    border-color:var(--couleur-corail);
}

.case-inkwell input:focus-visible ~ .case-inkwell__visuel {
    box-shadow:0 0 0 3px rgba(255, 103, 106, 0.2);
}

.case-inkwell input:disabled ~ .case-inkwell__visuel {
    background-color:rgba(38, 53, 60, 0.05);
    border-color:rgba(38, 53, 60, 0.12);
    cursor:not-allowed;
}

.case-inkwell:has(input:disabled) {
    cursor:not-allowed;
    color:rgba(38, 53, 60, 0.4);
}

/* CHECKBOX (carré) */
.case-inkwell__visuel--checkbox {
    border-radius:6px;
}

.case-inkwell__visuel--checkbox i {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, 50%) scale(0);
    color:#FFFFFF;
    font-size:0.72rem;
    transition:transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.case-inkwell input:checked ~ .case-inkwell__visuel--checkbox {
    background-color:var(--couleur-corail);
    border-color:var(--couleur-corail);
}

.case-inkwell input:checked ~ .case-inkwell__visuel--checkbox i {
    transform:translate(-50%, -50%) scale(1);
}

.case-inkwell input:indeterminate ~ .case-inkwell__visuel--checkbox {
    background-color:var(--couleur-corail);
    border-color:var(--couleur-corail);
}

.case-inkwell input:indeterminate ~ .case-inkwell__visuel--checkbox i {
    transform:translate(-50%, -50%) scale(1);
}

/* RADIO (rond) */
.case-inkwell__visuel--radio {
    border-radius:50%;
}

.case-inkwell__visuel--radio::after {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:10px;
    height:10px;
    border-radius:50%;
    background-color:var(--couleur-corail);
    transform:translate(-50%, -50%) scale(0);
    transition:transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.case-inkwell input:indeterminate ~ .case-inkwell__visuel--radio {
    border-color:var(--couleur-corail);
}

.case-inkwell input:checked ~ .case-inkwell__visuel--radio::after {
    transform:translate(-50%, -50%) scale(1);
}

/* Version carte */
.case-inkwell--carte {
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    padding:14px 16px;
    border:2px solid rgba(38, 53, 60, 0.12);
    border-radius:var(--rayon-bouton);
    transition:border-color 0.15s ease, background-color 0.15s ease;
}

.case-inkwell--carte:hover {
    border-color:rgba(255, 103, 106, 0.5);
}

.case-inkwell--carte:has(input:checked) {
    border-color:var(--couleur-corail);
    background-color:rgba(255, 103, 106, 0.06);
}

.case-inkwell--carte .case-inkwell__contenu {
    flex:1;
}

.case-inkwell--carte .case-inkwell__titre {
    font-weight:600;
    display:block;
}

.case-inkwell--carte .case-inkwell__description {
    font-size:0.8rem;
    color:rgba(38, 53, 60, 0.6);
}

/* Groupe */
.groupe-cases {
    display:flex;
    flex-direction:column;
    gap:12px;
}

.groupe-cases--ligne {
    flex-direction:row;
    flex-wrap:wrap;
    gap:20px;
}

.case-inkwell__texte {
    flex:1;
}

.case-inkwell__texte a {
    color:var(--couleur-corail);
    font-weight:600;
}

.case-inkwell__texte a:hover {
    text-decoration:underline;
}

/* Variantes sombre */
.case-inkwell--sombre {
    color:rgba(255, 255, 255, 0.75);
}

.case-inkwell--sombre .case-inkwell__visuel {
    background-color:rgba(255, 255, 255, 0.08);
    border-color:rgba(255, 255, 255, 0.25);
}

.case-inkwell--sombre a {
    color:var(--couleur-corail);
    text-decoration:underline;
}
