body {
     font-family: 'Raleway', sans-serif;
     margin: 0;
     color: var(--text);
     background: #fff;
 }

 /* Boutons (cohérents avec l’index) */
 .button {
     background: var(--secondary-color);
     color: #fff;
     padding: .6rem;
     border: none;
     border-radius: 30px;
     font-weight: 700;
     cursor: pointer;
     transition: .25s ease;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }

 .button:hover {
     background: var(--brand-rose-700);
 }

 .button-outline {
     background: transparent;
     border: 2px solid var(--secondary-color);
     color: var(--secondary-color);
     padding: .6rem;
     border-radius: 30px;
     font-weight: 700;
     cursor: pointer;
     transition: .25s ease;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }

 .button-outline:hover {
     border-color: var(--brand-rose-700);
     color: var(--brand-rose-700);
 }

 /* Layout générique */
 .container {
     max-width: 1100px;
     padding: 0 1.2rem;
     margin: 0 auto;
 }

 section {
     padding: 3rem 0;
 }

 .section-title {
     font-size: 1.8rem;
     margin: 0 0 1rem;
     color: var(--text-dark);
 }

 .section-sub {
     color: var(--muted);
     margin-top: .3rem;
 }

 .section-divider {
     border: none;
     border-top: 2px solid #eee;
     margin: 2.2rem auto;
     width: 84%;
 }

 /* Hero */
 .hero-contact {
     background: var(--primary-color);
     color: white;
     text-align: center;
     padding: 3.5rem 1rem;
 }

 .hero-contact h1 {
     margin: 0 0 .75rem;
     font-size: 2.2rem;
 }

 .confiance-section {
     background-color: #fff;
     padding: 4rem 2rem;
     text-align: center;
 }

 .confiance-container {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 3rem;
     max-width: 1200px;
     margin: auto;
 }

 .confiance-item {
     max-width: 240px;
     flex: 1 1 200px;
 }

 .confiance-icon {
     background-color: #decdbd;
     border-radius: 50%;
     width: 90px;
     height: 90px;
     margin: 0 auto 1rem auto;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .confiance-icon svg {
     width: 50px;
     height: 50px;
     filter: brightness(0) invert(1);
     /* icône blanche */
     fill: #fff;
 }

 .confiance-item h3 {
     font-weight: 700;
     font-size: 1rem;
     margin-bottom: 0.5rem;
     color: #000;
 }

 .confiance-item p {
     font-size: 0.9rem;
     color: #444;
     line-height: 1.4;
 }



 /* Grille contact */
 .contact-grid {
     display: grid;
     grid-template-columns: 1.2fr .8fr;
     gap: 2rem;
     align-items: start;
 }

 /* Formulaire */
 .card {
     background: #fff;
     border: 1px solid #eee;
     border-radius: 14px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
     padding: 1.4rem;
     overflow: hidden;
 }

 /* Surlignage du formulaire pendant 5s */
 .card.form-highlight {
     border-color: var(--brand-rose, #d59a8d) !important;
     box-shadow: 0 0 0 3px rgba(213, 154, 141, .25), var(--shadow, 0 8px 24px rgba(0, 0, 0, .08));
     transition: box-shadow .2s ease, border-color .2s ease;
 }

 .form-row {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     /* au lieu de 1fr 1fr */
     gap: 1rem;
 }

 .form-row>* {
     min-width: 0;
 }


 .form-group {
     margin-bottom: 1rem;
 }

 .form-group label {
     display: block;
     font-weight: 700;
     margin-bottom: .4rem;
     color: var(--text-dark);
 }

 .form-group input,
 .form-group select,
 .form-group textarea {
     width: 100%;
     box-sizing: border-box;
     border: 1.6px solid #ddd;
     border-radius: 10px;
     padding: .85rem 1rem;
     font-family: inherit;
     font-size: 1rem;
     transition: border .2s ease, box-shadow .2s ease;
     background: #fff;
 }

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

 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
     outline: none;
     border-color: var(--secondary-color);
     box-shadow: 0 0 0 3px rgba(213, 154, 141, .15);
 }

 /* --- File input stylé comme un bouton outline de la charte --- */
 .form-group input[type="file"] {
     width: 100%;
     border: 1.6px solid #ddd;
     border-radius: 10px;
     padding: .6rem .7rem;
     /* espace autour du libellé du fichier */
     font-family: inherit;
     font-size: 1rem;
     color: var(--muted, #666);
 }

 /* Bouton "Choisir un fichier" (navigateurs modernes) */
 .form-group input[type="file"]::file-selector-button {
     border: 2px solid var(--brand-rose, #d59a8d);
     background: transparent;
     color: var(--brand-rose, #d59a8d);
     border-radius: 30px;
     padding: .6rem 1rem;
     margin-right: .8rem;
     font-weight: 700;
     cursor: pointer;
     transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .05s ease-in;
 }

 /* Hover / Active */
 .form-group input[type="file"]:hover::file-selector-button {
     background-color: #f7ece7;
     /* léger beige au survol */
     border-color: var(--brand-rose, #d59a8d);
 }

 .form-group input[type="file"]:active::file-selector-button {
     transform: scale(0.98);
 }

 /* État focus accessible */
 .form-group input[type="file"]:focus {
     outline: none;
     border-color: var(--brand-rose, #d59a8d);
     box-shadow: 0 0 0 3px rgba(213, 154, 141, .15);
 }

 /* Fallback WebKit plus ancien (Safari) */
 .form-group input[type="file"]::-webkit-file-upload-button {
     border: 2px solid var(--brand-rose, #d59a8d);
     background: transparent;
     color: var(--brand-rose, #d59a8d);
     border-radius: 30px;
     padding: .2rem .8rem;
     margin-right: .8rem;
     font-weight: 700;
     font-size: .8rem;
     cursor: pointer;
     transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .05s ease-in;
 }

 .form-group input[type="file"]:hover::-webkit-file-upload-button {
     background-color: #f7ece7;
 }

 /* Désactivé (si besoin) */
 .form-group input[type="file"]:disabled::file-selector-button,
 .form-group input[type="file"]:disabled::-webkit-file-upload-button {
     opacity: .5;
     cursor: not-allowed;
 }

 /* Erreurs de formulaire */
 .form-group.error input,
 .form-group.error select,
 .form-group.error textarea {
     border-color: #d62828 !important;
     box-shadow: 0 0 0 3px rgba(214, 40, 40, .12) !important;
 }

 .form-group .error-text {
     margin-top: .35rem;
     font-size: .9rem;
     color: #b00020;
 }

 .consent.error {
     border: 1.6px solid #d62828;
     border-radius: 10px;
     padding: .6rem .8rem;
     background: #fff7f7;
 }

 /* petit confort visuel quand on revient corriger */
 .form-group.valid input,
 .form-group.valid select,
 .form-group.valid textarea {
     border-color: #4caf50;
     box-shadow: 0 0 0 3px rgba(76, 175, 80, .12);
 }
 
 .help-text {
     font-size: .9rem;
     color: var(--muted);
     margin-top: .25rem;
 }

 .consent {
     display: flex;
     gap: .6rem;
     align-items: flex-start;
     font-size: .95rem;
     color: #555;
     margin: .2rem 0 1rem;
 }

 .consent input {
     transform: translateY(.2rem);
 }

 .form-actions {
     display: flex;
     gap: .8rem;
     align-items: center;
     flex-wrap: wrap;
 }

 .form-actions .status {
     color: #2e7d32;
     font-weight: 700;
     display: none;
 }

 .form-actions .status.error {
     color: #b00020;
 }

 /* Colonne infos */


 .info-card {
     padding: 1rem 1.2rem;
     border-radius: 14px;
     background: var(--third-color);
     border: 1px solid #efdcc8;
 }

 .infos h3 {
     margin: .1rem 0 .6rem;
 }

 .contact-list {
     display: grid;
     gap: .35rem;
 }

 .contact-list a {
     color: var(--text);
     text-decoration: none;
 }

 .contact-list a:hover {
     text-decoration: underline;
 }

 .map {
     overflow: hidden;
     border-radius: 10px;
     border: 1px solid #eee;
 }

 .map iframe {
     width: 100%;
     height: 260px;
     border: 0;
     display: block;
 }

 /* B2B */
 .b2b {
     background: #fff;
     border: 1px solid #eee;
     border-radius: 14px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
     padding: 1.2rem 1.4rem;
 }

 .b2b p {
     margin: .4rem 0 1rem;
     color: var(--muted);
 }

 /* FAQ minimaliste */
 /* Carte / container comme sur la fiche produit */
.faq-accordion{
  background:#fff;
  border:1px solid #eee;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  padding:1.1rem 1.3rem;
}

/* Items */
.faq-item + .faq-item{ border-top:1px dashed #eee; }
.faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  padding:.85rem 0;
  list-style:none;
  cursor:pointer;
  font-weight:700;
  color:var(--text-dark);
}
.faq-item summary::-webkit-details-marker{ display:none; }

/* Chevron animé */
.faq-chevron{
  width:18px;height:18px;
  color:#b8a398; /* beige/gris de ta charte */
  flex:0 0 auto;
  transition:transform .25s ease;
}
.faq-item[open] .faq-chevron{ transform:rotate(180deg); }

/* Contenu avec ouverture fluide */
.faq-content{
  overflow:hidden;
  max-height:0;
  transition:max-height .3s ease;
}
.faq-item[open] .faq-content{ max-height:500px; }

.faq-content p{
  margin:.15rem 0 .9rem;
  color:var(--muted);
  line-height:1.55;
}

/* Petits effets d’état */
@media (hover:hover){
  .faq-item:hover summary{ color:#000; }
}

/* Actions */
.faq-actions{
  margin-top:1rem;
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
}


 /* Modale poser une question */
 .modal {
     position: fixed;
     inset: 0;
     display: none;
     place-items: center;
     z-index: 9999;
     background: rgba(0, 0, 0, .5);
 }

 .modal.active {
     display: grid;
 }

 .modal .modal-card {
     background: #fff;
     border-radius: 16px;
     width: min(560px, 92vw);
     box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
     padding: 1.2rem 1.2rem 1.3rem;
     position: relative;
 }

 .modal .close {
     position: absolute;
     top: .8rem;
     right: .9rem;
     background: transparent;
     border: none;
     font-size: 1.6rem;
     cursor: pointer;
     color: #777;
 }

 /* nouveau wrapper bi-colonne + colonnes internes */
 .contact-grid--twocols {
     display: grid;
     grid-template-columns: 1.2fr .8fr;
     /* gauche plus large (B2B + form) */
     gap: 2rem;
     align-items: start;
 }

 .col-left,
 .col-right {
     display: flex;
     flex-direction: column-reverse;
     gap: 1rem;
 }

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

 /* RWD */
 @media (max-width: 900px) {

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

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