/* ============================================================
   PAGE CONTACT — template page-contact.php
   Réf. maquette : _claude/shokola-contact.html (section PAGE CONTACT).
   Tokens Kakao : --color-* (secondaire=magenta, primaire=cyan, dark=ink),
   --shk-line, --shk-sec, --font-1/2/3.
   Inclut la charte Gravity Forms scopée sous .shk-ct__form.
   ============================================================ */
.shk-ct { background: var(--color-paper); color: var(--color-dark); font-family: var(--font-1); }

/* .shk-wrap est full-bleed dans ce thème (max-width:100%). On recentre le
   contenu de la page contact sur la largeur maquette pour ne pas coller aux bords. */
.shk-ct .shk-wrap { max-width: var(--shk-maxw); }

/* --- Hero --- */
.shk-ct__hero {
    position: relative;
    overflow: hidden;
    background: var(--color-dark);
    color: var(--color-paper);
    padding: clamp(130px, 16vh, 180px) 0 clamp(50px, 7vw, 80px);
}
.shk-ct__hero-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .15;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(251, 250, 246, .4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(251, 250, 246, .4) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask: radial-gradient(circle at 72% 34%, #000, transparent 74%);
    mask: radial-gradient(circle at 72% 34%, #000, transparent 74%);
}
.shk-ct__blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; z-index: 0; pointer-events: none; }
.shk-ct__blob.a { width: 38vw; height: 38vw; right: -6vw; top: -12vw; background: radial-gradient(circle, rgba(0, 159, 227, .55), transparent 68%); animation: shk-ct-drift 20s ease-in-out infinite alternate; }
.shk-ct__blob.b { width: 32vw; height: 32vw; right: 14vw; bottom: -16vw; background: radial-gradient(circle, rgba(230, 0, 126, .5), transparent 68%); animation: shk-ct-drift 26s ease-in-out infinite alternate-reverse; }
@keyframes shk-ct-drift { from { transform: translate(0, 0); } to { transform: translate(-50px, 40px); } }

.shk-ct__hero-in { position: relative; z-index: 1; }
.shk-ct__eyebrow { font-family: var(--font-2); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--color-primaire); }
.shk-ct__title { font-weight: 800; letter-spacing: -.045em; line-height: .96; font-size: clamp(2.6rem, 7vw, 5.8rem); margin: 18px 0 20px; max-width: 15ch; }
.shk-ct__title em { font-family: var(--font-3); font-style: italic; font-weight: 500; color: var(--color-secondaire); }
.shk-ct__lead { font-size: clamp(1rem, 1.4vw, 1.25rem); color: rgba(251, 250, 246, .75); max-width: 54ch; line-height: 1.6; }

/* Actions directes */
.shk-ct__acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 18px); margin-top: clamp(36px, 5vw, 56px); }
.shk-ct__act {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(251, 250, 246, .2);
    border-radius: 8px;
    padding: clamp(22px, 2.4vw, 30px);
    background: rgba(251, 250, 246, .04);
    color: var(--color-paper);
    overflow: hidden;
    text-decoration: none;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1), border-color .35s, background .35s;
}
.shk-ct__act:hover { transform: translateY(-5px); border-color: var(--color-paper); background: rgba(251, 250, 246, .09); }
.shk-ct__act .k { font-family: var(--font-2); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-primaire); display: flex; align-items: center; gap: 8px; }
.shk-ct__act .k i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primaire); font-style: normal; animation: shk-ct-pulse 2.4s ease-in-out infinite; }
.shk-ct__act.mg .k { color: var(--color-secondaire); }
.shk-ct__act.mg .k i { background: var(--color-secondaire); }
.shk-ct__act .big { font-weight: 800; font-size: clamp(1.2rem, 1.9vw, 1.7rem); letter-spacing: -.025em; margin: 14px 0 6px; line-height: 1.1; word-break: break-word; }
.shk-ct__act .sm { font-family: var(--font-2); font-size: .76rem; color: rgba(251, 250, 246, .55); line-height: 1.5; }
.shk-ct__act .go { position: absolute; top: 22px; right: 24px; font-family: var(--font-2); opacity: .5; transition: transform .35s, opacity .35s; }
.shk-ct__act:hover .go { transform: translate(3px, -3px); opacity: 1; }
@keyframes shk-ct-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* --- Corps : formulaire + aside --- */
.shk-ct__body-sec { padding: 0 0 var(--shk-sec); }
.shk-ct__body {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(34px, 5vw, 76px);
    align-items: start;
    padding: clamp(46px, 6vw, 84px) 0 clamp(20px, 3vw, 40px);
}
.shk-ct__form h2 { font-weight: 800; letter-spacing: -.03em; font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 8px; }
.shk-ct__hint { color: var(--color-ink-soft); margin-bottom: 28px; line-height: 1.55; }
.shk-ct__legal { font-family: var(--font-2); font-size: .72rem; color: var(--color-ink-soft); margin-top: 16px; line-height: 1.6; }

