/* ============================================================================
   ATELIER — page « Contactez-nous ».
   Chargée APRÈS atelier.css. La page contact est sortie de theme.css (cf
   stylesheets.tpl) : tout le formulaire est habillé ici, sans Bootstrap.
   Markup : templates/contact.tpl + modules/contactform/.../widget/contactform.tpl
   ============================================================================ */

.atelier-contact{ background:var(--cream); }
.atelier-contact .wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }

/* ---- bandeau d'en-tête (pétrole, comme le hero) ---- */
.atelier-contact .contact-hero{ background:var(--petrol); color:var(--paper);
  position:relative; overflow:hidden; border-bottom:5px solid var(--terracotta); }
.atelier-contact .contact-hero::after{ content:""; position:absolute; inset:16px;
  border:1px solid rgba(251,248,239,.18); pointer-events:none; }
.atelier-contact .contact-hero .wrap{ padding:56px 28px; position:relative; z-index:1; }
.atelier-contact .contact-hero .eyebrow{ color:var(--sage); margin-bottom:10px; }
.atelier-contact .contact-hero h1{ font-family:var(--display); font-size:48px;
  line-height:1.08; letter-spacing:-.5px; color:var(--paper); margin:0 0 14px; }
.atelier-contact .contact-hero .lead{ font-size:18px; color:rgba(251,248,239,.85);
  max-width:560px; margin:0; }

/* ---- grille info / formulaire ---- */
.atelier-contact .contact-grid{ display:grid; grid-template-columns:340px 1fr;
  gap:40px; align-items:start; padding-top:56px; padding-bottom:72px; }

/* ---- colonne info ---- */
.atelier-contact .contact-aside{ display:flex; flex-direction:column; gap:18px; }
.atelier-contact .info-card{ background:var(--paper); border:1px solid var(--line);
  padding:22px 24px; }
.atelier-contact .info-card .ic-head{ display:flex; align-items:center; gap:12px;
  margin-bottom:10px; }
.atelier-contact .info-card .ic-ico{ width:38px; height:38px; flex:none;
  border:1px solid var(--sage); border-radius:50%; display:grid; place-items:center; }
