/**
 * Styles de la page Contact V2.
 *
 * EXTRAITS de « refonte_v2/20 - Maquette/Contact.HTML ». Les sélecteurs du
 * chrome sont écartés par comparaison exacte avec ce que déclare chrome.css.
 */

.logo-circle {
    width: 68px;
    height: 68px;
    border: 2px solid rgba(255,255,255,0.7);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.15);
}

.logo-g {
    font-size: 26px;
    font-weight: 900;
    color: var(--gl-purple-600);
    line-height: 1;
}

.logo-arrow {
    font-size: 14px;
    color: white;
}

.logo-text {
    color: white;
    line-height: 1.2;
}

.logo-text strong {
    font-size: 16px;
    display: block;
    letter-spacing: 1px;
}

.logo-text span {
    font-size: 13px;
    opacity: 0.9;
}




.contact-body {
    padding: 60px 0 80px;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 64px;
    align-items: start;
}

.contact-intro {
    font-size: 15px;
    color: var(--gl-grey-600);
    line-height: 1.85;
    margin-bottom: 36px;
}

.contact-info-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.contact-info-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--gl-teal-025);
    border: 2px solid var(--gl-teal-400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    color: var(--gl-teal-600);
}

.contact-info-text strong {
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gl-grey-350);
    margin-bottom: 2px;
}

.contact-info-text span, .contact-info-text a {
    font-size: 15px;
    color: var(--gl-grey-800);
    font-weight: 500;
}

.contact-info-text a:hover {
    color: var(--gl-teal-600);
    text-decoration: underline;
}

.contact-form-card {
    background: var(--gl-white);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    padding: 40px 36px;
}

.form-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--gl-grey-800);
    margin-bottom: 6px;
}


.form-group {
    margin-bottom: 22px;
}

/* ── L'HABILLAGE DE CETTE PAGE VIENT DE SA MAQUETTE ───────────────────────
   Le socle commun (`chrome.css`) donne le champ ; ce qui suit dit en quoi
   celui de Contact s'en écarte, et c'est le dessin qui le veut : des libellés
   en petites majuscules espacées, un fond légèrement grisé qui blanchit à la
   saisie, une bordure de 2px. Les valeurs identiques au socle ont été
   retirées — elles ne disaient rien de cette page. */
.form-group label {
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.form-group input,
.form-group select,
.form-group textarea {
    border: 2px solid var(--gl-grey-175);
    border-radius: 7px;
    font-size: 15px;
    background: var(--gl-grey-025);
    transition: border-color .2s, background .2s;
}

/* Le fond blanchit à la saisie : c'est ce que fait le dessin de cette page.
   L'anneau et la bordure turquoise, eux, viennent du socle — cette règle les
   effaçait auparavant avec un `outline: none` qui ne laissait que la bordure
   pour dire où l'on écrit. */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    background: var(--gl-white);
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
}

/* ATTENTION AU NOM : ici `.form-row` est la LIGNE À DEUX COLONNES qui tient
   deux `.form-group`, alors qu'ailleurs sur le site c'est l'enveloppe d'un
   champ. Le socle commun ne lui pose qu'une marge basse, qu'elle veut aussi —
   mais la collision est réelle et mérite d'être vue avant d'ajouter une règle
   ici ou là. */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.btn-submit {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, var(--gl-purple-600), var(--gl-teal-400));
    color: white;
    border: none;
    border-radius: 7px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.5px;
    transition: opacity .2s;
}

.btn-submit:hover {
    opacity: 0.88;
}

.form-success {
    display: none;
    text-align: center;
    padding: 28px 20px;
}

.form-success .success-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.form-success h3 {
    font-size: 20px;
    font-weight: 800;
    color: var(--gl-green-600);
    margin-bottom: 8px;
}

.form-success p {
    font-size: 15px;
    color: var(--gl-grey-500);
}

.section-map {
    background: var(--gl-grey-100);
}

.map-placeholder {
    width: 100%;
    height: 260px;
    background: linear-gradient(135deg, #e8f8f7, #f0e8ff);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--gl-grey-400);
    font-size: 15px;
}

.map-placeholder span {
    font-size: 36px;
}

.section-faq {
    padding: 56px 0;
    background: var(--gl-purple-050);
}

.section-faq h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--gl-grey-800);
    margin-bottom: 28px;
    text-align: center;
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.faq-item {
    background: white;
    border-radius: 8px;
    padding: 20px 22px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border-left: 4px solid var(--gl-teal-400);
}

.faq-item h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--gl-grey-800);
    margin-bottom: 6px;
}

.faq-item p {
    font-size: 13px;
    color: var(--gl-grey-500);
    line-height: 1.7;
}

@media (max-width: 900px) {
  .contact-grid {
      grid-template-columns: 1fr;
      gap: 40px;
  }

  .faq-grid {
      grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .form-row {
      grid-template-columns: 1fr;
  }


  .contact-form-card {
      padding: 28px 20px;
  }
}

/* La pile d'erreurs en tête de formulaire a disparu : chaque message est
   maintenant sous le champ qu'il concerne, et son habillage est commun à tous
   les formulaires du site — voir `.form-erreur` dans `chrome.css`. */

/* ==========================================================================
   CARTE ET QUESTIONS FRÉQUENTES
   Extraites de « refonte_v2/20 - Maquette/Contact.HTML ». Les couleurs en dur
   passent par les jetons ; celles qui subsistent n'ont pas d'équivalent dans
   la palette et c'est visible pour qui relit.
   ========================================================================== */

.section-map {
    background: var(--gl-grey-100);
}

/* Un cadre DÉCORATIF, pas une carte embarquée : voir la vue pour le
   raisonnement — une carte de tiers déposerait des traceurs avant tout
   consentement, ce que la bannière du site est là pour empêcher. */
.map-placeholder {
    width: 100%;
    min-height: 260px;
    background: linear-gradient(135deg, var(--gl-teal-050, #e8f8f7), var(--gl-purple-050));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
    color: var(--gl-grey-500);
    font-size: 15px;
}

.map-placeholder span {
    font-size: 36px;
}

.map-placeholder a {
    color: var(--gl-teal-600);
    font-weight: 700;
}

.map-placeholder a:hover {
    text-decoration: underline;
}

.section-faq {
    padding: 56px 0;
    background: var(--gl-purple-025);
}

.section-faq h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--gl-grey-800);
    margin-bottom: 28px;
    text-align: center;
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.faq-item {
    background: white;
    border-radius: 8px;
    padding: 20px 22px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border-left: 4px solid var(--gl-teal-400);
}

.faq-item h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--gl-grey-800);
    margin-bottom: 6px;
}

.faq-item p {
    font-size: 13px;
    color: var(--gl-grey-600);
    line-height: 1.7;
}

/* Une grille de deux colonnes sur un téléphone donne des cartes de 150px de
   large : les questions y tiendraient sur cinq lignes. */
/* 767.98px et non 700 : le Chapitre 6 fixe la bascule à 768px — « sur
   ordinateur (à partir de 768px de large), le design bascule vers une mise en
   page plus proche de la maquette originale ». Entre 700 et 768, un téléphone
   en paysage recevait la mise en page d'ordinateur.

   Les autres seuils de cette feuille (1000, 900, 600px) ne sont PAS des
   bascules de mode : ce sont des ajustements de grille, qui n'ont pas à
   s'aligner sur celui-là. */
@media (max-width: 767.98px) {
    .faq-grid {
        grid-template-columns: 1fr;
    }

    .map-placeholder {
        min-height: 200px;
    }
}