/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Thinkify — Page Contact (on-discute)
   Chargé uniquement sur templates/page-contact.php
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Variables ───────────────────────────────────── */
:root {
    --co-dark:       #0D1420;
    --co-dark-2:     #131C2D;
    --co-teal:       #00B4A6;
    --co-teal-dim:   rgba(0, 180, 166, 0.12);
    --co-teal-glow:  rgba(0, 180, 166, 0.28);
    --co-off-white:  #F7F8FA;
    --co-muted:      #64748B;
    --co-border:     rgba(255, 255, 255, 0.08);
    --co-serif:      'Playfair Display', Georgia, serif;
    --co-sans:       'DM Sans', system-ui, sans-serif;
    --co-ease:       cubic-bezier(0.16, 1, 0.3, 1);
    --co-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Reset Blocksy sur ce template ──────────────── */
.thinkify-contact-page .entry-header,
.thinkify-contact-page .post-navigation,
.thinkify-contact-page .comments-area {
    display: none;
}
.thinkify-contact-page body,
.thinkify-contact-page .site-main {
    font-family:             var(--co-sans);
    color:                   var(--co-dark);
    overflow-x:              hidden;
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Supprimer les marges Blocksy autour du contenu */
.thinkify-contact-page .entry-content {
    margin:  0;
    padding: 0;
}

/* ── Container ───────────────────────────────────── */
.co-container {
    max-width: 1200px;
    margin:    0 auto;
    padding:   0 3rem;
}

/* ── Sections ────────────────────────────────────── */
.tk-section[data-theme="dark"] {
    background: var(--co-dark);
    color:      #fff;
}
.tk-section[data-theme="light"] {
    background: var(--co-off-white);
    color:      var(--co-dark);
}

/* ── Scroll reveals ──────────────────────────────── */
.co-reveal {
    opacity:   0;
    transform: translateY(22px);
    transition: opacity 0.65s var(--co-ease),
                transform 0.65s var(--co-ease);
}
.co-reveal.in {
    opacity:   1;
    transform: translateY(0);
}
.co-reveal--delay-1 { transition-delay: 0.12s; }
.co-reveal--delay-2 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
    .co-reveal { opacity: 1; transform: none; transition: none; }
}

/* ─────────────────────────────────────────────────
   S1 · HERO
───────────────────────────────────────────────── */
.co-hero {
    position:       relative;
    padding-top:    9rem;
    padding-bottom: 7rem;
    overflow:       hidden;
}

/* Grain de bruit subtil */
.co-hero-noise {
    position:   absolute;
    inset:      0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    background-size: 256px;
    pointer-events: none;
    opacity: 0.6;
}

.co-hero .co-container {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    align-items:           center;
    gap:                   4rem;
    position:              relative;
    z-index:               1;
}

.co-hero__tag {
    display:        inline-flex;
    align-items:    center;
    gap:            0.5rem;
    font-family:    var(--co-sans);
    font-size:      0.68rem;
    font-weight:    600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          var(--co-teal);
    margin-bottom:  1.5rem;
}

.co-hero__title {
    font-family:   var(--co-serif);
    font-size:     clamp(3rem, 5.5vw, 5.5rem);
    font-weight:   700;
    line-height:   1.08;
    color:         #fff;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}
.co-hero__title em {
    font-style: italic;
    color:      var(--co-teal);
}

.co-hero__sub {
    font-family:  var(--co-sans);
    font-size:    1.05rem;
    line-height:  1.7;
    color:        rgba(255,255,255,0.65);
    max-width:    42ch;
    margin-bottom: 2.5rem;
}

/* Promesses */
.co-hero__promises {
    display:   flex;
    flex-wrap: wrap;
    gap:       1rem 2rem;
}
.co-promise {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}
.co-promise__icon {
    width:           28px;
    height:          28px;
    border-radius:   50%;
    background:      var(--co-teal-dim);
    border:          1px solid rgba(0, 180, 166, 0.25);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}
.co-promise__icon svg { color: var(--co-teal); }
.co-promise__text {
    font-family: var(--co-sans);
    font-size:   0.85rem;
    font-weight: 500;
    color:       rgba(255,255,255,0.75);
}

/* Visual droite — orbes + chat */
.co-hero__visual {
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      320px;
}

.co-orb {
    position:      absolute;
    border-radius: 50%;
    filter:        blur(60px);
    pointer-events: none;
}
.co-orb--1 {
    width:      260px;
    height:     260px;
    background: var(--co-teal-glow);
    top:        10%;
    right:      15%;
    animation:  co-orb-drift 8s ease-in-out infinite alternate;
}
.co-orb--2 {
    width:      180px;
    height:     180px;
    background: rgba(0, 180, 166, 0.12);
    bottom:     5%;
    left:       10%;
    animation:  co-orb-drift 12s ease-in-out infinite alternate-reverse;
}

@keyframes co-orb-drift {
    from { transform: translate(0, 0); }
    to   { transform: translate(12px, -18px); }
}

/* Chat preview */
.co-chat-preview {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    gap:            0.65rem;
    max-width:      320px;
}

.co-chat-bubble {
    font-family:   var(--co-sans);
    font-size:     0.85rem;
    line-height:   1.5;
    padding:       0.7rem 1rem;
    border-radius: 14px;
    max-width:     88%;
    animation:     co-bubble-in 0.5s var(--co-ease) both;
}
.co-chat-bubble--left {
    background:    rgba(255,255,255,0.06);
    border:        1px solid var(--co-border);
    color:         rgba(255,255,255,0.85);
    border-radius: 4px 14px 14px 14px;
    align-self:    flex-start;
}
.co-chat-bubble--right {
    background:    var(--co-teal);
    color:         #fff;
    border-radius: 14px 4px 14px 14px;
    align-self:    flex-end;
}

.co-chat-bubble:nth-child(1) { animation-delay: 0.6s; }
.co-chat-bubble:nth-child(2) { animation-delay: 1.1s; }
.co-chat-bubble:nth-child(3) { animation-delay: 1.7s; }

@keyframes co-bubble-in {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Typing indicator */
.co-chat-dot-wrap {
    display:       flex;
    align-items:   center;
    gap:           5px;
    padding:       0.6rem 0.9rem;
    background:    rgba(255,255,255,0.06);
    border:        1px solid var(--co-border);
    border-radius: 4px 14px 14px 14px;
    width:         fit-content;
    animation:     co-bubble-in 0.5s var(--co-ease) 2.4s both;
}
.co-chat-dot-wrap span {
    width:         5px;
    height:        5px;
    border-radius: 50%;
    background:    rgba(255,255,255,0.4);
    animation:     co-dot-pulse 1.4s ease-in-out infinite;
}
.co-chat-dot-wrap span:nth-child(2) { animation-delay: 0.2s; }
.co-chat-dot-wrap span:nth-child(3) { animation-delay: 0.4s; }

@keyframes co-dot-pulse {
    0%, 80%, 100% { transform: scale(0.8); opacity: 0.4; }
    40%            { transform: scale(1.1); opacity: 1; }
}


/* ─────────────────────────────────────────────────
   S2 · CONTACT (formulaire + infos)
───────────────────────────────────────────────── */
.co-contact {
    padding-top:    6rem;
    padding-bottom: 7rem;
}

.co-contact__grid {
    display:               grid;
    grid-template-columns: 1fr 1.4fr;
    gap:                   5rem;
    align-items:           start;
}

/* Info gauche */
.co-info__title {
    font-family:   var(--co-serif);
    font-size:     clamp(1.8rem, 2.5vw, 2.4rem);
    font-weight:   700;
    color:         var(--co-dark);
    line-height:   1.2;
    margin-bottom: 1rem;
}
.co-info__intro {
    font-family:   var(--co-sans);
    font-size:     1rem;
    line-height:   1.7;
    color:         var(--co-muted);
    margin-bottom: 2rem;
    max-width:     38ch;
}

/* Checklist */
.co-checklist {
    list-style:     none;
    padding:        0;
    margin:         0 0 2.5rem;
    display:        flex;
    flex-direction: column;
    gap:            0.85rem;
}
.co-checklist__item {
    display:     flex;
    align-items: flex-start;
    gap:         0.65rem;
    font-family: var(--co-sans);
    font-size:   0.95rem;
    line-height: 1.5;
    color:       var(--co-dark);
}
.co-check {
    flex-shrink: 0;
    margin-top:  1px;
    width:       20px;
    height:      20px;
}

/* Contact direct */
.co-direct {
    border-top:  1px solid rgba(0,0,0,0.08);
    padding-top: 1.5rem;
    display:     flex;
    flex-direction: column;
    gap:         0.75rem;
}
.co-direct__label {
    font-family:    var(--co-sans);
    font-size:      0.68rem;
    font-weight:    600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--co-muted);
    margin-bottom:  0.25rem;
}
.co-direct__link {
    display:     flex;
    align-items: center;
    gap:         0.6rem;
    font-family: var(--co-sans);
    font-size:   0.9rem;
    font-weight: 500;
    color:       var(--co-dark);
    text-decoration: none;
    transition:  color 0.2s, gap 0.2s;
}
.co-direct__link:hover {
    color: var(--co-teal);
    gap:   0.85rem;
}
.co-direct__link svg { color: var(--co-teal); flex-shrink: 0; }

/* ── Formulaire CF7 ─────────────────────────────── */
.co-form-card {
    background:    #fff;
    border-radius: 20px;
    box-shadow:    0 4px 40px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04);
    overflow:      hidden;
}

.co-form-card__header {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
    padding:     1rem 1.4rem;
    background:  #f8fafc;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.co-form-card__dot {
    width:         10px;
    height:        10px;
    border-radius: 50%;
}
.co-form-card__dot--r { background: #ff5f57; }
.co-form-card__dot--y { background: #febc2e; }
.co-form-card__dot--g { background: #28c840; }
.co-form-card__title {
    font-family:    var(--co-sans);
    font-size:      0.72rem;
    font-weight:    600;
    letter-spacing: 0.08em;
    color:          var(--co-muted);
    margin-left:    0.5rem;
}
.co-form-card__body {
    padding: 2rem;
}

/* Styles Contact Form 7 */
.co-form-card .wpcf7 { margin: 0; }
.co-form-card .wpcf7-form {
    display:        flex;
    flex-direction: column;
    gap:            1.1rem;
}

/* Champs génériques */
.co-form-card .wpcf7-form-control-wrap,
.co-form-card p { margin: 0; }

.co-form-card input[type="text"],
.co-form-card input[type="email"],
.co-form-card input[type="tel"],
.co-form-card select,
.co-form-card textarea {
    width:         100%;
    font-family:   var(--co-sans);
    font-size:     0.92rem;
    color:         var(--co-dark);
    background:    var(--co-off-white);
    border:        1.5px solid #e2e8f0;
    border-radius: 10px;
    padding:       0.75rem 1rem;
    outline:       none;
    transition:    border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
}
.co-form-card input[type="text"]:focus,
.co-form-card input[type="email"]:focus,
.co-form-card input[type="tel"]:focus,
.co-form-card select:focus,
.co-form-card textarea:focus {
    border-color: var(--co-teal);
    box-shadow:   0 0 0 3px var(--co-teal-dim);
    background:   #fff;
}
.co-form-card input::placeholder,
.co-form-card textarea::placeholder { color: #94a3b8; }

.co-form-card textarea {
    min-height: 130px;
    resize:     vertical;
}

/* Labels */
.co-form-card label {
    font-family: var(--co-sans);
    font-size:   0.82rem;
    font-weight: 600;
    color:       var(--co-dark);
    display:     block;
    margin-bottom: 0.35rem;
}

/* Bouton submit */
.co-form-card input[type="submit"],
.co-form-card .wpcf7-submit {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    font-family:     var(--co-sans);
    font-size:       0.9rem;
    font-weight:     600;
    color:           #fff;
    background:      var(--co-teal);
    border:          none;
    border-radius:   10px;
    padding:         0.85rem 2rem;
    cursor:          pointer;
    width:           100%;
    transition:      background 0.2s, transform 0.15s, box-shadow 0.2s;
    letter-spacing:  0.02em;
}
.co-form-card input[type="submit"]:hover,
.co-form-card .wpcf7-submit:hover {
    background:  #009e91;
    transform:   translateY(-1px);
    box-shadow:  0 6px 24px rgba(0, 180, 166, 0.35);
}
.co-form-card input[type="submit"]:active,
.co-form-card .wpcf7-submit:active {
    transform:  translateY(0);
    box-shadow: none;
}

/* Messages de validation CF7 */
.co-form-card .wpcf7-not-valid-tip {
    font-family: var(--co-sans);
    font-size:   0.75rem;
    color:       #ef4444;
    margin-top:  0.3rem;
}
.co-form-card .wpcf7-response-output {
    font-family:   var(--co-sans);
    font-size:     0.85rem;
    border-radius: 10px;
    padding:       0.75rem 1rem;
    border:        none;
    margin-top:    0;
}
.co-form-card .wpcf7-mail-sent-ok {
    background: rgba(0, 180, 166, 0.1);
    color:      #00796b;
}
.co-form-card .wpcf7-mail-sent-ng,
.co-form-card .wpcf7-spam-blocked,
.co-form-card .wpcf7-acceptance-missing {
    background: rgba(239, 68, 68, 0.08);
    color:      #dc2626;
}

/* Notice si CF7 absent */
.co-form-notice {
    font-family: var(--co-sans);
    font-size:   0.9rem;
    color:       var(--co-muted);
    line-height: 1.6;
    padding:     1.5rem;
    background:  var(--co-off-white);
    border-radius: 10px;
    border:      1px dashed #cbd5e1;
    text-align:  center;
}


/* ─────────────────────────────────────────────────
   S3 · CTA — Réserver un appel
───────────────────────────────────────────────── */
.co-cta {
    position:       relative;
    padding-top:    7rem;
    padding-bottom: 7rem;
    overflow:       hidden;
}

.co-cta-glow {
    position:      absolute;
    top:           50%;
    left:          50%;
    transform:     translate(-50%, -50%);
    width:         700px;
    height:        400px;
    background:    radial-gradient(ellipse at center, rgba(0,180,166,0.18) 0%, transparent 70%);
    pointer-events: none;
}

.co-cta__inner {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    align-items:           center;
    gap:                   5rem;
    position:              relative;
    z-index:               1;
}

.co-eyebrow {
    display:        block;
    font-family:    var(--co-sans);
    font-size:      0.68rem;
    font-weight:    600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          var(--co-teal);
    margin-bottom:  1rem;
}

.co-cta__title {
    font-family:   var(--co-serif);
    font-size:     clamp(2.2rem, 3.5vw, 3.5rem);
    font-weight:   700;
    line-height:   1.12;
    color:         #fff;
    margin-bottom: 1.25rem;
    letter-spacing: -0.02em;
}
.co-cta__title em {
    font-style: italic;
    color:      var(--co-teal);
}

.co-cta__sub {
    font-family:   var(--co-sans);
    font-size:     1rem;
    line-height:   1.7;
    color:         rgba(255,255,255,0.6);
    max-width:     40ch;
    margin-bottom: 2rem;
}

.co-cta__btn {
    display:         inline-flex;
    align-items:     center;
    gap:             0.6rem;
    font-family:     var(--co-sans);
    font-size:       0.92rem;
    font-weight:     600;
    color:           var(--co-dark);
    background:      var(--co-teal);
    text-decoration: none;
    padding:         0.85rem 2rem;
    border-radius:   50px;
    transition:      background 0.2s, transform 0.15s, box-shadow 0.2s, gap 0.2s;
}
.co-cta__btn:hover {
    background:  #00cec0;
    transform:   translateY(-2px);
    box-shadow:  0 8px 32px rgba(0,180,166,0.4);
    color:       var(--co-dark);
    gap:         0.9rem;
}

/* Mini calendrier décoratif */
.co-cta__card {
    background:    rgba(255,255,255,0.04);
    border:        1px solid var(--co-border);
    border-radius: 20px;
    padding:       1.75rem;
    backdrop-filter: blur(8px);
}

.co-cal-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   1rem;
}
.co-cal-month {
    font-family: var(--co-sans);
    font-size:   0.88rem;
    font-weight: 600;
    color:       #fff;
}
.co-cal-nav {
    display: flex;
    gap:     0.25rem;
}
.co-cal-nav svg {
    color:   rgba(255,255,255,0.35);
    cursor:  pointer;
}

.co-cal-days-head {
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    gap:                   0.4rem;
    margin-bottom:         0.5rem;
}
.co-cal-days-head span {
    font-family:    var(--co-sans);
    font-size:      0.68rem;
    font-weight:    600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.3);
    text-align:     center;
}

.co-cal-slots {
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    gap:                   0.4rem;
    margin-bottom:         1rem;
}
.co-slot {
    font-family:   var(--co-sans);
    font-size:     0.72rem;
    font-weight:   500;
    padding:       0.5rem 0.2rem;
    border-radius: 8px;
    border:        1px solid transparent;
    cursor:        pointer;
    transition:    all 0.15s;
    text-align:    center;
}
.co-slot--free {
    background: rgba(0, 180, 166, 0.1);
    border-color: rgba(0, 180, 166, 0.25);
    color:       var(--co-teal);
}
.co-slot--free:hover {
    background:  rgba(0, 180, 166, 0.2);
    transform:   scale(1.04);
}
.co-slot--taken {
    background:  rgba(255,255,255,0.04);
    color:       rgba(255,255,255,0.15);
    cursor:      not-allowed;
}
.co-slot--selected {
    background:  var(--co-teal) !important;
    color:       #fff !important;
    border-color: var(--co-teal) !important;
    box-shadow:  0 2px 12px rgba(0,180,166,0.45);
}

.co-cal-confirm {
    display:       flex;
    flex-direction: column;
    gap:           0.2rem;
    padding-top:   0.75rem;
    border-top:    1px solid var(--co-border);
}
.co-cal-selected-time {
    font-family: var(--co-sans);
    font-size:   0.88rem;
    font-weight: 600;
    color:       #fff;
}
.co-cal-duration {
    font-family: var(--co-sans);
    font-size:   0.75rem;
    color:       rgba(255,255,255,0.4);
}


/* ─────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .co-hero .co-container,
    .co-cta__inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .co-hero__visual { display: none; }
    .co-cta__card    { display: none; }

    .co-contact__grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

@media (max-width: 768px) {
    .co-container { padding: 0 1.5rem; }
    .co-hero {
        padding-top:    7rem;
        padding-bottom: 5rem;
    }
    .co-contact,
    .co-cta {
        padding-top:    4.5rem;
        padding-bottom: 4.5rem;
    }
    .co-hero__title { font-size: clamp(2.4rem, 8vw, 3.5rem); }
    .co-form-card__body { padding: 1.5rem; }
}

@media (max-width: 480px) {
    .co-hero__promises { flex-direction: column; gap: 0.75rem; }
    .co-container { padding: 0 1.25rem; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   OVERRIDE HOVER BLEU BLOCKSY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html body .co-cta__btn:hover { color: #0D1420 !important; text-decoration: none !important; }