/* =============================================================================
   Formulaire de contact (templates/pages/contact.html.twig).
   Premier formulaire de la vitrine : ses champs sont décrits ici plutôt que
   dans composants.css, faute d'un deuxième usage. Thème sombre : tout passe
   par les variables --mpn-*.
   ============================================================================= */

.ctc-grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
}

.ctc-carte {
    padding: clamp(22px, 3.5vw, 40px);
    border-radius: 20px;
    background: var(--mpn-surface-soft);
    border: 1px solid var(--mpn-line);
}
.ctc-titre { margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.ctc-aide { margin: .5rem 0 0; font-size: .88rem; color: var(--mpn-ink-mute); }

.ctc-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 1.6rem; }
/* Tout champ prend la largeur entière, sauf prénom et nom, côte à côte. */
.ctc-form > * { grid-column: 1 / -1; }
.ctc-form > .ctc-champ--demi { grid-column: auto; }

.ctc-champ { display: grid; gap: 6px; align-content: start; }
.ctc-champ label { font-size: .9rem; font-weight: 600; color: var(--mpn-ink); }
.ctc-champ input,
.ctc-champ textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--mpn-line);
    background: var(--mpn-surface);
    color: var(--mpn-ink);
    font: inherit;
    font-size: 1rem;          /* 16 px : iOS ne zoome pas sur le champ */
    line-height: 1.45;
    transition: border-color .2s, box-shadow .2s;
}
.ctc-champ textarea { resize: vertical; min-height: 9rem; }
.ctc-champ input:focus,
.ctc-champ textarea:focus {
    outline: none;
    border-color: var(--mpn-bleu);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mpn-bleu) 22%, transparent);
}
.ctc-champ--erreur input,
.ctc-champ--erreur textarea { border-color: var(--mpn-rouge); }
.ctc-erreur { margin: 0; font-size: .84rem; font-weight: 600; color: var(--mpn-rouge); }

.ctc-alerte {
    margin: 1.2rem 0 0;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--mpn-rouge);
    background: color-mix(in srgb, var(--mpn-rouge) 8%, transparent);
    font-size: .9rem;
    line-height: 1.5;
    color: var(--mpn-ink);
}

.ctc-consent {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    align-items: start;
}
.ctc-consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--mpn-bleu-plein); }
.ctc-consent label { font-size: .88rem; line-height: 1.5; color: var(--mpn-ink-soft); }
.ctc-consent .ctc-erreur { grid-column: 2; }

.ctc-envoyer { justify-self: start; }

/* Piège à robots : hors écran plutôt que display:none, que certains robots
   savent repérer. Invisible, hors tabulation, ignoré des lecteurs d'écran. */
.ctc-piege {
    position: absolute !important;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Confirmation. */
.ctc-merci { text-align: center; padding: 1rem 0; }
.ctc-merci__icone {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--mpn-bleu-plein);
    color: #fff;
}
.ctc-merci__icone svg { width: 26px; height: 26px; }
.ctc-merci h2 { margin: 1rem 0 0; }
.ctc-merci p { margin: .8rem auto 0; max-width: 34em; color: var(--mpn-ink-soft); line-height: 1.55; }
.ctc-merci .mpn-btn { margin-top: .8rem; }

/* Colonne des autres moyens de contact. */
.ctc-cote { display: grid; gap: 14px; }
.ctc-bloc {
    padding: 20px 22px;
    border-radius: 16px;
    border: 1px solid var(--mpn-line);
    background: var(--mpn-surface-soft);
}
.ctc-bloc p { margin: 0; }
.ctc-bloc__titre {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mpn-ink-mute);
}
.ctc-bloc__texte { margin-top: .5rem !important; font-size: .9rem; line-height: 1.55; color: var(--mpn-ink-soft); }
.ctc-bloc a { font-weight: 600; }
.ctc-bloc p + p { margin-top: .5rem; }
.ctc-tel { display: inline-block; margin-top: .4rem; font-size: 1.35rem; font-weight: 800; color: var(--mpn-ink); text-decoration: none; }

/* Thème sombre : le rouge de la charte manque de contraste sur le navy pour
   un texte de petite taille ; on l'éclaircit pour les messages d'erreur. */
:root[data-theme='sombre'] .ctc-erreur { color: #FF9B9B; }
:root[data-theme='sombre'] .ctc-champ--erreur input,
:root[data-theme='sombre'] .ctc-champ--erreur textarea,
:root[data-theme='sombre'] .ctc-alerte { border-color: #FF9B9B; }

@media (max-width: 520px) {
    .ctc-form > .ctc-champ--demi { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .ctc-grille { grid-template-columns: 1fr; }
    .ctc-envoyer { justify-self: stretch; }
}