/* =======================================================================
   SOCIALISE — Couche de design moderne (UX)
   Repose sur Tailwind (déjà chargé) + palette officielle du logo.
   Ce fichier surcharge cr-frontend-style.css sans toucher au markup PHP.
   -----------------------------------------------------------------------
   Palette logo :
     Fond crème  #F5FFFC   Blanc      #FFFFFF
     Encre/navy  #041727   Teal foncé #012836
     Teal (marque) #013340 Menthe     #7AE7C7
     Corail (CTA)  #EE8578
======================================================================= */

/* Icônes SVG inline (style Lucide) */
.cr-ico{
    display:inline-block;
    width:18px;height:18px;
    vertical-align:-.18em;
    flex:none;
    stroke-width:2;
}
.cr-ico-lg{width:22px;height:22px;}
.cr-ico-sm{width:16px;height:16px;}

:root {
    --cr-cream:        #F5FFFC;
    --cr-white:        #FFFFFF;
    --cr-ink:          #041727;   /* texte principal / titres */
    --cr-teal-900:     #012836;   /* teal le plus foncé */
    --cr-teal:         #013340;   /* couleur de marque */
    --cr-teal-600:     #034c5e;   /* hover / variantes */
    --cr-mint:         #7AE7C7;   /* accent secondaire */
    --cr-mint-soft:    #e3faf2;   /* fond menthe très clair */
    --cr-coral:        #EE8578;   /* CTA principal */
    --cr-coral-600:    #e26b5c;   /* hover CTA */

    --cr-muted:        #5b6b73;   /* texte secondaire */
    --cr-border:       #dbe7e6;   /* bordures douces */
    --cr-border-strong:#c3d6d4;

    --cr-radius-sm: 10px;
    --cr-radius:    14px;
    --cr-radius-lg: 20px;
    --cr-radius-pill: 999px;

    --cr-shadow-sm: 0 1px 2px rgba(4,23,39,.06);
    --cr-shadow:    0 6px 20px rgba(1,51,64,.08);
    --cr-shadow-lg: 0 14px 40px rgba(1,51,64,.12);

    --cr-ring: 0 0 0 4px rgba(122,231,199,.45); /* halo menthe focus */
    --cr-transition: .2s cubic-bezier(.4,0,.2,1);
}

/* =======================================================================
   1. Conteneurs / Cartes
======================================================================= */
.cr-frontend-form,
.cr-frontend-list1,
.cr-frontend-list {
    background-color: var(--cr-white);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-lg);
    padding: 28px;
    margin-bottom: 28px;
    box-shadow: var(--cr-shadow);
    font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--cr-ink);
    line-height: 1.55;
}

.cr-publications-group {
    background-color: var(--cr-cream);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius);
    padding: 20px;
    margin-bottom: 22px;
}

.cr-publication {
    padding: 14px 4px;
    border-bottom: 1px solid var(--cr-border);
    transition: background-color var(--cr-transition);
    border-radius: var(--cr-radius-sm);
}
.cr-publication:hover { background-color: var(--cr-mint-soft); }
.cr-publication:last-child { border-bottom: none; }

/* =======================================================================
   2. Titres & typographie
======================================================================= */
.cr-frontend-form h2,
.cr-frontend-list h2,
.cr-frontend-list1 h2 {
    color: var(--cr-ink);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 22px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--cr-mint-soft);
    display: flex;
    align-items: center;
    gap: 10px;
}

.cr-frontend-form h3,
.cr-frontend-list h3 {
    color: var(--cr-teal);
    font-size: 16px;
    font-weight: 600;
    margin: 22px 0 12px;
}

.cr-frontend-list a { color: var(--cr-teal); text-decoration: none; font-weight: 500; }
.cr-frontend-list a:hover { color: var(--cr-coral); text-decoration: none; }

