/* ==========================================================================
   Commpagnie — Page Contact (d'après Figma)
   Hero clair (coordonnées + badge) puis section bleue (message + formulaire).
   ========================================================================== */

/* Le pied de page enchaîne sans rupture (fond bleu continu). */
body.page-contact .site-footer { margin-top: 0; }

/* ============================ HERO ============================ */
.ct-hero {
	position: relative; overflow: hidden; background: #fff;
	padding: clamp(40px, 6vw, 70px) 0 clamp(56px, 8vw, 90px);
}
.ct-hero__inner { position: relative; z-index: 1; }
.ct-hero__blob {
	position: absolute; left: -314px; top: 60px; width: 672px; height: 672px;
	border-radius: 50%; background: var(--cmp-gris-aplat); opacity: .25; z-index: 0; pointer-events: none;
}

.ct-eyebrow { display: flex; align-items: center; gap: 14px; font-family: var(--cmp-font-body); font-weight: 800; font-size: 1.1rem; color: var(--cmp-anthracite); margin: 0 0 28px; }
.ct-eyebrow__bar { width: 143px; height: 2px; background: var(--cmp-anthracite); display: inline-block; flex: none; }

.ct-hero__title {
	font-family: var(--cmp-font-display); font-weight: 500;
	font-size: clamp(2.2rem, 4.6vw, 3.45rem); line-height: 1.2;
	color: var(--cmp-anthracite); margin: 0 0 clamp(40px, 5vw, 64px); max-width: 960px;
}
.ct-hero__title strong { font-weight: 800; }
.ct-hero__emoji { display: inline-block; width: auto; height: .92em; vertical-align: -.06em; }

/* --- Coordonnées : 3 colonnes côte à côte, LIBELLÉ AU-DESSUS de la valeur.
       Typo Figma : libellé Manrope 18/800 souligné lh 28.8 #6C6C6C ;
       valeur Archivo 30 lh 39 #6C6C6C (1re ligne en 800, suite en 500). --- */
.ct-coords { display: flex; flex-wrap: wrap; gap: 30px 72px; margin: 0; max-width: 1010px; }
.ct-coords__item { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ct-coords__item dt { font-family: var(--cmp-font-body); font-weight: 800; font-size: 1.125rem; line-height: 1.6; text-decoration: underline; color: var(--cmp-grey); white-space: nowrap; }
.ct-coords__item dd { margin: 0; font-family: var(--cmp-font-display); font-weight: 500; font-size: clamp(1.5rem, 2.1vw, 1.875rem); line-height: 1.3; color: var(--cmp-grey); white-space: nowrap; }
.ct-coords__item dd strong { font-weight: 800; }
@media (min-width: 1080px) { .ct-coords { flex-wrap: nowrap; max-width: none; } }
.ct-coords a { color: var(--cmp-grey); }
.ct-coords a:hover { color: var(--cmp-primary); }

/* --- Badge "parlons de votre projet" --- */
.ct-hero__badge { position: absolute; right: 0; bottom: clamp(40px, 6vw, 96px); width: 100px; height: 100px; z-index: 1; animation: ctSpin 22s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ct-hero__badge { animation: none; } }
@keyframes ctSpin { to { transform: rotate(360deg); } }

/* --- Indicateur de scroll (souris) --- */
.ct-scroll { display: inline-block; margin-top: clamp(36px, 5vw, 56px); }
.ct-scroll__mouse { position: relative; display: block; width: 29px; height: 64px; border: 1px solid var(--cmp-primary); border-radius: 30px; }
.ct-scroll__dot { position: absolute; left: 50%; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--cmp-primary); transform: translateX(-50%); animation: ctScrollDot 1.7s ease-in-out infinite; }
@keyframes ctScrollDot { 0% { opacity: 0; transform: translate(-50%, 0); } 25% { opacity: 1; } 60% { opacity: 1; transform: translate(-50%, 18px); } 100% { opacity: 0; transform: translate(-50%, 24px); } }
@media (prefers-reduced-motion: reduce) { .ct-scroll__dot { animation: none; } }

/* ============================ SECTION BLEUE ============================ */
.ct-blue { position: relative; overflow: hidden; background: var(--cmp-primary); color: var(--cmp-blanc); padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 6vw, 72px); }

