/* Formulaire de contact : boite de dialogue native <dialog>.
   Langage visuel Apple + One UI, aligne sur ui.css :
     - grands rayons, profondeur en couches, fond depoli derriere la boite ;
     - champs sur surface teintee SANS bordure, libelle flottant ;
     - choix multiples en pastilles plutot qu'en cases a cocher ;
     - ouverture animee, desactivee si le systeme demande moins d'animation. */

.contact-dialog {
    width: min(560px, calc(100vw - 28px));
    max-height: calc(100dvh - 40px);
    /* Indispensable : le `* { margin: 0 }` de styles.css et de
       sapfx-styles.css ecrase le `margin: auto` que le navigateur applique
       aux <dialog> modales. Sans cette ligne, la boite se colle dans un coin
       au lieu d'etre centree. */
    margin: auto;
    padding: 0;
    border: none;
    border-radius: var(--r-xl);
    background: #FFFFFF;
    color: #16213B;
    box-shadow: var(--shadow-3);
    overflow: hidden;
}

.contact-dialog::backdrop {
    background: rgba(6, 20, 42, 0.42);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* Ouverture : montee courte et ressort discret. @starting-style est ignore
   par les navigateurs qui ne le connaissent pas, la boite s'affiche alors
   simplement sans animation. */
.contact-dialog {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
    transition: opacity 0.26s var(--ease), transform 0.34s var(--spring),
                overlay 0.3s var(--ease) allow-discrete,
                display 0.3s var(--ease) allow-discrete;
}

.contact-dialog[open] {
    opacity: 1;
    transform: none;
}

@starting-style {
    .contact-dialog[open] {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }
}

.contact-dialog form {
    display: block;
    margin: 0;
    /* Herite de la contrainte de la boite : en feuille basse sur mobile,
       elle vaut 92dvh et non calc(100dvh - 40px). Une valeur codee en dur
       ferait depasser le formulaire, et la barre d'action serait rognee. */
    max-height: inherit;
    overflow-y: auto;
    padding: 28px 30px 26px;
    text-align: left;
    -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------- en-tete */

.cf-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.cf-head h2 {
    margin: 0;
    text-align: left;
    font-size: 1.42em;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: #16213B;
}

.cf-close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    line-height: 1;
    color: #5A6B87;
    background: rgba(10, 33, 69, 0.06);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s var(--ease), color 0.2s var(--ease),
                transform 0.16s var(--spring);
}

.cf-close:hover {
    background: rgba(10, 33, 69, 0.11);
    color: #16213B;
}

.cf-close:active {
    transform: scale(0.9);
}

.cf-intro {
    color: #66738C;
    font-size: 0.94em;
    line-height: 1.6;
    margin-bottom: 22px;
}

/* ----------------------------------------- champs a libelle flottant */

.cf-field {
    position: relative;
    margin-bottom: 12px;
}

.cf-field input[type="text"],
.cf-field input[type="email"],
.cf-field textarea {
    width: 100%;
    font: inherit;
    font-size: 1em;
    color: #16213B;
    background: var(--surface);
    border: none;
    border-radius: var(--r-md);
    padding: 26px 16px 10px;
    box-shadow: inset 0 0 0 1.5px transparent;
    transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.cf-field textarea {
    min-height: 128px;
    resize: vertical;
    line-height: 1.6;
}

.cf-field label {
    position: absolute;
    left: 17px;
    top: 17px;
    font-size: 1em;
    color: #7C8AA3;
    pointer-events: none;
    transform-origin: left top;
    transition: transform 0.18s var(--ease), color 0.18s var(--ease);
}

/* Le libelle remonte des que le champ est actif ou rempli. */
.cf-field input:focus + label,
.cf-field input:not(:placeholder-shown) + label,
.cf-field textarea:focus + label,
.cf-field textarea:not(:placeholder-shown) + label {
    transform: translateY(-9px) scale(0.76);
    color: #5A6B87;
}

.cf-field input:focus,
.cf-field textarea:focus {
    outline: none;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1.5px #0070F2, 0 0 0 4px rgba(0, 112, 242, 0.14);
}

/* Le rouge n'apparait qu'apres une saisie ou une tentative d'envoi :
   accueillir le visiteur avec des champs en erreur serait absurde. */
.cf-field input:user-invalid,
.cf-field textarea:user-invalid {
    box-shadow: inset 0 0 0 1.5px #C4314B;
}

.cf-help {
    display: block;
    margin: 5px 4px 0 17px;
    font-size: 0.84em;
    color: #7C8AA3;
}

/* ------------------------------------------------------ listes deroulantes */

.cf-select {
    margin-bottom: 12px;
}

.cf-legend {
    display: block;
    margin: 0 0 8px 4px;
    font-size: 0.86em;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #48587A;
}

.cf-select select {
    width: 100%;
    font: inherit;
    font-size: 1em;
    color: #16213B;
    background-color: var(--surface);
    /* Chevron dessine en SVG inline : aucune requete, aucun fichier. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235A6B87' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    border: none;
    border-radius: var(--r-md);
    padding: 15px 44px 15px 16px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    box-shadow: inset 0 0 0 1.5px transparent;
    transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.cf-select select:focus {
    outline: none;
    background-color: #FFFFFF;
    box-shadow: inset 0 0 0 1.5px #0070F2, 0 0 0 4px rgba(0, 112, 242, 0.14);
}

/* ------------------------------------------------- choix multiples en pastilles */

.cf-chips {
    border: none;
    padding: 0;
    margin: 0 0 16px;
}

/* Le <legend> reste un vrai legend (le groupe garde son nom pour les
   lecteurs d'ecran) ; les pastilles vivent dans un conteneur a part, sinon
   la mise en page du legend perturbe le flex. */
.cf-chips .cf-legend {
    padding: 0;
}

.cf-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cf-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    font-size: 0.93em;
    color: #35435E;
    background: var(--surface);
    border-radius: var(--r-pill);
    cursor: pointer;
    user-select: none;
    transition: background 0.18s var(--ease), color 0.18s var(--ease),
                transform 0.16s var(--spring);
}

.cf-chip input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

/* La coche n'apparait qu'une fois la pastille active : l'etat se lit
   d'un coup d'oeil, sans case a cocher permanente. */
.cf-chip .cf-tick {
    width: 0;
    overflow: hidden;
    opacity: 0;
    transition: width 0.18s var(--ease), opacity 0.18s var(--ease);
}

.cf-chip:hover {
    background: rgba(10, 33, 69, 0.09);
}

.cf-chip:active {
    transform: scale(0.96);
}

.cf-chip:has(input:checked) {
    background: #0070F2;
    color: #FFFFFF;
}

.cf-chip:has(input:checked) .cf-tick {
    width: 14px;
    opacity: 1;
}

/* Repli pour un navigateur sans :has() : la classe est posee par le script. */
.cf-chip.is-on {
    background: #0070F2;
    color: #FFFFFF;
}

.cf-chip.is-on .cf-tick {
    width: 14px;
    opacity: 1;
}

/* ----------------------------------------------------------- actions */

/* Barre d'action toujours atteignable : sur un ecran court, le formulaire
   defile mais le bouton reste au bas de la boite, comme sur les feuilles
   iOS. Le fond depoli evite que le contenu passe derriere en clair. */
.cf-actions {
    position: sticky;
    bottom: -26px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 22px -30px -26px;
    padding: 18px 30px 26px;
    border-top: 1px solid var(--hairline);
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
}

.cf-actions .cf-btn-primary {
    flex: 1 1 auto;
}

/* --------------------------------------------- etape 2 : repli manuel */

.cf-preview {
    width: 100%;
    min-height: 210px;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.87em;
    line-height: 1.65;
    color: #E6EEFB;
    background: #0E2547;
    border: none;
    border-radius: var(--r-md);
    padding: 16px 18px;
    resize: vertical;
}

.cf-preview:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 112, 242, 0.24);
}

