/**
 * RoulementCasting — Page Contact & Assistance
 * Convention : préfixe rc4-*
 * Fichier    : /wp-content/themes/TON-THEME/assets/css/rc4-contact.css
 *
 * ⚠ Adaptez les variables CSS à votre charte graphique (couleurs, typo, radius).
 */

/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
    --rc4-primary:        #0071e3;   /* Bleu principal — adaptez à votre charte */
    --rc4-primary-hover:  #005bb5;
    --rc4-whatsapp:       #25D366;
    --rc4-whatsapp-hover: #1da851;
    --rc4-surface:        #ffffff;
    --rc4-bg-light:       #f5f7fa;
    --rc4-border:         #dde2ea;
    --rc4-text:           #1a1a2e;
    --rc4-text-muted:     #6b7280;
    --rc4-error:          #dc2626;
    --rc4-error-bg:       #fef2f2;
    --rc4-success:        #16a34a;
    --rc4-success-bg:     #f0fdf4;
    --rc4-radius:         10px;
    --rc4-radius-lg:      16px;
    --rc4-shadow:         0 4px 24px rgba(0,0,0,.08);
    --rc4-shadow-hover:   0 8px 32px rgba(0,0,0,.14);
    --rc4-transition:     .2s ease;
    --rc4-max-width:      680px;
}

/* ── Reset minimal ─────────────────────────────────────────────────────────── */
.rc4-contact-page *,
.rc4-contact-page *::before,
.rc4-contact-page *::after {
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════
   HERO — WhatsApp (rc-contact-hero-wa) — CSS original
═══════════════════════════════════════════════════════════════════ */
.rc-contact-hero-wa{
  --rc-primary:#004E66;
  --rc-primary-dark:#002833;
  --rc-accent:#FF5C1B;
  --rc-surface:#ffffff;
  --rc-ink:#10242C;
  --rc-line:rgba(255,255,255,.12);
  --rc-wa:#25D366;
  --rc-wa-hover:#1ebe5b;

  position:relative;
  overflow:hidden;
  padding:clamp(28px, 4vw, 42px);
  background:
    linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
    linear-gradient(135deg, var(--rc-primary) 0%, var(--rc-primary-dark) 100%);
  box-shadow:
    0 20px 60px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.06);
  isolation:isolate;
}

.rc-contact-hero-wa__bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 82% 24%, rgba(37,211,102,.18), transparent 24%),
    radial-gradient(circle at 15% 18%, rgba(255,255,255,.09), transparent 18%),
    linear-gradient(120deg, rgba(255,255,255,.08), transparent 28%);
  pointer-events:none;
  z-index:0;
}

.rc-contact-hero-wa__inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 1.25fr) minmax(320px, .85fr);
  gap:clamp(26px, 4vw, 44px);
  align-items:center;
}

.rc-contact-hero-wa__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
}

.rc-contact-hero-wa__eyebrow::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--rc-wa);
  box-shadow:0 0 16px rgba(37,211,102,.75);
}

.rc-contact-hero-wa__title{
  margin:0;
  max-width:11ch;
  font-family:Poppins, sans-serif;
  font-size:clamp(34px, 5vw, 62px);
  line-height:.98;
  font-weight:700;
  letter-spacing:-.03em;
  color:#fff;
}

.rc-contact-hero-wa__title span{
  display:block;
  color:rgba(255,255,255,.88);
}

.rc-contact-hero-wa__text{
  margin:20px 0 0;
  max-width:680px;
  font-size:clamp(15px, 1.6vw, 18px);
  line-height:1.7;
  color:rgba(255,255,255,.78);
}

.rc-contact-hero-wa__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:28px;
}

.rc-contact-hero-wa__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:56px;
  padding:0 22px;
  border-radius:999px;
  text-decoration:none;
  font-family:Poppins, sans-serif;
  font-size:16px;
  font-weight:600;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease;
}

.rc-contact-hero-wa__btn--whatsapp{
  background:var(--rc-wa);
  color:#fff;
  box-shadow:
    0 14px 34px rgba(37,211,102,.28),
    inset 0 1px 0 rgba(255,255,255,.14);
}

.rc-contact-hero-wa__btn--whatsapp:hover{
  background:var(--rc-wa-hover);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:
    0 18px 38px rgba(37,211,102,.34),
    inset 0 1px 0 rgba(255,255,255,.14);
}

.rc-contact-hero-wa__btn--ghost{
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(8px);
}

.rc-contact-hero-wa__btn--ghost:hover{
  color:#fff;
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.24);
  transform:translateY(-2px);
}

.rc-contact-hero-wa__btn svg{
  width:18px;
  height:18px;
  fill:currentColor;
}

.rc-contact-hero-wa__btn,
.rc-contact-hero-wa__btn:visited,
.rc-contact-hero-wa__btn:hover,
.rc-contact-hero-wa__btn:focus,
.rc-contact-hero-wa__btn:active{
  color:#ffffff;
}