/* --- Bascule « Votre brief » / « Candidater » --- */
.ct-switch__wrap { position: relative; z-index: 1; display: flex; justify-content: center; margin: 0 auto clamp(40px, 6vw, 72px); }
.ct-switch { display: inline-flex; padding: 6px; border: 1px solid rgba(250, 250, 250, .5); border-radius: 40px; gap: 4px; }
.ct-switch__opt {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 12px clamp(22px, 3vw, 38px); border-radius: 30px;
	font-family: var(--cmp-font-display); font-weight: 700; font-size: 1.1rem; line-height: 1;
	color: var(--cmp-blanc); white-space: nowrap; transition: background .25s ease, color .25s ease;
}
.ct-switch__opt:hover { color: var(--cmp-blanc); background: rgba(255, 255, 255, .12); }
.ct-switch__opt.is-active { background: var(--cmp-blanc); color: var(--cmp-primary); }
.ct-switch__opt.is-active:hover { background: var(--cmp-blanc); color: var(--cmp-primary); }
@media (prefers-reduced-motion: reduce) { .ct-switch__opt { transition: none; } }
.ct-blue__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }

/* --- Colonne intro --- */
.ct-intro__title { font-family: var(--cmp-font-body); font-weight: 800; font-size: 1.1rem; color: var(--cmp-blanc); margin: 0 0 18px; }
.ct-intro__rule { display: block; width: 100%; max-width: 325px; height: 1px; background: rgba(250,250,250,.3); margin: 0 0 24px; }
.ct-intro__text { font-family: var(--cmp-font-body); font-weight: 600; font-size: 1.1rem; line-height: 1.6; color: var(--cmp-blanc); max-width: 304px; margin: 0; }

