/**
 * contact.css — Page « Me contacter »
 *
 * Sections :
 *   .contact-main              fond global cream
 *   .contact-hero              titre + intro
 *   .contact-cards             2 cartes (conférence sombre / autres claire)
 *   .contact-form-section      formulaire général 2 colonnes (caché par défaut)
 *   .contact-social-section    "Me retrouver en ligne" · 4 cartes réseau
 */


/* ═══════════════════════════════════════════════════ FOND GLOBAL */

.contact-main {
  background: var(--c-cream);
  min-height: 100vh;
}


/* ═══════════════════════════════════════════════════ HERO */

.contact-hero {
  padding: clamp(100px, 12vw, 160px) 0 clamp(40px, 4.5vw, 64px);
}

.contact-hero__inner {
  /* max-width supprimé : aligne le hero sur le container global comme les autres sections */
}

.contact-hero__title {
  font-family:  var(--f-serif);
  font-size:    clamp(56px, 7.2vw, 100px);
  font-weight:  400;
  line-height:  1.02;
  color:        var(--c-hero-deep);
  margin:       0 0 var(--space-8);
  letter-spacing: -0.02em;
}

.contact-hero__title em {
  font-style:  italic;
  font-weight: 300;
  color:       var(--c-primary);
}

.contact-hero__me {
  font-weight: 500;
}

.contact-hero__intro {
  font-family: var(--f-serif);
  font-style:  italic;
  font-weight: 400;
  font-size:   19px;
  line-height: 30px;
  color:       rgb(122, 133, 127);
  margin:      0;
  max-width:   600px;
}


/* ═══════════════════════════════════════════════════ DEUX CARTES */

.contact-cards {
  padding-bottom: clamp(48px, 6vw, 80px);
}

.contact-cards__inner {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-4);
}

/* ── Base carte ────────────────────────────────────── */

.contact-card {
  border-radius: var(--radius-card);
  padding:       clamp(32px, 4vw, 52px) clamp(28px, 3.5vw, 48px);
  display:       flex;
  flex-direction: column;
  gap:           var(--space-4);
}

/* ── Carte Conférence (sombre) ─────────────────────── */

.contact-card--conf {
  background: var(--c-hero);
  color:      #fff;
  position:   relative;
  overflow:   hidden;
}

/* Nervures en fond */
.contact-card--conf::before {
  content:    "";
  position:   absolute;
  inset:      0;
  background: url('../img/nervures.svg') no-repeat left top;
  background-size: auto 100%;
  pointer-events: none;
  opacity:    0.95;
}

/* Le contenu passe au-dessus des nervures */
.contact-card--conf > * {
  position: relative;
  z-index:  1;
}

.contact-card--conf .contact-card__eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            12px;
  font-family:    var(--f-sans);
  font-size:      11px;
  font-weight:    400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--c-accent);
}
.contact-card--conf .contact-card__eyebrow::before {
  content:    "";
  display:    inline-block;
  width:      24px;
  height:     1px;
  background: currentColor;
  flex-shrink: 0;
}

.contact-card--conf .contact-card__title {
  font-family:  var(--f-serif);
  font-size:    clamp(28px, 2.8vw, 44px);
  font-weight:  400;
  line-height:  1.1;
  color:        #fff;
  margin:       0;
}

.contact-card--conf .contact-card__title em {
  font-style: italic;
  color:      var(--c-accent);
}

.contact-card--conf .contact-card__body {
  font-family: var(--f-sans);
  font-size:   15px;
  font-weight: 400;
  line-height: 1.6;
  color:       rgba(255, 255, 255, 0.78);
  margin:      0;
}

.contact-card--conf .contact-card__meta {
  font-family: var(--f-serif);
  font-style:  italic;
  font-size:   var(--fs-small);
  color:       rgba(255, 255, 255, 0.45);
  margin:      0;
}

/* ── Carte Autres demandes (claire) ────────────────── */