.rc-contact-hero-wa__btn span,
.rc-contact-hero-wa__btn *{
  color:inherit;
}

a.rc-contact-hero-wa__btn,
a.rc-contact-hero-wa__btn:visited,
a.rc-contact-hero-wa__btn:hover,
a.rc-contact-hero-wa__btn:focus,
a.rc-contact-hero-wa__btn:active{
  color:#fff !important;
}

a.rc-contact-hero-wa__btn span,
a.rc-contact-hero-wa__btn svg,
a.rc-contact-hero-wa__btn svg path,
a.rc-contact-hero-wa__btn *{
  color:#fff !important;
  fill:currentColor;
}

.rc-contact-hero-wa__list{
  display:grid;
  gap:10px;
  margin:26px 0 0;
  padding:0;
  list-style:none;
}

.rc-contact-hero-wa__list li{
  position:relative;
  padding-left:22px;
  font-size:14px;
  line-height:1.5;
  color:rgba(255,255,255,.76);
}

.rc-contact-hero-wa__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--rc-wa);
  box-shadow:0 0 10px rgba(37,211,102,.6);
}

.rc-contact-hero-wa__panel{
  display:flex;
  justify-content:flex-end;
}

.rc-contact-hero-wa__card{
  width:min(100%, 430px);
  padding:26px;
  border-radius:28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 16px 40px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(10px);
}

.rc-contact-hero-wa__card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}

.rc-contact-hero-wa__badge{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
}

.rc-contact-hero-wa__status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.78);
  font-size:13px;
  font-weight:600;
}

.rc-contact-hero-wa__status span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--rc-wa);
  box-shadow:0 0 14px rgba(37,211,102,.75);
}

.rc-contact-hero-wa__card h3{
  margin:0;
  font-family:Poppins, sans-serif;
  font-size:28px;
  line-height:1.08;
  font-weight:600;
  color:#fff;
}

.rc-contact-hero-wa__card p{
  margin:14px 0 0;
  font-size:15px;
  line-height:1.65;
  color:rgba(255,255,255,.75);
}

.rc-contact-hero-wa__mini-box{
  display:grid;
  gap:8px;
  margin-top:20px;
  padding:16px 18px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}

.rc-contact-hero-wa__mini-box strong{
  font-size:13px;
  font-weight:700;
  color:#fff;
}

.rc-contact-hero-wa__mini-box span{
  font-size:13px;
  line-height:1.5;
  color:rgba(255,255,255,.72);
}

@media (max-width: 1024px){
  .rc-contact-hero-wa{
    border-radius:26px;
  }
  .rc-contact-hero-wa__inner{
    grid-template-columns:1fr;
  }
  .rc-contact-hero-wa__title{
    max-width:13ch;
  }
  .rc-contact-hero-wa__panel{
    justify-content:flex-start;
  }
}

@media (max-width: 767px){
  .rc-contact-hero-wa{
    padding:22px 18px;
    border-radius:22px;
  }
  .rc-contact-hero-wa__title{
    max-width:none;
    font-size:34px;
    line-height:1.02;
  }
  .rc-contact-hero-wa__text{
    margin-top:16px;
    font-size:15px;
    line-height:1.65;
  }
  .rc-contact-hero-wa__actions{
    flex-direction:column;
    align-items:stretch;
  }
  .rc-contact-hero-wa__btn{
    width:100%;
  }
  .rc-contact-hero-wa__card{
    width:100%;
    padding:22px;
    border-radius:22px;
  }
  .rc-contact-hero-wa__card h3{
    font-size:22px;
  }
}

/* ── Boutons ──────────────────────────────────────────────────────── */
.rc4-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: var(--rc4-radius);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background var(--rc4-transition), box-shadow var(--rc4-transition), transform var(--rc4-transition);
}

.rc4-btn:focus-visible {
    outline: 3px solid var(--rc4-primary);
    outline-offset: 3px;
}

/* WhatsApp */
.rc4-btn--whatsapp {
    background: var(--rc4-whatsapp);
    color: #fff;
    font-size: 1.05rem;
    padding: 16px 36px;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(37,211,102,.35);
}

.rc4-btn--whatsapp:hover {
    background: var(--rc4-whatsapp-hover);
    box-shadow: 0 6px 28px rgba(37,211,102,.45);
    transform: translateY(-1px);
    color: #fff;
}

.rc4-btn--whatsapp svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Primary (submit) */
.rc4-btn--primary {
    background: var(--rc4-primary);
    color: #fff;
    width: 100%;
    padding: 16px 32px;
    font-size: 1rem;
    border-radius: var(--rc4-radius);
    box-shadow: 0 4px 16px rgba(0,113,227,.25);
    position: relative;
}

.rc4-btn--primary:hover:not(:disabled) {
    background: var(--rc4-primary-hover);
    box-shadow: 0 6px 24px rgba(0,113,227,.35);
    transform: translateY(-1px);
}

.rc4-btn--primary:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Spinner */
.rc4-btn__spinner svg {
    width: 20px;
    height: 20px;
    animation: rc4-spin .75s linear infinite;
}

