/* CONTACT PAGE — scopé pour éviter tout conflit */
:root{
  --contact-bg:#FFF8EC;
  --contact-ink:#0f172a;
  --contact-muted:#6b7280;
  --contact-green: var(--fp-accent, #0A7A4B);
  --contact-border:#e5e7eb;
  --contact-card:#ffffff;
  --fp-accent: #0a7a4b;    /* vert accent / progress bar */
}

.btn-outline-green{ 
    background: transparent!important;
    color: var(--fp-accent)!important;
    border: 1.5px solid var(--fp-accent)!important;

}

.btn-outline-green:hover{ 
  background: rgba(10,122,75,.06)!important; 
}

.contact-breadcrumbs{
  max-width:1200px;margin:14px auto 0;padding:0 20px;font-size:14px;color:var(--contact-muted);
}
.contact-breadcrumbs ol{list-style:none;display:flex;gap:8px;margin:0;padding:0}
.contact-breadcrumbs li+li:before{content:"/";margin-right:8px;color:#c0c4cc}
.contact-breadcrumbs a{color:inherit;text-decoration:none}

.contact-hero{padding:clamp(26px,4vw,50px) 0 0;background:var(--contact-bg)}
.contact-hero .ch-wrap{
  max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,32px);
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,4vw,40px);align-items:center
}
@media (max-width:992px){.contact-hero .ch-wrap{grid-template-columns:1fr}}
.ch-eyebrow{text-transform:uppercase;letter-spacing:.08em;font-weight:700;font-size:.8rem;color:var(--contact-green)}
.ch-title{font-weight:800;line-height:1.1;font-size:clamp(30px,5vw,56px);color:var(--contact-green);margin:.25rem 0 .5rem}
.ch-sub{color:var(--contact-muted);font-size:1.05rem}
.ch-sub .rating{display:inline-flex;gap:.35rem;align-items:center;padding:.35rem .6rem;margin-left:.35rem;border:1px dashed var(--contact-green);border-radius:999px;color:inherit;text-decoration:none}
.ch-sub .rating i{color:#fbbf24}
.ch-illu img{width:100%;max-width:560px;border-radius:20px;display:block;margin-left:auto;object-fit:cover;aspect-ratio:3/2;box-shadow:0 10px 26px rgba(0,0,0,.08)}
@media (max-width:992px){.ch-illu img{margin:4px auto 0;max-width:420px}}

.contact-main{padding:clamp(22px,4vw,44px) 0;background:var(--contact-bg)}
.contact-main .cm-wrap{
  max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,32px);
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(18px,3vw,32px)
}
@media (max-width:992px){.contact-main .cm-wrap{grid-template-columns:1fr}}

.cm-card{background:var(--contact-card);border:1px solid var(--contact-border);border-radius:16px;box-shadow:0 10px 24px rgba(0,0,0,.05);padding:clamp(16px,2.4vw,22px)}
.cm-card>h2{display:flex;align-items:center;gap:.6rem;margin:0 0 .8rem;font-size:1.2rem}
.cm-card>h2 i{color:var(--contact-green)}

.hp-field{position:absolute;left:-9999px;opacity:0}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

.btn{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;cursor:pointer;padding:.9rem 1.25rem;border-radius:12px;font-weight:700;border:1.5px solid transparent;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease,border-color .15s ease}
.btn-green{background:var(--contact-green);color:#fff;border-color:var(--contact-green);box-shadow:0 8px 22px rgba(10,122,75,.18)}
.btn-green:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(10,122,75,.24)}