.contact-card--other {
  background: #fff;
  border:     1px solid var(--c-line);
}

.contact-card__eyebrow--green {
  display:        inline-flex;
  align-items:    center;
  gap:            12px;
  font-family:    var(--f-sans);
  font-size:      11px;
  font-weight:    400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--c-primary);
}
.contact-card__eyebrow--green::before {
  content:    "";
  display:    inline-block;
  width:      24px;
  height:     1px;
  background: currentColor;
  flex-shrink: 0;
}

.contact-card__title--dark {
  font-family:  var(--f-serif);
  font-size:    clamp(28px, 2.8vw, 44px);
  font-weight:  400;
  line-height:  1.1;
  color:        var(--c-hero-deep);
  margin:       0;
}

.contact-card__title-em--green {
  font-style:  italic;
  font-weight: 400;
  color:       var(--c-primary);
}

.contact-card__body--mute {
  font-family: var(--f-sans);
  font-size:   15px;
  font-weight: 400;
  line-height: 1.6;
  color:       #3A4A41;
  margin:      0;
}

.contact-card__meta--mute {
  font-family: var(--f-serif);
  font-style:  italic;
  font-size:   var(--fs-small);
  color:       var(--c-mute);
  margin:      0;
}

/* ── Boutons cartes ────────────────────────────────── */

.contact-card__btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         10px 22px;
  border-radius:   var(--radius-btn);
  font-family:     var(--f-sans);
  font-size:       var(--fs-small);
  font-weight:     600;
  cursor:          pointer;
  text-decoration: none;
  align-self:      flex-start;
  margin-top:      auto;
  transition:      background   var(--duration-fast) var(--ease),
                   border-color var(--duration-fast) var(--ease),
                   color        var(--duration-fast) var(--ease),
                   transform    var(--duration-fast) var(--ease);
}

.contact-card__btn--outline {
  background:   transparent;
  border:       1.5px solid rgba(255, 255, 255, 0.5);
  color:        #fff;
}

.contact-card__btn--outline:hover {
  background:   rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.8);
  transform:    translateY(-1px);
}

.contact-card__btn--green {
  background:    var(--c-accent);   /* #C0DD97 */
  border:        1.5px solid var(--c-accent);
  color:         var(--c-hero-deep);
  border-radius: 9999px;
  padding:       13px 28px;
}

.contact-card__btn--green:hover {
  background:   var(--c-hero-deep);
  border-color: var(--c-hero-deep);
  color:        var(--c-accent);
  transform:    translateY(-1px);
}


/* ═══════════════════════════════════════════════════ SECTION CONFÉRENCE (cachée) */

.contact-conf-section {
  display: none;
  overflow: hidden;
}

.contact-conf-section.is-open {
  display: block;
}


/* ═══════════════════════════════════════════════════ FORMULAIRE GÉNÉRAL */

/* Section cachée par défaut, révélée par JS (.is-open) */

.contact-form-section {
  display:    none;
  overflow:   hidden;
  padding:    clamp(56px, 7vw, 100px) 0;
  border-top: 1px solid var(--c-line);
}

.contact-form-section.is-open {
  display: block;
}

.contact-form-section__inner {
  display:               grid;
  grid-template-columns: 1fr 1.1fr;
  gap:                   clamp(48px, 6vw, 96px);
  align-items:           start;
}

/* ── Colonne gauche : intro ─────────────────────────── */

.contact-form-intro__header {
  display:     flex;
  align-items: center;
  gap:         var(--space-4);
  margin-bottom: var(--space-6);
}

.contact-form-intro__rule {
  display:    block;
  width:      40px;
  height:     1px;
  background: var(--c-primary);
  flex-shrink: 0;
}

.contact-form-intro__eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            12px;
  font-family:    var(--f-sans);
  font-size:      11px;
  font-weight:    400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--c-primary);
}