.atelier-contact .info-card .ic-ico svg{ width:20px; height:20px; stroke:var(--terracotta-deep);
  fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.atelier-contact .info-card h3{ font-family:var(--label); text-transform:uppercase;
  letter-spacing:.14em; font-size:12.5px; font-weight:600; color:var(--terracotta-deep);
  margin:0; }
.atelier-contact .info-card p{ font-size:15.5px; color:var(--ink); line-height:1.65;
  margin:0; }
.atelier-contact .info-card a{ color:var(--petrol); border-bottom:1px solid transparent; }
.atelier-contact .info-card a:hover{ color:var(--terracotta-deep);
  border-bottom-color:var(--terracotta-deep); }

/* callout rachat (terracotta) */
.atelier-contact .info-card.is-rachat{ background:var(--terracotta); border-color:var(--terracotta); }
.atelier-contact .info-card.is-rachat .ic-ico{ border-color:rgba(251,248,239,.5); }
.atelier-contact .info-card.is-rachat .ic-ico svg{ stroke:var(--paper); }
.atelier-contact .info-card.is-rachat h3{ color:var(--paper); }
.atelier-contact .info-card.is-rachat p{ color:rgba(251,248,239,.92); }

/* ---- colonne formulaire ---- */
.atelier-contact .contact-form{ background:var(--paper); border:1px solid var(--line);
  border-top:4px solid var(--terracotta); padding:34px 38px 38px; }
.atelier-contact .contact-form .form-fields > h3{ font-family:var(--display);
  font-size:28px; color:var(--petrol); margin:0 0 6px; }
.atelier-contact .contact-form .form-intro{ font-size:15.5px; color:var(--muted);
  margin:0 0 26px; }

.atelier-contact .ff-row{ margin-bottom:20px; }
.atelier-contact .ff-row label{ display:block; font-family:var(--label);
  text-transform:uppercase; letter-spacing:.12em; font-size:12.5px; font-weight:600;
  color:var(--petrol); margin-bottom:7px; }
.atelier-contact .ff-row .optional{ color:var(--muted); font-size:11px; letter-spacing:.1em; }

.atelier-contact .ff-row input[type=text],
.atelier-contact .ff-row input[type=email],
.atelier-contact .ff-row input[type=file],
.atelier-contact .ff-row select,
.atelier-contact .ff-row textarea{ width:100%; font-family:var(--body); font-size:15.5px;
  color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:2px;
  padding:12px 14px; transition:border-color .15s, box-shadow .15s; }
.atelier-contact .ff-row textarea{ resize:vertical; min-height:150px; line-height:1.6; }
.atelier-contact .ff-row input:focus,
.atelier-contact .ff-row select:focus,
.atelier-contact .ff-row textarea:focus{ outline:0; border-color:var(--terracotta);
  box-shadow:0 0 0 3px rgba(194,105,62,.15); }
.atelier-contact .ff-row select{ -webkit-appearance:none; appearance:none; cursor:pointer;
  padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A8542E' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; }
.atelier-contact .ff-row input::placeholder,
.atelier-contact .ff-row textarea::placeholder{ color:#a99e8c; }

/* pied de formulaire + bouton */
/* <footer class="form-footer"> est un <footer> → il héritait du style maquette
   `footer{background:petrol-deep;padding:50px 0}` (prévu pour le footer de page)
   → gros bloc vert autour du bouton. On neutralise. */
.atelier-contact .contact-form .form-footer{ margin-top:8px; display:flex; justify-content:flex-end;
  background:none; padding:0; color:inherit; }
.atelier-contact .contact-form .btn-primary{ display:inline-flex; align-items:center; gap:10px;
  background:var(--terracotta); color:var(--paper); border:2px solid transparent;
  font-family:var(--label); text-transform:uppercase; letter-spacing:.14em; font-weight:600;
  font-size:14px; padding:14px 34px; border-radius:2px; cursor:pointer; transition:.15s; }
.atelier-contact .contact-form .btn-primary:hover{ background:var(--terracotta-deep); }
.atelier-contact input[name=url]{ display:none !important; }

/* champ « document joint » : le plugin filestyle masque l'input réel en
   position:absolute mais notre width:100% le pousse hors viewport (overflow
   horizontal fantôme). On le neutralise — le bouton « Choisir un fichier »
   visible reste géré par le plugin. */
.atelier-contact .ff-row input.filestyle{ width:0 !important; min-width:0; padding:0; }
.atelier-contact .ff-row .bootstrap-filestyle.input-group{ max-width:100%; }

/* ---- alertes (theme.css absent ici) ---- */
.atelier-contact .alert{ border:1px solid var(--line); border-left:4px solid var(--petrol);
  background:var(--paper); padding:16px 20px; margin-bottom:24px; font-size:15px; }
.atelier-contact .alert ul{ margin:0; padding-left:18px; }
.atelier-contact .alert-success{ border-left-color:var(--petrol); color:var(--petrol-deep); }
.atelier-contact .alert-danger{ border-left-color:var(--terracotta-deep); color:var(--terracotta-deep); }

/* ---- responsive ---- */
@media(max-width:900px){
  .atelier-contact .contact-grid{ grid-template-columns:1fr; gap:28px; }
  .atelier-contact .contact-hero h1{ font-size:38px; }
  .atelier-contact .contact-form{ padding:26px 22px 30px; }
}

/* tablette / mobile : hero fluide, padding resserré, champs confortables */
@media(max-width:768px){
  .atelier-contact .wrap{ padding:0 20px; }
  .atelier-contact .contact-hero .wrap{ padding:40px 20px; }
  .atelier-contact .contact-hero::after{ inset:10px; }
  .atelier-contact .contact-hero h1{ font-size:clamp(28px,7vw,38px); }
  .atelier-contact .contact-hero .lead{ font-size:16px; }
  .atelier-contact .contact-grid{ padding-top:40px; padding-bottom:52px; }
  .atelier-contact .info-card{ padding:20px; }
}

/* petit mobile : padding minimal, bouton pleine largeur */
@media(max-width:480px){
  .atelier-contact .wrap{ padding:0 16px; }
  .atelier-contact .contact-hero .wrap{ padding:32px 16px; }
  .atelier-contact .contact-grid{ gap:22px; padding-top:32px; padding-bottom:44px; }
  .atelier-contact .contact-form{ padding:22px 16px 26px; }
  .atelier-contact .contact-form .form-fields > h3{ font-size:24px; }
  .atelier-contact .ff-row{ margin-bottom:16px; }
  .atelier-contact .contact-form .form-footer{ justify-content:stretch; }
  .atelier-contact .contact-form .btn-primary{ width:100%; justify-content:center; padding:15px 24px; }
}