.btn-ghost{background:transparent;color:var(--contact-green);border-color:var(--contact-green)}
.btn-ghost:hover{background:rgba(10,122,75,.06)}
.is-busy{opacity:.7;pointer-events:none}
.form-note{margin-top:6px;color:var(--contact-muted);font-size:.9rem}
.django-messages{list-style:none;margin:10px 0 0;padding:0}
.msg{padding:10px 12px;border-radius:10px;border:1px solid var(--contact-border);background:#fff}
.msg.success{border-color:#16a34a1a;background:#f0fdf4}




/* =========================================================
   Contact — “Carte + Infos”
   Design moderne : 2 panneaux en grille, coins arrondis, ombres douces
   Palette : utilise les variables si elles existent déjà dans ton thème
   ========================================================= */

:root{
  --brand: #0f6a42;           /* vert principal */
  --ink:   #0f172a;           /* texte primaire */
  --muted: #6b7280;           /* texte secondaire */
  --card:  #ffffff;           /* fond de carte */
  --beige: #faf4ea;           /* fond de section si besoin */
  --rad:   18px;              /* rayon des cartes */
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --shadow-lg: 0 16px 36px rgba(0,0,0,.10);
}

/* Conteneur deux colonnes (info + carte) */
.contact-split{
  display: grid;
  grid-template-columns: 1fr 1.2fr; /* info un peu plus petite que la carte */
  gap: 22px;
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
}

/* Panneaux génériques */
.contact-split .card{
  background: var(--card);
  border-radius: var(--rad);
  box-shadow: var(--shadow);
  overflow: hidden;
}




 
/* 2) Custom file */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.file-row {
  display: flex; align-items: center; gap: .75rem;
}

.file-chosen {
  color: #6b7280; font-size: .95rem;
}

/* Bouton outline déjà présent, on renforce un peu pour ce contexte */
.btn.btn-outline-green {
  background: #fff;
  border: 1px solid #16a34a;
  color: #0f5132;
  padding: .55rem .8rem;
  border-radius: .6rem;
}
.btn.btn-outline-green:hover { background:#f0fff4; }

/* 3) Petits ajustements de la grille si nécessaire */
.contact-form .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
@media (max-width: 780px){
  .contact-form .grid { grid-template-columns: 1fr; }
}

 




/* ===== Contact form – grille & champs uniformes ===== */
.contact-form *{ box-sizing: border-box; }

.contact-form .contact-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  column-gap: 24px; row-gap: 16px;
  align-items:start; justify-items:stretch;
}

/* Un field = label + contrôle plein large */
.contact-form .field{ width:100%; }
.contact-form .field-textarea{ grid-column: 1 / -1; }

.contact-form label{
  display:block; margin:0 0 6px; font-weight:600; font-size:.95rem;
}

/* Tous les inputs/textarea ont la même base */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="number"],
.contact-form input[type="search"],
.contact-form textarea,
.contact-form .ctrl{
  display:block; width:100%;
  min-height:44px; padding:12px 14px;
  border:1px solid #e5e7eb; border-radius:12px;
  background:#fff; color:#111827;
  font:15px/1.3 system-ui,Segoe UI,Roboto;
  transition: border-color .15s ease, box-shadow .15s ease;
  appearance:none;
}
.contact-form textarea{ min-height:140px; resize:vertical; }

.contact-form input:focus,
.contact-form textarea:focus{
  border-color:#10b981;
  box-shadow:0 0 0 3px rgba(16,185,129,.15);
}

/* Captcha : libellé à gauche, question à droite (pilule) */
.contact-form .label-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:6px;
}
.contact-form .badge{
  display:inline-block; padding:4px 10px; border-radius:999px;
  background:#111827; color:#fff; font-weight:700; font-size:13px;
}

/* File input aligné + nom du fichier */
.contact-form .field-file .file-row{
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
}
.contact-form .file-chosen{ color:#6b7280; font-size:.95rem; }
.contact-form input[type="file"]{ font:14px system-ui; }
.contact-form input[type="file"]::file-selector-button,
.contact-form input[type="file"]::-webkit-file-upload-button{
  border:1px solid #e5e7eb; border-radius:10px; padding:8px 10px; margin-right:10px;
  background:#f9fafb; cursor:pointer;
}

/* Pleine largeur pour "Pièce jointe" et "Vérification anti-spam" */
.contact-form .field-file,
.contact-form .field-captcha{
  grid-column: 1 / -1;                /* occupe les 2 colonnes */
}

/* Les contrôles eux-mêmes prennent 100% */
.contact-form .field-captcha input[type="text"],
.contact-form .field-file input[type="file"]{
  width: 100%;
  max-width: 100%;
}

/* File input : on garde 100% sans doublon d’affichage */
.contact-form .file-chosen{ display:none; }   /* retire la ligne "0521.mp4" en plus */

/* (optionnel) meilleure ligne captcha: label + badge sur une seule ligne */
.contact-form .label-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}

