/* ----------------------------------------------------
   DEVIS – Overrides spécifiques, isolés sous .quote-section
   ---------------------------------------------------- */

/***  Palette & typographie  ***/
:root{
  --ljc-orange: #f7941e;
  --ljc-blue-dark: #00325a;
  --bs-primary: var(--ljc-orange);          /* couleurs utilitaires Bootstrap */
  --bs-body-font-family: 'Open Sans', sans-serif;
}

.quote-section{
  max-width: 980px;
  margin: 0 auto 80px;
  padding: 0 15px;
  font-family: var(--bs-body-font-family);
}
.text-muted {color: #00325a!important;}

/***  Titres & textes  ***/
.quote-section h1{
  font-size: 32px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--ljc-blue-dark);
  margin-bottom: 30px;
}
.quote-section label{
  font-weight: 600;
  text-transform: uppercase;
  font-size: 13px;
  color: #00325a!important;
  padding-bottom: 12px;
}
/* Couleur orange pour le label "Fonctionnalités" */
.quote-section label.orange,
.quote-section .form-label.orange {
  color: var(--ljc-orange) !important; /* équivalent à #f7941e */
}
/***  Inputs  ***/
.quote-section .form-control,
.quote-section .form-select{
  border: 1px solid #d9d9d9;
  border-radius: 0;
  box-shadow: none;
  font-size: 15px;
  padding: .75rem .85rem;
  color: #00325a!important;
}
.quote-section .form-control:focus,
.quote-section .form-select:focus{
  border-color: var(--ljc-orange);
  box-shadow: 0 0 0 .2rem rgba(247,148,30,.25);
}

/* ------------------ CASES & RADIOS – taille plus discrète ------------------ */
.quote-section .form-check-input{
  width: 1em;        /* ↘︎  ~15 px avec votre body-font  */
  height: 1em;       /*      (valeur Bootstrap par défaut) */
  /* Si vous souhaitez encore plus petit :
	 width: .9em; height: .9em; */
}

/* --- Fallback Safari ≤15 (dessin manuel) --- */
@supports (-webkit-appearance:none) and (not (accent-color: var(--ljc-orange))){
  .quote-section .form-check-input{
	width: 1em;
	height: 1em;
  }
  .quote-section .form-check-input:checked::after{
	/* adaptons la coche au nouveau cadre */
	left: 2px; top: 0px;
	width: 4px; height: 7px;
  }
}
  .quote-section .form-check-input:checked{
	background: var(--ljc-orange);
	border-color: var(--ljc-orange);
  }
  .quote-section .form-check-input:checked::after{
	content:"";
	position:absolute;
	left:3px; top:1px;
	width:5px; height:9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
  }
}

/***  Bouton orange  ***/
.quote-section .btn-ljc{
  background: var(--ljc-orange);
  border: none;
  border-radius: 0;
  font-size: 18px;
  padding: .9rem 1rem;
  width: 100%;
  color: #fff;
}
.quote-section .btn-ljc:hover{
  background: #ffa643;          /* légère variation hover */
}

/***  Petites finitions  ***/
.required::after{
  content:" *";
  color:#dc3545;
  font-weight:700;
}
/* -------------------------------------------------
   Taille définitive des checkboxes + radios
   (écrase toutes les règles précédentes)
--------------------------------------------------*/
.quote-section input.form-check-input[type="checkbox"],
.quote-section input.form-check-input[type="radio"]{
  /* Taille exacte 14 px ↔︎ cohérent avec votre typo 15 px */
  width: 14px !important;
  height: 14px !important;

  /* Neutralise toute mise à l’échelle héritée */
  transform: none !important;
  zoom: 1 !important;

  /* Pour Safari/anciennes versions (fallback déjà présent) */
  -webkit-transform: none !important;
  -ms-transform: none !important;
}
/* --- Réduction définitive des cases à cocher / radios -------------------- */
.quote-section input.form-check-input[type="checkbox"],
.quote-section input.form-check-input[type="radio"]{
  /* Taille précise */
  width: 14px !important;
  height: 14px !important;

  /* Annule le padding & la hauteur forcés par pages-style.css */
  padding: 0 !important;
  min-height: 0 !important;

  /* Neutralise tout zoom/transform venu d’ailleurs */
  transform: none !important;
  zoom: 1 !important;
}
/* -----------------------------------------------------------------
   SELECT – police plus petite (valeurs internes & option list)
   -----------------------------------------------------------------*/
.quote-section select.form-select,
.quote-section select.form-select option{
  font-size: 14px;          /* ↘︎  ajustez : 13px, 12px… */
  line-height: 1.3;         /* garde une liste aérée   */
  color: #092945;
}
/* Garantit l’affichage du widget */
.quote-section .g-recaptcha{
  display:block !important;
  margin:0 auto;          /* centre le widget si désiré */
}
/* --- Stabilise le widget reCAPTCHA ------------------------------------ */
.quote-section .g-recaptcha{
  display:inline-block !important;   /* remet le flux normal            */
  transform:none !important;         /* annule tout scale/translate     */
}
.quote-section .g-recaptcha{
  padding:0 !important;
  position:static !important;
}
.quote-section .g-recaptcha{
  margin:0 auto !important;
}
/* 2. Ajouter de l’air autour du formulaire sur mobile */
@media (max-width: 768px){           /* largeur où vous passez en mise en page “téléphone” */
    form{                            /* remplacez par le sélecteur précis de votre formulaire si besoin */
        margin-left: 1rem;           /* ~16 px, ajustez à votre goût */
        margin-right: 1rem;
    }
}
/* ► Téléphone uniquement  (≤ 576 px)  */
@media (max-width: 768px){
    /* cible la rangée : 1 col sur xs, 2 sur sm, 3 sur md, avec l’espacement .g-2 */
    .row.row-cols-1.row-cols-sm-2.row-cols-md-3.g-2{
        /* annule la marge négative par défaut de .row */
        margin-left: 0;
        /* ajoute un petit padding à gauche : ajustez .75rem (≈12 px) à votre goût */
        padding-left: .75rem;
    }
}