@keyframes rc4-spin {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════
   SÉPARATEUR
═══════════════════════════════════════════════════════════════════ */
.rc4-contact-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: var(--rc4-max-width);
    margin: 0 auto;
    padding: 32px 24px 0;
    color: var(--rc4-text-muted);
    font-size: .875rem;
}

.rc4-contact-divider::before,
.rc4-contact-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rc4-border);
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION FORMULAIRE
═══════════════════════════════════════════════════════════════════ */
.rc4-contact-form-section {
    background: var(--rc4-bg-light);
    padding: 40px 24px 72px;
}

.rc4-contact-form-section__inner {
    max-width: var(--rc4-max-width);
    margin: 0 auto;
}

.rc4-contact-form-header {
    text-align: center;
    margin-bottom: 32px;
}

.rc4-contact-form-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rc4-text);
    margin: 0 0 8px;
}

.rc4-contact-form-header p {
    font-size: .9rem;
    color: var(--rc4-text-muted);
    margin: 0;
}

/* ── Feedback alerts ──────────────────────────────────────────────── */
/* Garantit que hidden l'emporte sur display:flex */
.rc4-form-feedback[hidden] {
    display: none !important;
}

.rc4-form-feedback {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-radius: var(--rc4-radius);
    margin-bottom: 24px;
    font-size: .9rem;
    line-height: 1.5;
}

.rc4-form-feedback svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 1px;
}

.rc4-form-feedback strong {
    display: block;
    font-size: .95rem;
    margin-bottom: 2px;
}

.rc4-form-feedback--success {
    background: var(--rc4-success-bg);
    border: 1px solid #bbf7d0;
    color: #166534;
}

.rc4-form-feedback--success svg { color: var(--rc4-success); }

.rc4-form-feedback--error {
    background: var(--rc4-error-bg);
    border: 1px solid #fecaca;
    color: #991b1b;
}

.rc4-form-feedback--error svg { color: var(--rc4-error); }

/* ── Formulaire ────────────────────────────────────────────────────── */
.rc4-contact-form {
    background: var(--rc4-surface);
    border-radius: var(--rc4-radius-lg);
    padding: 36px 40px;
    box-shadow: var(--rc4-shadow);
}

@media (max-width: 600px) {
    .rc4-contact-form {
        padding: 24px 20px;
    }
}

/* Lignes et groupes */
.rc4-form-row {
    margin-bottom: 20px;
}

.rc4-form-row--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 480px) {
    .rc4-form-row--split {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.rc4-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Labels */
.rc4-form-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--rc4-text);
}

.rc4-required {
    color: var(--rc4-error);
    margin-left: 2px;
}

/* Inputs */
.rc4-form-input,
.rc4-form-select,
.rc4-form-textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--rc4-border);
    border-radius: var(--rc4-radius);
    font-size: .95rem;
    color: var(--rc4-text);
    background: var(--rc4-surface);
    transition: border-color var(--rc4-transition), box-shadow var(--rc4-transition);
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.rc4-form-input::placeholder,
.rc4-form-textarea::placeholder {
    color: #9ca3af;
}

.rc4-form-input:focus,
.rc4-form-select:focus,
.rc4-form-textarea:focus {
    outline: none;
    border-color: var(--rc4-primary);
    box-shadow: 0 0 0 3px rgba(0,113,227,.12);
}

.rc4-form-input.rc4-input--error,
.rc4-form-select.rc4-input--error,
.rc4-form-textarea.rc4-input--error {
    border-color: var(--rc4-error);
    box-shadow: 0 0 0 3px rgba(220,38,38,.10);
}

/* Select */
.rc4-select-wrapper {
    position: relative;
}

.rc4-select-wrapper .rc4-form-select {
    padding-right: 40px;
    cursor: pointer;
}

.rc4-select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--rc4-text-muted);
    pointer-events: none;
}

/* Textarea */
.rc4-form-textarea {
    resize: vertical;
    min-height: 120px;
}

/* Compteur */
.rc4-char-count {
    font-size: .78rem;
    color: var(--rc4-text-muted);
    text-align: right;
}

.rc4-char-count--warn {
    color: #d97706;
    font-weight: 600;
}

/* Erreurs champ */
.rc4-field-error {
    font-size: .8rem;
    color: var(--rc4-error);
    min-height: 1.2em;
}

/* Turnstile */
.rc4-form-group--turnstile {
    align-items: flex-start;
}

.rc4-field-error--turnstile {
    margin-top: 4px;
}

/* Row submit */
.rc4-form-row--submit {
    margin-top: 8px;
}

.rc4-form-privacy {
    font-size: .78rem;
    color: var(--rc4-text-muted);
    text-align: center;
    margin: 12px 0 0;
    line-height: 1.5;
}

.rc4-form-privacy a {
    color: var(--rc4-primary);
    text-decoration: none;
}

.rc4-form-privacy a:hover {
    text-decoration: underline;
}