.contact-form-intro__title {
  font-family:  var(--f-serif);
  font-size:    clamp(32px, 3.5vw, 52px);
  font-weight:  400;
  line-height:  1.1;
  color:        var(--c-hero-deep);
  margin:       0 0 var(--space-6);
}

.contact-form-intro__title em {
  font-style:  italic;
  font-weight: 300;
  color:       var(--c-primary);
}

.contact-form-intro__sub {
  font-family: var(--f-serif);
  font-style:  italic;
  font-size:   clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color:       var(--c-mute);
  margin:      0 0 var(--space-8);
}

/* ── Encadré note presse ────────────────────────────── */

.contact-press-note {
  background:   var(--c-soft);
  border-left:  3px solid var(--c-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding:      var(--space-4) var(--space-6);
}

.contact-press-note__label {
  display:        block;
  font-family:    var(--f-sans);
  font-size:      var(--fs-label);
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--c-primary);
  margin-bottom:  var(--space-2);
}

.contact-press-note__text {
  font-family: var(--f-sans);
  font-size:   var(--fs-small);
  line-height: 1.6;
  color:       var(--c-text);
  margin:      0;
}

/* ── Colonne droite : formulaire dans une carte ──────── */

.contact-form-col {
  background:    #fff;
  border:        1px solid var(--c-line);
  border-radius: var(--radius-card);
  padding:       clamp(28px, 3vw, 44px);
}

.contact-form {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-6);
}

/* ── Ligne Prénom + Nom ─────────────────────────────── */

.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* ── Champs ─────────────────────────────────────────── */

.contact-field {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.contact-label {
  font-family:    var(--f-sans);
  font-size:      var(--fs-label);
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--c-mute);
}

.contact-input {
  font-family:   var(--f-sans);
  font-size:     var(--fs-body);
  color:         var(--c-text);
  background:    transparent;
  border:        none;
  border-bottom: 1px solid var(--c-line);
  border-radius: 0;
  padding:       10px 0;
  outline:       none;
  width:         100%;
  box-sizing:    border-box;
  transition:    border-color var(--duration-fast) var(--ease);
  -webkit-appearance: none;
  appearance:    none;
}

.contact-input::placeholder {
  color: rgba(122, 133, 127, 0.55);
}

.contact-input:focus {
  border-bottom-color: var(--c-primary);
}

.contact-textarea {
  resize:      vertical;
  min-height:  140px;
  line-height: 1.6;
}

/* Séparateur avant le bouton */
.contact-form::after {
  content:    '';
  display:    block;
  height:     1px;
  background: var(--c-line);
  margin:     0;
}

/* ── Bouton envoi ───────────────────────────────────── */

.contact-submit {
  display:         block;
  width:           100%;
  padding:         16px;
  border-radius:   var(--radius-btn);
  border:          none;
  background:      var(--c-hero-deep);
  color:           #fff;
  font-family:     var(--f-sans);
  font-size:       var(--fs-body);
  font-weight:     600;
  cursor:          pointer;
  transition:      background var(--duration-fast) var(--ease),
                   transform  var(--duration-fast) var(--ease);
}

.contact-submit:hover {
  background: var(--c-primary);
  transform:  translateY(-1px);
}

.contact-submit:active {
  transform: translateY(0);
}

/* ── Succès ─────────────────────────────────────────── */

.contact-success {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--space-4);
  padding:        var(--space-8);
}

.contact-success svg {
  color: var(--c-primary);
}

.contact-success__title {
  font-family:  var(--f-serif);
  font-size:    clamp(22px, 2vw, 30px);
  font-weight:  400;
  color:        var(--c-hero-deep);
  margin:       0;
}

.contact-success__text {
  font-family: var(--f-sans);
  font-size:   var(--fs-body);
  line-height: 1.6;
  color:       var(--c-mute);
  margin:      0;
}

/* ── Alerte erreur ──────────────────────────────────── */