/* Aside */
.shk-ct__aside { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 96px; }
.shk-ct__card { border: 1px solid var(--shk-line); border-radius: 8px; padding: clamp(22px, 2.4vw, 28px); background: var(--color-paper-2); }
.shk-ct__card--paper { background: var(--color-paper); }
.shk-ct__card--dark { background: var(--color-dark); color: var(--color-paper); border-color: transparent; }
.shk-ct__card-t { font-family: var(--font-2); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-ink-soft); margin-bottom: 16px; }
.shk-ct__card--dark .shk-ct__card-t { color: var(--color-primaire); }
.shk-ct__card--dark p { color: rgba(251, 250, 246, .8); font-size: .95rem; line-height: 1.55; margin-bottom: 16px; }

.shk-ct__steps { display: grid; }
.shk-ct__step { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--shk-line); }
.shk-ct__step:first-of-type { border-top: none; padding-top: 0; }
.shk-ct__step .n { font-family: var(--font-2); font-size: .78rem; color: var(--color-secondaire); flex: none; padding-top: 2px; }
.shk-ct__step .t { font-weight: 700; font-size: .98rem; margin-bottom: 3px; }
.shk-ct__step .d { font-size: .9rem; color: var(--color-ink-soft); line-height: 1.5; }

.shk-ct__offices { display: grid; gap: 16px; }
.shk-ct__off { display: flex; gap: 12px; }
.shk-ct__off .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 7px; }
.shk-ct__off .dot--mg { background: var(--color-secondaire); }
.shk-ct__off .dot--cy { background: var(--color-primaire); }
.shk-ct__off .city { font-weight: 700; }
.shk-ct__off .addr { font-size: .9rem; color: var(--color-ink-soft); line-height: 1.5; margin-top: 2px; }
.shk-ct__off .tel { font-family: var(--font-2); font-size: .86rem; margin-top: 4px; display: inline-block; }
.shk-ct__off .tel:hover { color: var(--color-secondaire); }

.shk-ct__urgence {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--color-paper);
    color: var(--color-dark);
    font-family: var(--font-2);
    font-size: .88rem;
    padding: 15px 24px;
    border-radius: 3px;
    text-decoration: none;
    transition: background .3s, color .3s;
}
.shk-ct__urgence:hover { background: var(--color-secondaire); color: var(--color-paper); }
.shk-ct__urgence .ar { transition: transform .35s; }
.shk-ct__urgence:hover .ar { transform: translateX(5px); }

.shk-ct__nope { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; color: var(--color-ink-soft); line-height: 1.55; }
.shk-ct__nope .check { color: var(--color-secondaire); font-family: var(--font-2); }
.shk-ct__nope b { color: var(--color-dark); }

/* ============================================================
   CHARTE GRAVITY FORMS (scopée .shk-ct__form)
   Surcharge la base globale assets/css/formulaire.css.
   ============================================================ */
.shk-ct__form .gform_wrapper { margin: 0; }
.shk-ct__form .gform_wrapper.gravity-theme .gform_fields { grid-row-gap: 16px; grid-column-gap: 16px; }

.shk-ct__form .gfield_label,
.shk-ct__form label.gfield_label.gform-field-label {
    font-family: var(--font-2) !important;
    font-size: .74rem !important;
    font-weight: 500 !important;
    letter-spacing: .04em;
    text-transform: none;
    color: var(--color-ink-soft) !important;
    margin-bottom: 8px !important;
}