.mt {
  margin-top: 1rem;
}

/* Responsive : 1 colonne */
@media (max-width: 768px){
  .contact-form .contact-grid{ grid-template-columns: 1fr; }
}







/* --- TOASTS --- */
.toast-wrap{
  position: fixed; top: 16px; right: 16px; z-index: 9999;
  display: grid; gap: 10px; pointer-events: none;
}
.toast{
  min-width: 280px; max-width: 420px;
  background: #111827; color: #fff; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  padding: 12px 14px; font: 15px/1.35 system-ui,Segoe UI,Roboto;
  transform: translateY(-8px); opacity: 0; animation: toast-in .25s ease forwards;
  pointer-events: auto;
}
.toast--success{ background:#059669; }  /* vert */
.toast--error{ background:#dc2626; }    /* rouge */
.toast--info{ background:#111827; }
.toast-close{
  border:0; background:transparent; color:#fff; opacity:.8; cursor:pointer;
  float:right; font-size:16px; line-height:1;
}
@keyframes toast-in { to { transform: none; opacity: 1; } }



/* =========================================================
   Contact — FAQ (accordion)
   Accessible (native <details>), look moderne, animations douces
   ========================================================= */

:root{
  --faq-card: #ffffff;
  --faq-ink:  #0f172a;
  --faq-muted:#6b7280;
  --faq-brand:#0f6a42;
  --faq-rad:  16px;
  --faq-shadow: 0 10px 26px rgba(0,0,0,.08);
}

.contact-faq{ margin-top: 32px; }
.faq-wrap{ max-width: 980px; margin-inline: auto; }

.faq-head h2{
  margin: 0;
  font: 800 28px/1.15 Inter,system-ui,sans-serif;
  letter-spacing: .2px;
  color: var(--faq-ink);
}
.faq-sub{
  margin: 6px 0 14px;
  color: var(--faq-muted);
  font-size: 15px;
}

/* Liste */
.faq-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.faq-li{ margin: 0; }

/* Carte FAQ */
.faq{
  background: var(--faq-card);
  border-radius: var(--faq-rad);
  box-shadow: var(--faq-shadow);
  overflow: clip; /* évite l’overflow lors de l’anim */
  border: 1px solid #eef2f6;
}

/* En-tête de question */
.faq-summary{
  list-style: none;
  display: grid;
  grid-template-columns: 40px 1fr 22px;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}
.faq-summary::-webkit-details-marker{ display: none; } /* remove default marker */

.faq-icon{
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(15,106,66,.08);
  color: var(--faq-brand);
  display: grid; place-items: center;
  font-size: 17px;
}

.faq-q{
  font: 700 16px/1.25 Inter,system-ui,sans-serif;
  color: var(--faq-ink);
}
.faq-caret{
  color: var(--faq-muted);
  transition: transform .2s ease;
}

/* Corps de réponse */
.faq-content{
  padding: 0 16px 14px 68px; /* aligné sous le texte, pas l’icône */
  color: var(--faq-ink);
  font-size: 15px;
  line-height: 1.55;
  opacity: .95;
  animation: faq-reveal .22s ease;
}

/* État ouvert : fait pivoter le chevron */
.faq[open] .faq-caret{ transform: rotate(-180deg); }

/* Petite anim d’apparition */
@keyframes faq-reveal{
  from{ opacity: 0; transform: translateY(-2px); }
  to  { opacity: 1; transform: translateY(0); }
}

/* Hover : légère élévation visuelle */
.faq-summary:hover{
  background: #f9fafb;
}

/* Responsive */
@media (max-width: 520px){
  .faq-summary{
    grid-template-columns: 32px 1fr 20px;
    padding: 12px 14px;
  }
  .faq-icon{ width: 32px; height: 32px; border-radius: 8px; font-size: 15px; }
  .faq-q{ font-weight: 700; font-size: 15px; }
  .faq-content{ padding: 0 14px 12px 58px; font-size: 14px; }
}



.contact-form .errorlist { display: none !important; }