/* =======================================================================
   3. Champs de formulaire
======================================================================= */
.cr-frontend-form label {
    font-weight: 600;
    color: var(--cr-ink);
    margin-bottom: 6px;
    display: block;
    font-size: 14px;
}

.cr-frontend-form input[type="text"],
.cr-frontend-form input[type="email"],
.cr-frontend-form input[type="url"],
.cr-frontend-form input[type="number"],
.cr-frontend-form input[type="date"],
.cr-frontend-form input[type="time"],
.cr-frontend-form input[type="search"],
.cr-frontend-form textarea,
.cr-frontend-form select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--cr-border-strong);
    border-radius: var(--cr-radius-sm);
    margin-bottom: 16px;
    font-size: 15px;
    color: var(--cr-ink);
    background-color: var(--cr-white);
    transition: border-color var(--cr-transition), box-shadow var(--cr-transition);
    box-sizing: border-box;
}

.cr-frontend-form textarea { min-height: 130px; resize: vertical; line-height: 1.6; }

.cr-frontend-form input:focus,
.cr-frontend-form textarea:focus,
.cr-frontend-form select:focus {
    border-color: var(--cr-mint);
    outline: none;
    box-shadow: var(--cr-ring);
}

.cr-frontend-form input::placeholder,
.cr-frontend-form textarea::placeholder { color: #9aa9a8; }

/* Select avec chevron moderne */
.cr-frontend-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23013340" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

/* =======================================================================
   4. Boutons
======================================================================= */
.cr-frontend-form .button,
.cr-frontend-list .button,
.cr-frontend-list1 .button {
    background-color: var(--cr-teal);
    color: var(--cr-white);
    border: 1px solid var(--cr-teal);
    padding: 11px 22px;
    border-radius: var(--cr-radius-pill);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--cr-shadow-sm);
    transition: background-color var(--cr-transition), transform var(--cr-transition), box-shadow var(--cr-transition);
}
.cr-frontend-form .button:hover,
.cr-frontend-list .button:hover,
.cr-frontend-list1 .button:hover {
    background-color: var(--cr-teal-600);
    border-color: var(--cr-teal-600);
    transform: translateY(-2px);
    box-shadow: var(--cr-shadow);
}
.cr-frontend-form .button:active,
.cr-frontend-list .button:active { transform: translateY(0); }

/* CTA principal (publier / enregistrer) → corail */
.cr-frontend-form .button[type="submit"],
.cr-frontend-form button[name="cr_action_publish"],
.cr-frontend-form .button-primary,
.cr-frontend-form .cr-cta {
    background-color: var(--cr-coral);
    border-color: var(--cr-coral);
}
.cr-frontend-form .button[type="submit"]:hover,
.cr-frontend-form button[name="cr_action_publish"]:hover,
.cr-frontend-form .button-primary:hover,
.cr-frontend-form .cr-cta:hover {
    background-color: var(--cr-coral-600);
    border-color: var(--cr-coral-600);
}

/* Bouton média (secondaire) → contour menthe */
.cr-frontend-form a.button.cr-media-upload {
    background-color: var(--cr-mint-soft);
    color: var(--cr-teal);
    border: 1px solid var(--cr-mint);
    border-radius: var(--cr-radius-sm);
    padding: 9px 16px;
    box-shadow: none;
}
.cr-frontend-form a.button.cr-media-upload:hover {
    background-color: var(--cr-mint);
    color: var(--cr-ink);
    transform: translateY(-2px);
}

/* =======================================================================
   5. Messages (notices)
======================================================================= */
.cr-frontend-form .notice,
.notice.success,
.notice.probleme,
.notice.succes_contenu {
    padding: 14px 16px 14px 46px;
    border-radius: var(--cr-radius-sm);
    margin-bottom: 16px;
    font-size: 14px;
    position: relative;
    border: 1px solid transparent;
    background-repeat: no-repeat;
    background-position: 16px center;
    background-size: 18px;
}