.shk-ct__form input[type=text],
.shk-ct__form input[type=email],
.shk-ct__form input[type=tel],
.shk-ct__form input[type=url],
.shk-ct__form input[type=number],
.shk-ct__form input[type=password],
.shk-ct__form select,
.shk-ct__form textarea {
    width: 100% !important;
    background: var(--color-paper) !important;
    border: 1px solid var(--shk-line) !important;
    border-radius: 4px !important;
    padding: 16px 14px !important;
    font-family: var(--font-1) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    color: var(--color-dark) !important;
    transition: border-color .3s, box-shadow .3s !important;
}
.shk-ct__form textarea { min-height: 150px !important; resize: vertical; }
.shk-ct__form input:focus,
.shk-ct__form select:focus,
.shk-ct__form textarea:focus {
    outline: none !important;
    border-color: var(--color-dark) !important;
    box-shadow: 0 0 0 3px rgba(20, 21, 26, .06) !important;
}

/* Bouton d'envoi — sombre, hover magenta */
.shk-ct__form .gform_footer input[type=submit],
.shk-ct__form .gform_footer .gform_button,
.shk-ct__form .gform_page_footer input[type=submit],
.shk-ct__form input[type=submit] {
    background: var(--color-dark) !important;
    color: var(--color-paper) !important;
    font-family: var(--font-2) !important;
    font-size: .88rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: .02em !important;
    text-transform: none !important;
    padding: 17px 30px !important;
    border: 0 !important;
    border-radius: 3px !important;
    cursor: pointer;
    transition: background .3s !important;
}
.shk-ct__form .gform_footer input[type=submit]:hover,
.shk-ct__form .gform_footer .gform_button:hover,
.shk-ct__form input[type=submit]:hover {
    background: var(--color-secondaire) !important;
    color: var(--color-paper) !important;
}
.shk-ct__form .gform-footer.gform_footer.top_label { margin-top: 24px !important; }

/* Choix radio / cases à cocher — pastilles façon maquette (.ct-sb), alignées en ligne */
.shk-ct__form .gfield_radio,
.shk-ct__form .gfield_checkbox,
.shk-ct__form .gform_wrapper .gfield_radio,
.shk-ct__form .gform_wrapper .gfield_checkbox {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 8px !important;
    grid-template-columns: none !important;
}
.shk-ct__form .gfield_radio .gchoice,
.shk-ct__form .gfield_checkbox .gchoice {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    width: auto !important;
    min-height: 0 !important;
}
.shk-ct__form .gchoice input[type=radio],
.shk-ct__form .gchoice input[type=checkbox] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    pointer-events: none;
}
.shk-ct__form .gchoice label {
    font-family: var(--font-2) !important;
    font-size: .78rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    padding: 9px 15px !important;
    margin: 0 !important;
    border: 1px solid var(--shk-line) !important;
    border-radius: 30px !important;
    background: var(--color-paper) !important;
    color: var(--color-dark) !important;
    cursor: pointer;
    transition: background .25s, color .25s, border-color .25s;
}
/* Neutralise la pastille ronde ajoutée par la base formulaire.css */
.shk-ct__form .gchoice label::before,
.shk-ct__form .gchoice label::after {
    content: none !important;
    display: none !important;
}
.shk-ct__form .gchoice label:hover { border-color: var(--color-dark) !important; }
.shk-ct__form .gchoice input:checked + label {
    background: var(--color-dark) !important;
    color: var(--color-paper) !important;
    border-color: var(--color-dark) !important;
}

/* Messages de validation / confirmation */
.shk-ct__form .gfield_description.validation_message,
.shk-ct__form .gfield_validation_message {
    font-family: var(--font-2);
    font-size: .74rem;
    color: var(--color-secondaire);
}
.shk-ct__form .gform_validation_errors {
    border: 1px solid var(--color-secondaire);
    border-radius: 6px;
    background: rgba(230, 0, 126, .06);
    box-shadow: none;
}
.shk-ct__form .gform_confirmation_message {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--color-dark);
    padding: 20px 0;
}

@media (max-width: 900px) {
    .shk-ct__body { grid-template-columns: 1fr; }
    .shk-ct__aside { position: static; }
}
@media (max-width: 860px) {
    .shk-ct__acts { grid-template-columns: 1fr; }
}