/**

 * Formulaire de Contact Pro - Styles

 * Version: 2.6.1

 */



/* ==========================================================================

   CSS Variables - Thème par défaut (Design Figma)

   ========================================================================== */

:root {

    --fcp-primary: #008298;

    --fcp-primary-dark: #184652;

    --fcp-primary-light: rgba(0, 130, 152, 0.15);

    --fcp-primary-medium: rgba(0, 130, 152, 0.25);

    --fcp-text: #404040;

    --fcp-white: #ffffff;

    --fcp-error: #dc3545;

    --fcp-success: #28a745;

    --fcp-border-radius: 60px;

    --fcp-font: 'Inter', system-ui, sans-serif;

}



/* Wrapper thème CPN par défaut - bordure cohérente avec Ravenel/Epsytera */

.fcp-theme-default.fcp-form-wrapper {

    border: 1px solid var(--fcp-primary-light);

}



/* ==========================================================================

   Thème Ravenel - Centre Hospitalier Ravenel

   Variables alignées sur le kit Elementor

   ========================================================================== */

.fcp-theme-ravenel {

    --fcp-primary: #747C2B;           /* Vert clair - accents, liens, boutons */

    --fcp-primary-dark: #5B5937;      /* Vert foncé - textes, titres, labels */

    --fcp-primary-light: rgba(116, 124, 43, 0.23);  /* #747C2B3B */

    --fcp-primary-medium: rgba(116, 124, 43, 0.36); /* #747C2B5C */

    --fcp-text: #404040;              /* Gris texte */

    --fcp-white: #F8F8F8;             /* Blanc */

    --fcp-background: #FCFCF6;        /* Fond crème Ravenel */

}



