/* ═══════════════════════════════════════════════════════════════════
   STYLES PROPRES A CONTACT.html
   ───────────────────────────────────────────────────────────────────
   Ces regles etaient ecrites dans la page. Sorties ici pour etre
   trouvables : 5 Ko de CSS noye dans du HTML ne se relit pas.

   ⚠️ LA POSITION DU <link> DANS LA PAGE EST SIGNIFIANTE. Cette feuille
   est chargee AVANT mobile.css, exactement comme l etaient les blocs
   d origine. Deplacer le lien change qui gagne dans la cascade.
   ═══════════════════════════════════════════════════════════════════ */

/* ── bloc 1/1 de contact.html ── */
/* ══════════════════════════════════════
       PAGE CONTACT
       Deux colonnes : les moyens de nous
       joindre a gauche, le message a droite.
    ══════════════════════════════════════ */
    .ct { background: var(--paper); padding: 132px 0 96px; }
    .ct .container { max-width: 1120px; }

    .ct__head { max-width: 640px; margin-bottom: 48px; }
    .ct__eyebrow {
      display: inline-flex; align-items: center; gap: 11px;
      font-size: .72rem; font-weight: 600; letter-spacing: .16em;
      text-transform: uppercase; color: var(--red); margin-bottom: 16px;
    }
    .ct__eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--red); }
    .ct__title {
      font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 600; color: var(--ink);
      line-height: 1.1; letter-spacing: -.03em; margin: 0 0 14px;
    }
    .ct__title em {
      font-style: normal; font-weight: inherit; color: var(--red);
    }
    .ct__lead { font-size: 1.02rem; color: #55534f; line-height: 1.65; margin: 0; }

    .ct__grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 26px; align-items: start; }

    /* -- Colonne des coordonnees -- */
    .ct-side {
      background: #fff; border: 1px solid var(--border);
      border-radius: 6px; padding: 8px 24px;
    }
    .ct-item { display: flex; gap: 15px; padding: 22px 0; border-bottom: 1px solid var(--border); }
    .ct-item:last-child { border-bottom: none; }
    .ct-item__ico {
      width: 42px; height: 42px; border-radius: 6px; flex-shrink: 0;
      background: #fbeff0; color: var(--red);
      display: flex; align-items: center; justify-content: center;
    }
    .ct-item__k {
      display: block; font-size: .68rem; font-weight: 600; letter-spacing: .12em;
      text-transform: uppercase; color: #8a857d; margin-bottom: 4px;
    }
    .ct-item__v { display: block; font-size: .96rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
    .ct-item__v a { color: var(--red); }
    .ct-item__v a:hover { text-decoration: underline; }
    .ct-item__note { display: block; font-size: .82rem; color: var(--muted); margin-top: 3px; line-height: 1.45; }

    /* Renvoi vers le tunnel de projet, pour qui veut un devis plutot qu'une question */
    .ct-devis {
      margin-top: 20px; padding: 22px 24px;
      background: var(--ink); border-radius: 6px;
    }
    .ct-devis__t { font-size: .98rem; font-weight: 600; color: #faf8f5; margin: 0 0 6px; }
    .ct-devis__d { font-size: .86rem; color: #a6a19a; line-height: 1.55; margin: 0 0 16px; }
    .ct-devis__b {
      display: inline-flex; align-items: center; gap: 9px;
      padding: 12px 20px; border-radius: 5px; background: var(--red); color: #fff;
      font-size: .9rem; font-weight: 600; transition: background .18s;
    }
    .ct-devis__b:hover { background: var(--red-dk); }

    /* -- Formulaire -- */
    .ct-form {
      background: #fff; border: 1px solid var(--border);
      border-radius: 6px; padding: 30px 32px 34px;
    }
    .ct-form__t { font-size: 1.1rem; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
    .ct-form__d { font-size: .88rem; color: var(--muted); margin: 0 0 24px; line-height: 1.55; }
    .ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .ct-f { margin-bottom: 16px; }
    .ct-f label {
      display: block; font-size: .82rem; font-weight: 600; color: var(--ink-2); margin-bottom: 6px;
    }
    .ct-f label span { color: var(--red); }
    .ct-f input, .ct-f textarea {
      width: 100%; padding: 12px 14px; border: 1px solid var(--border);
      border-radius: 5px; background: #fdfcfa; color: var(--ink);
      font-family: var(--font); font-size: .94rem; transition: border-color .16s, background .16s;
    }
    .ct-f textarea { resize: vertical; min-height: 132px; line-height: 1.6; }
    .ct-f input:focus, .ct-f textarea:focus {
      outline: none; border-color: var(--red); background: #fff;
    }
    .ct-f input::placeholder, .ct-f textarea::placeholder { color: #b5afa7; }

    .ct-send {
      display: inline-flex; align-items: center; justify-content: center; gap: 9px;
      width: 100%; padding: 15px 24px; border: none; border-radius: 5px;
      background: var(--red); color: #fff; font-family: var(--font);
      font-size: .96rem; font-weight: 600; cursor: pointer; transition: background .18s;
    }
    .ct-send:hover { background: var(--red-dk); }
    .ct-send[disabled] { opacity: .55; cursor: default; }
    .ct-rgpd { font-size: .78rem; color: var(--muted); line-height: 1.5; margin: 14px 0 0; }
    .ct-rgpd a { color: var(--red); text-decoration: underline; }

    /* Retour d'envoi : jamais par la couleur seule — un liseré porte aussi le sens. */
    .ct-msg {
      display: none; margin: 0 0 20px; padding: 13px 16px;
      border-radius: 5px; font-size: .88rem; font-weight: 500; line-height: 1.5;
      border-left: 3px solid;
    }
    .ct-msg.ok { display: block; background: #f0f7f1; border-color: #2f8f45; color: #1f6b33; }
    .ct-msg.ko { display: block; background: #fbeff0; border-color: var(--red); color: var(--red-dk); }

    @media (max-width: 900px) {
      .ct { padding: 108px 0 72px; }
      .ct__grid { grid-template-columns: 1fr; }
      .ct__head { margin-bottom: 32px; }
    }
    @media (max-width: 560px) {
      .ct-row { grid-template-columns: 1fr; gap: 0; }
      .ct-form { padding: 24px 22px 28px; }
      .ct-side { padding: 4px 20px; }
    }