.contact-alert {
  background:    rgba(200, 60, 40, 0.07);
  border:        1px solid rgba(200, 60, 40, 0.2);
  border-radius: var(--radius-md);
  padding:       var(--space-4) var(--space-6);
  font-family:   var(--f-sans);
  font-size:     var(--fs-small);
  color:         #8B3A2C;
  margin-bottom: var(--space-6);
  line-height:   1.5;
}

.contact-alert a {
  color: inherit;
  text-decoration: underline;
}


/* ═══════════════════════════════════════════════════ RÉSEAUX SOCIAUX */

.contact-social-section {
  padding: clamp(64px, 8vw, 110px) 0;
  border-top: 1px solid var(--c-line);
}

/* ── En-tête ────────────────────────────────────────── */

.contact-social-section__header {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           clamp(40px, 5vw, 80px);
  align-items:   end;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.contact-social-section__eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            12px;
  font-family:    var(--f-sans);
  font-size:      11px;
  font-weight:    400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--c-primary);
  margin-bottom:  var(--space-4);
}
.contact-social-section__eyebrow::before {
  content:    "";
  display:    inline-block;
  width:      24px;
  height:     1px;
  background: currentColor;
  flex-shrink: 0;
}

.contact-social-section__title {
  font-family:  var(--f-serif);
  font-size:    clamp(36px, 4vw, 56px);
  font-weight:  500;
  line-height:  1.05;
  color:        var(--c-hero-deep);
  margin:       0;
}

.contact-social-section__title em {
  font-style:  italic;
  font-weight: 300;
  color:       var(--c-primary);
}

.contact-social-section__desc {
  font-family: var(--f-serif);
  font-style:  italic;
  font-weight: 400;
  font-size:   19px;
  line-height: 1.65;
  color:       #7A857F;
  margin:      0;
  align-self:  end;
}

/* ── Grille 4 cartes ────────────────────────────────── */

.contact-social-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--space-4);
}

.contact-social-card {
  display:         flex;
  align-items:     center;
  gap:             var(--space-4);
  padding:         var(--space-6) var(--space-6);
  background:      #fff;
  border:          1px solid var(--c-line);
  border-radius:   var(--radius-card);
  text-decoration: none;
  transition:      box-shadow var(--duration-base) var(--ease),
                   transform  var(--duration-base) var(--ease),
                   border-color var(--duration-fast) var(--ease);
}

.contact-social-card:hover {
  box-shadow:   var(--shadow-hover);
  transform:    translateY(-2px);
  border-color: var(--c-cream-deep);
}

/* ── Logo de marque ─────────────────────────────────── */

.contact-social-card__logo {
  width:         44px;
  height:        44px;
  border-radius: var(--radius-md);
  flex-shrink:   0;
  display:       block;
  object-fit:    cover;
}

/* ── Texte ──────────────────────────────────────────── */

.contact-social-card__info {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  flex:           1;
  min-width:      0;
}

.contact-social-card__name {
  font-family:  var(--f-sans);
  font-size:    var(--fs-body);
  font-weight:  600;
  color:        var(--c-text);
  white-space:  nowrap;
}

.contact-social-card__handle {
  font-family:  var(--f-sans);
  font-size:    var(--fs-small);
  color:        var(--c-mute);
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow: ellipsis;
}

/* ── Flèche ─────────────────────────────────────────── */

.contact-social-card__arrow {
  color:       var(--c-mute);
  flex-shrink: 0;
  transition:  transform var(--duration-fast) var(--ease),
               color     var(--duration-fast) var(--ease);
}

.contact-social-card:hover .contact-social-card__arrow {
  transform: translateX(3px);
  color:     var(--c-primary);
}


/* ═══════════════════════════════════════════════════ RESPONSIVE */

@media (max-width: 1100px) {
  .contact-social-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .contact-form-section__inner {
    grid-template-columns: 1fr;
  }

  .contact-social-section__header {
    grid-template-columns: 1fr;
  }
}

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

  .contact-social-grid {
    grid-template-columns: 1fr;
  }

  .contact-submit {
    padding: 14px;
  }
}