.fcp-theme-ravenel.fcp-form-wrapper {

    background: linear-gradient(135deg, var(--fcp-background) 0%, #ffffff 100%);

    border: 1px solid var(--fcp-primary-light);

}



.fcp-theme-ravenel .fcp-title {

    color: var(--fcp-primary);

}



.fcp-theme-ravenel .fcp-required-star {

    color: var(--fcp-primary);

}



.fcp-theme-ravenel .fcp-label {

    color: var(--fcp-primary-dark);

}



.fcp-theme-ravenel .fcp-input,

.fcp-theme-ravenel .fcp-textarea {

    border-color: var(--fcp-primary-dark);

    background: rgba(255, 255, 255, 0.9);

}



.fcp-theme-ravenel .fcp-input:hover,

.fcp-theme-ravenel .fcp-textarea:hover {

    border-color: var(--fcp-primary);

}



.fcp-theme-ravenel .fcp-input:focus,

.fcp-theme-ravenel .fcp-textarea:focus {

    border-color: var(--fcp-primary);

    box-shadow: 0 0 0 3px var(--fcp-primary-light);

}



.fcp-theme-ravenel .fcp-message-success {

    background: var(--fcp-primary-light);

    border-color: var(--fcp-primary);

    color: var(--fcp-primary-dark);

}



/* ==========================================================================

   Thème Epsytera - Bleu Marine

   ========================================================================== */

.fcp-theme-epsytera {

    --fcp-primary: #1e3a5f;           /* Bleu marine principal */

    --fcp-primary-dark: #0f2744;      /* Bleu marine foncé */

    --fcp-primary-light: rgba(30, 58, 95, 0.15);

    --fcp-primary-medium: rgba(30, 58, 95, 0.25);

    --fcp-accent: #2c5282;            /* Bleu accent */

    --fcp-text: #1a202c;              /* Texte foncé */

    --fcp-white: #ffffff;

    --fcp-background: #f7fafc;        /* Fond légèrement bleuté */

}



.fcp-theme-epsytera.fcp-form-wrapper {

    background: linear-gradient(135deg, var(--fcp-background) 0%, #ffffff 100%);

    border: 1px solid var(--fcp-primary-light);

    box-shadow: none;

}



.fcp-theme-epsytera .fcp-title {

    color: var(--fcp-primary);

}



.fcp-theme-epsytera .fcp-required-star {

    color: var(--fcp-primary);

}



.fcp-theme-epsytera .fcp-label {

    color: var(--fcp-primary-dark);

}



.fcp-theme-epsytera .fcp-input,

.fcp-theme-epsytera .fcp-textarea {

    border-color: var(--fcp-primary-medium);

    background: rgba(255, 255, 255, 0.95);

}



.fcp-theme-epsytera .fcp-input:hover,

.fcp-theme-epsytera .fcp-textarea:hover {

    border-color: var(--fcp-primary);

}



.fcp-theme-epsytera .fcp-input:focus,

.fcp-theme-epsytera .fcp-textarea:focus {

    border-color: var(--fcp-primary);

    box-shadow: 0 0 0 3px var(--fcp-primary-light);

}



.fcp-theme-epsytera .fcp-input.is-valid,

.fcp-theme-epsytera .fcp-textarea.is-valid {

    border-color: var(--fcp-primary);

}



.fcp-theme-epsytera .fcp-submit {

    background: linear-gradient(135deg, var(--fcp-primary) 0%, var(--fcp-primary-dark) 100%);

    box-shadow: 0 4px 15px rgba(30, 58, 95, 0.3);

}



.fcp-theme-epsytera .fcp-submit:hover {

    background: linear-gradient(135deg, var(--fcp-accent) 0%, var(--fcp-primary) 100%);

    box-shadow: 0 6px 20px rgba(30, 58, 95, 0.4);

    transform: translateY(-2px);

}



.fcp-theme-epsytera .fcp-message-success {

    background: var(--fcp-primary-light);

    border-color: var(--fcp-primary);

    color: var(--fcp-primary-dark);

}



.fcp-theme-epsytera .fcp-pow-label {

    background: var(--fcp-background);

    border-color: var(--fcp-primary-light);

}



.fcp-theme-epsytera .fcp-pow-label:hover {

    border-color: var(--fcp-primary);

}



.fcp-theme-epsytera .fcp-pow-checkbox {

    accent-color: var(--fcp-primary);

}



.fcp-theme-epsytera .fcp-pow-verified {

    color: var(--fcp-primary);

}



/* ==========================================================================

   RGPD Consent

   ========================================================================== */

.fcp-rgpd-wrapper {

    margin: 15px 0;

}



.fcp-rgpd-label {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    cursor: pointer;

    font-family: var(--fcp-font);

    font-size: 13px;

    line-height: 1.5;

    color: #555;

}



.fcp-rgpd-checkbox {

    width: 20px;

    height: 20px;

    margin: 0;

    margin-top: 2px;

    cursor: pointer;

    accent-color: var(--fcp-primary);

    flex-shrink: 0;

}



.fcp-rgpd-text {

    flex: 1;

}



.fcp-rgpd-text a {

    color: var(--fcp-primary);

    text-decoration: underline !important;

}



.fcp-rgpd-text a:hover {

    color: var(--fcp-primary-dark);

    text-decoration: underline !important;

    text-decoration-thickness: 2px;

}



/* ==========================================================================

   Structure principale

   ========================================================================== */

.fcp-form-wrapper {

    max-width: 1264px;

    margin: 0 auto;

    padding: 40px;

    font-family: var(--fcp-font);

    background: var(--fcp-white);

    border-radius: 16px;

}



.fcp-required-notice {

    color: #D20101;

    font-size: 16px;

    font-family: var(--fcp-font);

    font-weight: 500;

    line-height: 21.76px;

    word-wrap: break-word;

    margin: 0 0 16px 0;

}



.fcp-title {

    color: var(--fcp-primary);

    font-size: clamp(28px, 5vw, 40px);

    font-family: var(--fcp-font);

    font-weight: 700;

    margin: 0 0 36px 0;

    line-height: 1.2;

}



.fcp-required-star {

    color: var(--fcp-primary);

}



/* ==========================================================================

   Layout des champs

   ========================================================================== */

.fcp-form {

    display: flex;

    flex-direction: column;

    gap: 24px;

}



.fcp-row {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 24px;

}



.fcp-row-full,

.fcp-row-captcha,

.fcp-row-submit,

.fcp-row-rgpd {

    grid-template-columns: 1fr;

}



.fcp-field {

    display: flex;

    flex-direction: column;

    gap: 14px;

}



.fcp-field-full {

    grid-column: 1 / -1;

}



/* ==========================================================================

   Labels

   ========================================================================== */

.fcp-label {

    color: var(--fcp-primary-dark);

    font-size: 18px;

    font-weight: 600;

    line-height: 1.4;

}



.fcp-required {

    color: var(--fcp-primary-dark);

}



/* ==========================================================================

   Champs de saisie

   ========================================================================== */

.fcp-form-wrapper .fcp-input,

.fcp-form-wrapper .fcp-textarea,

.fcp-form-wrapper input[type="text"],

.fcp-form-wrapper input[type="email"],

.fcp-form-wrapper input[type="tel"],

.fcp-form-wrapper textarea {

    width: 100%;

    padding: 15px 16px;

    border: 1px solid var(--fcp-primary-dark) !important;

    border-radius: 60px !important;

    font-family: var(--fcp-font);

    font-size: 16px;

    font-weight: 500;

    color: var(--fcp-text);

    background: var(--fcp-white);

    transition: all 0.3s ease;

    box-sizing: border-box;

}



.fcp-form-wrapper .fcp-textarea,

.fcp-form-wrapper textarea {

    border-radius: 30px !important;

}



.fcp-form-wrapper .fcp-input::placeholder,

.fcp-form-wrapper .fcp-textarea::placeholder {

    color: var(--fcp-text);

    opacity: 0.7;

    font-style: italic;

}



.fcp-form-wrapper .fcp-input:focus,

.fcp-form-wrapper .fcp-textarea:focus {

    outline: none;

    border-color: var(--fcp-primary) !important;

    box-shadow: 0 0 0 3px var(--fcp-primary-light, rgba(0, 130, 152, 0.15));

}



.fcp-form-wrapper .fcp-input:hover,

.fcp-form-wrapper .fcp-textarea:hover {

    border-color: var(--fcp-primary) !important;

}



.fcp-form-wrapper .fcp-textarea {

    resize: vertical;

    min-height: 120px;

}



/* ==========================================================================

   Select (objet, établissement)

   ========================================================================== */

.fcp-form-wrapper .fcp-select,

.fcp-form-wrapper select.fcp-input {

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1.41 0.59L6 5.17 10.59 0.59 12 2 6 8 0 2z' fill='%23404040'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 16px center;

    background-size: 12px;

    padding-right: 40px;

    cursor: pointer;

}



.fcp-form-wrapper .fcp-select option[value=""] {

    color: var(--fcp-text);

    opacity: 0.7;

}



.fcp-form-wrapper .fcp-select.is-valid {

    border-color: var(--fcp-success) !important;

}



.fcp-form-wrapper .fcp-select.is-invalid {

    border-color: var(--fcp-error) !important;

}



/* Chevron adapté pour thème Ravenel */

.fcp-theme-ravenel .fcp-select {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1.41 0.59L6 5.17 10.59 0.59 12 2 6 8 0 2z' fill='%235B5937'/%3E%3C/svg%3E");

}



/* Chevron adapté pour thème Epsytera */

.fcp-theme-epsytera .fcp-select {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1.41 0.59L6 5.17 10.59 0.59 12 2 6 8 0 2z' fill='%230f2744'/%3E%3C/svg%3E");

}



/* ==========================================================================

   Honeypot (caché)

   ========================================================================== */

.fcp-honey {

    position: absolute;

    left: -9999px;

    top: -9999px;

    opacity: 0;

    height: 0;

    width: 0;

    overflow: hidden;

}



/* ==========================================================================

   Altcha Widget

   ========================================================================== */

.fcp-altcha-wrapper {

    display: flex;

    justify-content: flex-start;

}



altcha-widget {

    --altcha-max-width: 100%;

}



/* ==========================================================================

   Bouton d'envoi - Style CPN

   Override Elementor Kit avec spécificité renforcée

   ========================================================================== */

.fcp-row-submit {

    display: flex;

    justify-content: flex-start;

}



.fcp-form-wrapper .fcp-submit,

.fcp-form-wrapper button.fcp-submit,

.elementor-widget-container .fcp-form-wrapper .fcp-submit {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 14px 16px 14px 24px !important;

    background: var(--fcp-primary) !important;

    background-color: var(--fcp-primary) !important;

    color: var(--fcp-white) !important;

    border: 1px solid var(--fcp-primary) !important;

    border-radius: 30px !important;

    font-family: var(--fcp-font) !important;

    font-size: 15px !important;

    font-weight: 600 !important;

    cursor: pointer;

    transition: all 0.3s ease;

    width: auto;

    line-height: 1.4 !important;

}



.fcp-form-wrapper .fcp-submit:hover,

.fcp-form-wrapper button.fcp-submit:hover,

.elementor-widget-container .fcp-form-wrapper .fcp-submit:hover {

    background: transparent !important;

    background-color: transparent !important;

    color: var(--fcp-primary) !important;

    border-color: var(--fcp-primary) !important;

}



.fcp-form-wrapper .fcp-submit:hover .fcp-submit-arrow path {

    fill: var(--fcp-primary);

}



.fcp-form-wrapper .fcp-submit:active {

    transform: scale(0.98);

}



.fcp-form-wrapper .fcp-submit:disabled {

    opacity: 0.7;

    cursor: not-allowed;

    transform: none;

}



/* Flèche du bouton */

.fcp-submit-arrow {

    width: 24px;

    height: 12px;

    flex-shrink: 0;

    transition: transform 0.3s ease;

}



.fcp-submit-arrow path {

    fill: var(--fcp-white);

    transition: fill 0.3s ease;

}



.fcp-submit:hover .fcp-submit-arrow {

    transform: translateX(4px);

}



.fcp-submit-loading {

    display: none;

}



.fcp-submit.is-loading .fcp-submit-text,

.fcp-submit.is-loading .fcp-submit-arrow {

    display: none;

}



.fcp-submit.is-loading .fcp-submit-loading {

    display: flex;

}



.fcp-spinner {

    width: 24px;

    height: 24px;

}



/* ==========================================================================

   Bouton CPN Default - Override Elementor Kit

   ========================================================================== */

.fcp-theme-default.fcp-form-wrapper .fcp-submit {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 14px 16px 14px 24px !important;

    background: var(--fcp-primary) !important;

    background-color: var(--fcp-primary) !important;

    color: var(--fcp-white) !important;

    border: 1px solid var(--fcp-primary) !important;

    border-radius: 30px !important;

    font-family: var(--fcp-font) !important;

    font-size: 15px !important;

    font-weight: 600 !important;

    line-height: 1.4 !important;

    width: auto;

}



.fcp-theme-default.fcp-form-wrapper .fcp-submit:hover {

    background: transparent !important;

    background-color: transparent !important;

    color: var(--fcp-primary) !important;

    border-color: var(--fcp-primary) !important;

}



.fcp-theme-default.fcp-form-wrapper .fcp-submit:hover .fcp-submit-arrow path {

    fill: var(--fcp-primary);

}



/* ==========================================================================

   Bouton Ravenel - Override

   ========================================================================== */

.fcp-theme-ravenel .fcp-form-wrapper .fcp-submit,

.fcp-theme-ravenel.fcp-form-wrapper .fcp-submit {

    background: var(--fcp-primary) !important;

    background-color: var(--fcp-primary) !important;

    border-color: var(--fcp-primary) !important;

    color: #F8F8F8 !important;

}



.fcp-theme-ravenel .fcp-submit-arrow path,

.fcp-theme-ravenel.fcp-form-wrapper .fcp-submit-arrow path {

    fill: #F8F8F8;

}



.fcp-theme-ravenel .fcp-form-wrapper .fcp-submit:hover,

.fcp-theme-ravenel.fcp-form-wrapper .fcp-submit:hover {

    background: transparent !important;

    background-color: transparent !important;

    color: var(--fcp-primary) !important;

    border-color: var(--fcp-primary) !important;

}



.fcp-theme-ravenel .fcp-submit:hover .fcp-submit-arrow path,

.fcp-theme-ravenel.fcp-form-wrapper .fcp-submit:hover .fcp-submit-arrow path {

    fill: var(--fcp-primary);

}



/* ==========================================================================

   Messages de feedback

   ========================================================================== */

.fcp-messages {

    margin-bottom: 10px;

}



.fcp-message {

    padding: 16px 20px;

    border-radius: 12px;

    font-size: 15px;

    font-weight: 500;

    animation: fcp-slideIn 0.3s ease;

}



@keyframes fcp-slideIn {

    from {

        opacity: 0;

        transform: translateY(-10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.fcp-message-success {

    background: rgba(40, 167, 69, 0.1);

    border: 1px solid var(--fcp-success);

    color: #1e7e34;

}



.fcp-message-error {

    background: rgba(220, 53, 69, 0.1);

    border: 1px solid var(--fcp-error);

    color: #c82333;

}



/* ==========================================================================

   États de validation

   ========================================================================== */

.fcp-input.is-valid,

.fcp-textarea.is-valid {

    border-color: var(--fcp-success);

}



.fcp-input.is-invalid,

.fcp-textarea.is-invalid {

    border-color: var(--fcp-error);

}



/* ==========================================================================

   Responsive Design

   ========================================================================== */

@media (max-width: 768px) {

    .fcp-form-wrapper {

        padding: 24px 20px;

    }

    

    .fcp-row {

        grid-template-columns: 1fr;

    }

    

    .fcp-title {

        font-size: 28px;

        margin-bottom: 24px;

    }

    

    .fcp-label {

        font-size: 16px;

    }

    

    .fcp-input,

    .fcp-textarea {

        font-size: 16px;

        padding: 14px 16px;

    }

    

    .fcp-form-wrapper .fcp-submit {

        width: 100%;

    }

}



@media (max-width: 480px) {

    .fcp-form-wrapper {

        padding: 20px 16px;

        border-radius: 12px;

    }

    

    .fcp-title {

        font-size: 24px;

    }

    

    .fcp-input,

    .fcp-textarea {

        border-radius: 20px;

    }

    

    .fcp-form-wrapper .fcp-submit {

        border-radius: 30px !important;

        padding: 12px 16px 12px 20px !important;

        font-size: 14px !important;

    }

    

    .fcp-submit-arrow {

        width: 20px;

        height: 10px;

    }

}



/* ==========================================================================

   Animations d'interaction

   ========================================================================== */

.fcp-field {

    position: relative;

}



.fcp-input:focus + .fcp-label,

.fcp-textarea:focus + .fcp-label {

    color: var(--fcp-primary);

}



/* Focus visible pour l'accessibilité */

.fcp-input:focus-visible,

.fcp-textarea:focus-visible,

.fcp-submit:focus-visible {

    outline: 2px dashed var(--fcp-primary);

    outline-offset: 2px;

}



/* ==========================================================================

   Print styles

   ========================================================================== */

@media print {

    .fcp-form-wrapper {

        box-shadow: none;

        border: 1px solid #ccc;

    }

    

    .fcp-submit,

    .fcp-pow-wrapper {

        display: none;

    }

}



/* ==========================================================================

   Proof-of-Work Checkbox (reCAPTCHA-like)

   ========================================================================== */

.fcp-pow-wrapper {

    margin: 10px 0;

}



.fcp-pow-label {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 12px 16px;

    background: #f9f9f9;

    border: 1px solid #d3d3d3;

    border-radius: 4px;

    cursor: pointer;

    user-select: none;

    transition: all 0.2s ease;

    font-family: var(--fcp-font);

    font-size: 14px;

    color: #555;

}



.fcp-pow-label:hover {

    border-color: #b0b0b0;

    background: #f5f5f5;

}



.fcp-pow-checkbox {

    width: 24px;

    height: 24px;

    margin: 0;

    cursor: pointer;

    accent-color: var(--fcp-primary);

}



.fcp-pow-checkmark {

    display: none;

}



.fcp-pow-text {

    color: #555;

}



.fcp-pow-loading {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #666;

}



.fcp-pow-spinner {

    animation: fcp-spin 1s linear infinite;

}



@keyframes fcp-spin {

    from { transform: rotate(0deg); }

    to { transform: rotate(360deg); }

}



.fcp-pow-verified {

    color: var(--fcp-success);

    font-weight: 600;

}



/* Thème Ravenel pour POW */

.fcp-theme-ravenel .fcp-pow-label {

    background: var(--fcp-background);

    border-color: var(--fcp-primary-light);

}



.fcp-theme-ravenel .fcp-pow-label:hover {

    border-color: var(--fcp-primary);

}



.fcp-theme-ravenel .fcp-pow-checkbox {

    accent-color: var(--fcp-primary);

}



.fcp-theme-ravenel .fcp-pow-verified {

    color: var(--fcp-primary);

}