/* --- Formulaire "mad-libs" --- */
.ct-form-wrap { max-width: 740px; }
.ct-notice { font-family: var(--cmp-font-body); font-weight: 700; font-size: 1rem; border-radius: 14px; padding: 16px 20px; margin: 0 0 24px; }
.ct-notice--ok { background: rgba(250,250,250,.14); border: 1px solid rgba(250,250,250,.5); color: #fff; }
.ct-notice--err { background: rgba(255,80,80,.14); border: 1px solid rgba(255,120,120,.6); color: #fff; }

.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ct-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 22px; }
.ct-word { font-family: var(--cmp-font-body); font-weight: 800; font-size: 1.1rem; color: var(--cmp-blanc); }
.ct-field { flex: 1 1 200px; min-width: 150px; }
.ct-field--grow { flex: 1 1 auto; }
/* Ligne « J'ai pour projet de » : libellé sur sa ligne, puis textarea + « . »
   sur la même ligne (le point se cale en bas du champ, pas de ligne perdue). */
.ct-line--project { align-items: flex-end; }
.ct-line--project .ct-word--block { flex-basis: 100%; }
.ct-line--project .ct-word--dot { padding-bottom: 9px; }
.ct-field input,
.ct-field textarea {
	width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(250,250,250,.6);
	color: #fff; font-family: var(--cmp-font-body); font-weight: 600; font-size: .95rem; line-height: 1.6;
	padding: 4px 2px 9px; outline: none; transition: border-color .2s ease;
}
.ct-field textarea { resize: vertical; min-height: 40px; }
.ct-field input:focus, .ct-field textarea:focus { border-bottom-color: #fff; }
.ct-field input::placeholder, .ct-field textarea::placeholder { color: var(--cmp-gris-aplat); opacity: .9; }

/* --- Zone de dépôt fichier (toute la zone est cliquable : <label>) --- */
.ct-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 413px; padding: 22px; margin: 30px 0 6px; border: 1px dashed rgba(250,250,250,.5); border-radius: 15px; text-align: center; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.ct-drop:hover { border-color: rgba(250,250,250,.85); background: rgba(255,255,255,.05); }
.ct-drop.is-drag { border-color: #fff; background: rgba(255,255,255,.06); }
.ct-drop__ico { display: block; flex: 0 0 auto; width: 25px; height: 19px; color: var(--cmp-blanc); }
.ct-drop__hint { margin: 0; font-family: var(--cmp-font-body); font-weight: 600; font-size: .875rem; color: var(--cmp-blanc); line-height: 1.5; }
.ct-drop__btn { display: inline-flex; align-items: center; padding: 5px 37px; border: 1px solid var(--cmp-blanc); border-radius: 30px; font-family: var(--cmp-font-body); font-weight: 600; font-size: .75rem; color: var(--cmp-blanc); cursor: pointer; transition: background .2s ease, color .2s ease; }
.ct-drop:hover .ct-drop__btn { background: var(--cmp-blanc); color: var(--cmp-primary); }
.ct-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.ct-drop__name { font-family: var(--cmp-font-body); font-weight: 600; font-size: .75rem; color: var(--cmp-blanc); opacity: .9; min-height: 1em; word-break: break-all; }

/* --- ALTCHA (anti-spam) sur fond bleu --- */
.cmp-altcha { margin: 22px 0 4px; }
.ct-altcha altcha-widget,
.cmp-altcha altcha-widget {
	display: block; max-width: 413px;
	--altcha-max-width: 413px;
	--altcha-border-width: 1px;
	--altcha-border-radius: 15px;
	--altcha-color-base: rgba(255, 255, 255, .06);
	--altcha-color-border: rgba(250, 250, 250, .5);
	--altcha-border-color: rgba(250, 250, 250, .5);
	--altcha-color-border-focus: #fff;
	--altcha-color-text: var(--cmp-blanc);
	--altcha-color-base-content: var(--cmp-blanc);
	--altcha-color-success: var(--cmp-blanc);
	/* Coche du :checked — défaut altcha = blanc → invisible sur notre case blanche. */
	--altcha-color-success-content: var(--cmp-primary);
	--altcha-color-error: #ffd0d0;
}
.cmp-altcha .altcha-checkbox-wrap label { font-family: var(--cmp-font-body); font-weight: 600; font-size: .85rem; white-space: nowrap; }

/* --- Consentement --- */
.ct-consent { display: flex; align-items: flex-start; gap: 12px; max-width: 415px; margin: 18px 0 26px; font-family: var(--cmp-font-body); font-weight: 600; font-size: .875rem; line-height: 1.6; color: var(--cmp-blanc); cursor: pointer; }
.ct-consent input { flex: none; width: 14px; height: 14px; margin-top: 4px; accent-color: #fff; cursor: pointer; }

/* --- Bouton envoi --- */
.ct-form__actions { display: flex; justify-content: flex-end; }
.ct-submit .cmp-arrow { background: var(--cmp-primary); }

/* --- Visuel + fil conducteur (le tracé passe DERRIÈRE l'image) --- */
.ct-photo { position: relative; z-index: 1; margin-top: clamp(40px, 6vw, 70px); }
.ct-photo img { position: relative; z-index: 1; width: 100%; aspect-ratio: 1280 / 600; object-fit: cover; border-radius: clamp(28px, 6vw, 85px); }
.ct-fil { position: absolute; z-index: 0; top: clamp(-120px, -6.5vw, -64px); left: clamp(-70px, -3.5vw, -16px); width: clamp(380px, 48vw, 680px); height: auto; pointer-events: none; }
.ct-fil path { fill: none; stroke: var(--cmp-blanc); stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: .95; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ct-fil.is-draw path { animation: ctFilDraw 2.4s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes ctFilDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ct-fil path { stroke-dashoffset: 0; animation: none; } }

/* --- CTA emploi --- */
.ct-jobs { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 45px; margin-top: clamp(40px, 6vw, 70px); }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 900px) {
	.ct-blue__grid { grid-template-columns: 1fr; gap: 40px; }
	.ct-intro__rule, .ct-intro__text { max-width: none; }
	.ct-hero__badge { position: static; display: block; margin: 36px 0 0; }
	.ct-coords { gap: 28px 40px; }
	.ct-fil { width: clamp(240px, 60vw, 420px); top: clamp(-110px, -16vw, -60px); }
}
@media (max-width: 560px) {
	.ct-coords__item { flex-direction: column; gap: 8px; }
	.ct-form__actions { justify-content: stretch; }
	.ct-submit { width: 100%; justify-content: center; }
	.ct-jobs .cmp-btn { width: 100%; justify-content: center; }
}