.cr-frontend-form .notice.success,
.notice.success {
    background-color: var(--cr-mint-soft);
    border-color: var(--cr-mint);
    color: #0a6b54;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%230a6b54" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>');
}

.cr-frontend-form .notice.error,
.notice.probleme {
    background-color: #fdecea;
    border-color: var(--cr-coral);
    color: #b23a2b;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23b23a2b" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>');
}

.notice.succes_contenu {
    background-color: #eaf4fb;
    border-color: #6fb6e0;
    color: #1f5d86;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%231f5d86" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>');
}

/* =======================================================================
   6. Réseaux sociaux — sélecteurs & toggles
======================================================================= */
.cr-social-networks {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 22px 0;
}

.cr-social-network-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--cr-white);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius);
    transition: all var(--cr-transition);
    box-shadow: var(--cr-shadow-sm);
}
.cr-social-network-item:hover {
    border-color: var(--cr-mint);
    transform: translateY(-2px);
    box-shadow: var(--cr-shadow);
}
.cr-social-network-item.active {
    background: var(--cr-mint-soft);
    border-color: var(--cr-mint);
}

.cr-social-network-name { font-weight: 600; color: var(--cr-ink); }

/* Toggle switch harmonisé */
.cr-toggle-switch { width: 46px; height: 26px; }
.cr-toggle-slider { background-color: #c8d6d4; border-radius: var(--cr-radius-pill); }
.cr-toggle-slider:before {
    height: 20px; width: 20px; left: 3px; bottom: 3px;
    box-shadow: 0 1px 3px rgba(4,23,39,.25);
}
input:checked + .cr-toggle-slider { background-color: var(--cr-teal); }
input:checked + .cr-toggle-slider:before { transform: translateX(20px); }
input:focus + .cr-toggle-slider { box-shadow: var(--cr-ring); }

/* Couleurs de marque conservées à l'état actif */
input:checked + .cr-toggle-slider.facebook  { background-color: #1877f2; }
input:checked + .cr-toggle-slider.instagram { background-color: #E4405F; }
input:checked + .cr-toggle-slider.linkedin  { background-color: #0077b5; }

/* Pictos réseaux : taille harmonisée */
.cr-social-icon {
    width: 22px;
    height: 22px;
    margin-right: 6px;
}

/* =======================================================================
   7. Boutons d'édition (liste)
======================================================================= */
.cr-edit-buttons { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* =======================================================================
   8. Responsive
======================================================================= */
@media (min-width: 768px) {
    .cr-frontend-form p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .cr-frontend-form p label { width: 28%; margin-right: 10px; margin-bottom: 0; }
    .cr-frontend-form p input[type="text"],
    .cr-frontend-form p textarea,
    .cr-frontend-form p select { flex: 1; width: auto; margin-bottom: 0; }
    .cr-frontend-list ul { max-height: 1800px; overflow-y: auto; }
}

@media only screen and (max-width: 768px) {
    .cr-frontend-form,
    .cr-frontend-list,
    .cr-frontend-list1 { padding: 18px; border-radius: var(--cr-radius); }
    .cr-frontend-form p label { width: 100%; }
    .cr-frontend-form p input[type="text"],
    .cr-frontend-form p textarea,
    .cr-frontend-form p select { width: 100%; }
    .cr-social-networks { flex-direction: column; }
    .cr-social-network-item { width: 100%; justify-content: space-between; }
    .cr-edit-buttons { width: 100%; justify-content: center; }
    .cr-frontend-list ul { max-height: 320px; overflow-y: auto; }
}

/* Scrollbar discrète pour les listes */
.cr-frontend-list ul::-webkit-scrollbar { width: 8px; }
.cr-frontend-list ul::-webkit-scrollbar-thumb { background: var(--cr-border-strong); border-radius: 8px; }
.cr-frontend-list ul::-webkit-scrollbar-track { background: transparent; }