.cf-note {
    color: #7C8AA3;
    font-size: 0.87em;
    line-height: 1.6;
    margin-top: 14px;
}

/* ------------------------------------------- messages d'etat */

.cf-step[hidden],
.cf-intro[hidden],
.cf-error[hidden] {
    display: none;
}

.cf-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cf-error {
    margin-top: 10px;
    padding: 12px 16px;
    color: #8A1F31;
    background: #FDEFF1;
    border-radius: var(--r-sm);
    font-size: 0.91em;
}

.cf-ok {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #16213B;
    font-size: 1em;
    line-height: 1.65;
    padding: 20px 22px;
    background: linear-gradient(140deg, #EFF7ED 0%, #E8F4F2 100%);
    border-radius: var(--r-lg);
}

.cf-ok::before {
    content: "";
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border-radius: 50%;
    background: #2E9E63 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 15px no-repeat;
}

@media (max-width: 560px) {
    .contact-dialog {
        width: 100vw;
        max-width: 100vw;
        max-height: 92dvh;
        margin: auto auto 0;
        border-radius: var(--r-xl) var(--r-xl) 0 0;
    }

    .contact-dialog form {
        padding: 22px 18px 20px;
    }

    .cf-actions {
        bottom: -20px;
        margin: 20px -18px -20px;
        padding: 16px 18px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-dialog,
    .cf-field label,
    .cf-chip,
    .cf-close {
        transition: none;
    }

    .contact-dialog {
        opacity: 1;
        transform: none;
    }
}