/* ============================================================
   PAGE CONTACT v2 — direction C « Fiche pratique » (choix JM 2026-07-02)
   Scope .ctc : header compact + rail sticky (fiche identité) + formulaire + FAQ.
   Leçons appliquées : overflow-x:clip (jamais hidden — casse sticky),
   rail sticky top:100px (sous le menu flottant), tap targets ≥44px.
   ============================================================ */
.ctc{ /* tokens charte -> assets/css/tokens.css (source unique) */
  /* tokens de la famille v2 (identiques à blog/article/réalisations) — harmonisation 2026-07-02 :
     avant, .ctc héritait des tokens globaux de main.css (dégradé 96° orange) ≠ pages internes (120° cramoisi) */
  overflow-x:clip;background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.6;
}
.ctc .wrap{max-width:1200px;margin:0 auto;padding:0 28px}

/* ---- header ANIMÉ (vidéo + particules, même langage que blog/réalisations) ---- */
.ctc .chero{position:relative;min-height:clamp(340px,46vh,480px);display:flex;align-items:flex-end;overflow:hidden}
.ctc .chero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--wia-video-filter)}
.ctc .chero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.6) 50%,rgba(255,255,255,.97))}
.ctc .hero-particles{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.ctc .chero .inner{position:relative;z-index:2;padding:80px 0 44px;width:100%}
.ctc .chero .crumb{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.ctc .chero .crumb a:hover{color:var(--rose)}
.ctc .chero h1{font-family:var(--disp);font-weight:800;font-size:clamp(2.1rem,4.6vw,3.4rem);letter-spacing:-.03em;line-height:1.05;margin:14px 0 10px}
.ctc .chero .lead{color:rgba(11,37,69,.78);max-width:44em;margin:0}

/* ---- accès rapide mobile (appel/WhatsApp) ---- */
.ctc .quickbar{display:none;gap:12px;margin:4px 0 8px}
.ctc .quickbar a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:999px;font-weight:700;font-size:.92rem}
.ctc .quickbar .tel{background:var(--grad);color:#fff}
.ctc .quickbar .wa{border:1px solid rgba(37,211,102,.5);color:#128C4A}

/* ---- colonnes ---- */
.ctc .ccols{display:grid;grid-template-columns:340px minmax(0,1fr);gap:52px;padding:14px 0 70px;align-items:start}

/* ---- rail sticky : fiche identité ---- */
.ctc .rail{position:sticky;top:100px;background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;max-height:calc(100vh - 120px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(26,86,196,.3) transparent}
.ctc .rail>.wia-mediaframe{display:block;position:relative;width:100%;aspect-ratio:4/3;overflow:hidden}
.ctc .rail>.wia-mediaframe>img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.ctc .rail .sec{padding:16px 22px;border-top:1px solid var(--line)}
.ctc .rail .sec:first-child{border-top:0}
.ctc .rail .sec b{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:5px;font-weight:700}
.ctc .rail .sec p{font-size:.93rem;color:var(--ink2);margin:0;line-height:1.55}
.ctc .rail .sec a{color:var(--rose);font-weight:600;display:inline-flex;align-items:center;min-height:28px}
.ctc .rail .sec a:hover{text-decoration:underline;text-underline-offset:3px}
.ctc .rail .stars{color:#F2B01E;letter-spacing:2px;font-size:.85rem}

/* ---- formulaire ---- */
.ctc .formbox{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:30px;margin-bottom:36px}
.ctc .formbox h2{font-family:var(--disp);font-weight:700;font-size:1.35rem;margin:0 0 4px}
.ctc .formbox .sub{color:var(--ink2);font-size:.9rem;margin:0 0 20px}
/* styles appliqués AUSSI au markup Gravity Forms (inputs natifs) */
.ctc .formbox label,.ctc .formbox legend.gfield_label{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 7px;font-weight:700} /* legend = label RGPD/consentement GF (sinon bleu nuit GF, invisible sur fond sombre) */
.ctc .formbox input[type=text],.ctc .formbox input[type=email],.ctc .formbox input[type=tel],.ctc .formbox input[type=number],.ctc .formbox select,.ctc .formbox textarea{width:100%;background:rgba(11,37,69,.03);border:1px solid var(--line);border-radius:12px;color:var(--ink);padding:13px 15px;font:inherit;font-size:.95rem;min-height:48px}
.ctc .formbox textarea{min-height:120px;resize:vertical}
.ctc .formbox input:focus,.ctc .formbox textarea:focus,.ctc .formbox select:focus{outline:none;border-color:rgba(26,86,196,.6);box-shadow:0 0 0 3px rgba(26,86,196,.15)}
/* Texte saisi + placeholders INVISIBLES (retour JM 2026-08-31) : le CSS du thème Gravity Forms
   ecrase la couleur -> on blinde, et on donne une vraie couleur aux placeholders */
.ctc .formbox .gform_wrapper input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.ctc .formbox .gform_wrapper select,.ctc .formbox .gform_wrapper textarea{color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important}
.ctc .formbox input::placeholder,.ctc .formbox textarea::placeholder{color:rgba(11,37,69,.48)!important;opacity:1!important}
/* select (barre déroulante) : apparence native cassée en thème sombre → chevron custom + liste lisible */
.ctc .formbox select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23F5F2EE' stroke-opacity='.65' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:42px}
.ctc .formbox select option{background-color:#FFFFFF;color:#10213A}
.ctc .formbox input[type=submit],.ctc .formbox button[type=submit],.ctc .formbox .gform_button{display:inline-flex;align-items:center;justify-content:center;width:100%;gap:9px;background:var(--grad);color:#fff;border:0;border-radius:999px;padding:14px 26px;font-weight:700;font-size:.95rem;min-height:50px;cursor:pointer;transition:transform .18s,box-shadow .25s}
.ctc .formbox input[type=submit]:hover,.ctc .formbox .gform_button:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(26,86,196,.6)}
/* le CSS du thème Gravity Forms (Orbital) impose son radius/couleurs avec une forte spécificité */
.ctc .formbox .gform_wrapper input[type=submit],.ctc .formbox .gform_wrapper .gform_button{border-radius:999px!important;background:var(--grad)!important;color:#fff!important;border:0!important;min-height:50px!important;padding:14px 26px!important;width:100%!important;font-weight:700!important}
.ctc .formbox .gfield{margin-bottom:0}
.ctc .formbox .gform_required_legend{display:none}/* mention EN de GF, redondante avec les * */
.ctc .formbox .gfield--type-captcha:not(:has(iframe,img,canvas)){display:none}/* champ CAPTCHA sans clés configurées = label orphelin → masqué (réapparaît avec les clés) */
/* label consentement RGPD : texte long → casse normale, lisible */
.ctc .formbox .ginput_container_consent label,.ctc .formbox .gfield_consent_label{text-transform:none;font-family:var(--body);font-size:.8rem;letter-spacing:0;line-height:1.5;color:var(--ink2);margin:0;font-weight:500}
.ctc .formbox .ginput_container_consent{display:flex;gap:10px;align-items:flex-start}
.ctc .formbox input[type=checkbox]{width:18px;height:18px;min-height:0;accent-color:#1A56C4;margin-top:2px;flex:none}
.ctc .formbox .gform_fields{display:grid;gap:16px}/* espace horizontal ET vertical (les demi-largeurs email/tél étaient collées par mon gap:0) */
.ctc .formbox .trust{display:flex;align-items:center;gap:9px;justify-content:center;margin-top:16px;font-size:.82rem;color:var(--ink2);flex-wrap:wrap}
.ctc .formbox .trust .stars{color:#F2B01E;letter-spacing:2px}
/* repli sans plugin */
.ctc .formbox .fallback p{color:var(--ink2);margin:0 0 12px}
.ctc .formbox .fallback .inl{color:var(--rose);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---- FAQ contact (details natifs) ---- */
.ctc .cfaq h2{font-family:var(--disp);font-weight:700;font-size:1.3rem;margin:0 0 16px;display:flex;align-items:center;gap:14px}
.ctc .cfaq h2::after{content:"";flex:1;height:1px;background:var(--line)}
.ctc .cfaq details{border:1px solid var(--line);border-radius:14px;margin-bottom:10px;background:var(--surface)}
.ctc .cfaq summary{padding:16px 20px;cursor:pointer;font-weight:600;font-size:.95rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:48px}
.ctc .cfaq summary::-webkit-details-marker{display:none}
.ctc .cfaq summary::after{content:"+";color:var(--rose);font-size:1.25rem;flex:none}
.ctc .cfaq details[open] summary::after{content:"–"}
.ctc .cfaq details>div{padding:0 20px 16px;color:var(--ink2);font-size:.92rem}

/* ---- champ upload Gravity Forms : charte sombre (la boîte blanche native + bouton bleu juraient) ---- */
.gfield--type-fileupload .gform_drop_area{background:rgba(11,37,69,.04)!important;border:1px dashed rgba(11,37,69,.28)!important;border-radius:14px!important;padding:1.7rem 1rem!important;color:rgba(11,37,69,.62);text-align:center;transition:border-color .25s,background .25s}
.gfield--type-fileupload .gform_drop_area:hover{border-color:rgba(91,141,232,.5)!important;background:rgba(11,37,69,.06)!important}
.gfield--type-fileupload .gform_drop_area svg{display:none}
.gfield--type-fileupload .gform_drop_instructions{display:block;margin:0 0 .8rem;color:rgba(11,37,69,.62);font-size:.92rem}
.gfield--type-fileupload .gform_button_select_files{background:transparent!important;border:1px solid rgba(11,37,69,.35)!important;color:#10213A!important;border-radius:999px!important;padding:.68rem 1.6rem!important;font-weight:600!important;font-size:.92rem!important;min-height:44px;cursor:pointer;transition:border-color .25s,background .25s,transform .25s}
.gfield--type-fileupload .gform_button_select_files:hover{border-color:#1A56C4!important;background:rgba(26,86,196,.14)!important;transform:translateY(-1px)}
.gfield--type-fileupload .gform_fileupload_rules{color:rgba(11,37,69,.5)!important;font-size:.8rem!important}
.gfield--type-fileupload .ginput_preview,.gfield--type-fileupload .gfield_fileupload_filename{color:rgba(11,37,69,.75)}
/* case à cocher (RGPD…) à la charte */
.gform_wrapper input[type=checkbox]{accent-color:#1A56C4}

/* ---- responsive ---- */
@media (max-width:980px){
  .ctc .ccols{grid-template-columns:1fr;gap:36px}
  .ctc .rail{position:static;order:2;max-height:none;overflow:visible}
  .ctc .main{order:1}
  .ctc .quickbar{display:flex}
}
@media (max-width:680px){
  .ctc .wrap{padding:0 20px}
  .ctc .chero .inner{padding:64px 0 30px}
  .ctc .formbox{padding:22px}
}