/* =========================================================
   12ᵉ feuille — dimensions fluides (pourcentages / vw) et
   habillage du formulaire Contact Form 7
   ========================================================= */

/* =========================================================
   1. FLUIDITÉ — plus de largeurs ni de hauteurs figées en px.
   Les largeurs sont en %, les hauteurs d'images en ratio, les
   respirations en clamp(min, vw, max) : la mise en page suit
   la largeur de l'écran au lieu de marcher par paliers.
   ========================================================= */

/* Sections : retraits fluides (à poser sur les conteneurs de 1er niveau) */
.cq-sect{
  padding-top:clamp(56px,6.5vw,110px)!important;
  padding-bottom:clamp(56px,6.5vw,110px)!important;
  padding-left:clamp(18px,2vw,24px)!important;
  padding-right:clamp(18px,2vw,24px)!important;
}
.cq-sect--haut{padding-bottom:clamp(28px,3vw,50px)!important}
.cq-sect--bas{padding-top:clamp(28px,3vw,50px)!important}

/* Colonne de lecture (pages légales) : largeur relative, jamais en px */
.cq-mesure{max-width:74%!important;margin-left:auto!important;margin-right:auto!important}
@media(max-width:1024px){.cq-mesure{max-width:100%!important}}

/* Cartes du carrousel : une fraction de la piste, plus une largeur fixe.
   --cq-vis = nombre de cartes visibles (décimal = aperçu de la suivante). */
.cq-slide__piste{--cq-vis:3.6;--cq-gap:22px;gap:var(--cq-gap)}
.cq-slide__piste > .cq-pcard{
  flex:0 0 calc((100% - (var(--cq-vis) - 1) * var(--cq-gap)) / var(--cq-vis))!important;
  width:auto!important;
}
@media(max-width:1024px){.cq-slide__piste{--cq-vis:2.3;--cq-gap:18px}}
@media(max-width:767px){.cq-slide__piste{--cq-vis:1.15;--cq-gap:14px}}

/* Visuels des cartes : proportion au lieu d'une hauteur en px */
.cq-pcard__img img{height:auto!important;aspect-ratio:16/10}
.cq-slide .cq-pcard__img img{height:auto!important;aspect-ratio:16/9}

/* Anneaux : diamètre relatif à la section, cercles en % du pseudo-élément
   (closest-side → le rayon vaut la moitié de la largeur, donc 40 % = 40 %
   de la largeur en diamètre). */
.cq-anneaux::after,
.elementor-element-cqcont::after{
  width:118%!important;height:auto!important;aspect-ratio:1!important;
  top:6%!important;
  background:
    radial-gradient(circle closest-side at 50% 50%, transparent 0 calc(39.5% - .5px), var(--cq-anneau) calc(39.5% - .5px) calc(39.5% + .5px), transparent calc(39.5% + .5px)),
    radial-gradient(circle closest-side at 50% 50%, transparent 0 calc(59.5% - .5px), var(--cq-anneau) calc(59.5% - .5px) calc(59.5% + .5px), transparent calc(59.5% + .5px)),
    radial-gradient(circle closest-side at 50% 50%, transparent 0 calc(79.5% - .5px), var(--cq-anneau) calc(79.5% - .5px) calc(79.5% + .5px), transparent calc(79.5% + .5px)),
    radial-gradient(circle closest-side at 50% 50%, transparent 0 calc(99.5% - .5px), var(--cq-anneau) calc(99.5% - .5px) calc(99.5% + .5px), transparent calc(99.5% + .5px))!important;
}

/* Héros : respiration fluide sous la barre */
.cq-hpage{padding-top:calc(var(--cq-header-h) + clamp(70px,9vw,160px))!important}
@media(max-width:1024px){.cq-hpage{padding-top:calc(var(--cq-header-h) + clamp(70px,8vw,110px))!important}}
@media(max-width:767px){.cq-hpage{padding-top:calc(var(--cq-header-h) + 70px)!important}}

/* =========================================================
   2. FORMULAIRE (Contact Form 7)
   Champs bordés, intitulé posé sur la bordure, bouton split.
   ========================================================= */
.cq-form{display:flex;flex-direction:column;gap:clamp(18px,1.8vw,24px)}
.cq-form .wpcf7-form-control-wrap{display:block}

/* Intertitre de groupe */
.cq-form__gr{
  margin:clamp(10px,1vw,16px) 0 0;
  font-family:'Libre Franklin',sans-serif;font-weight:600;font-size:12px;line-height:1;
  letter-spacing:.18em;text-transform:uppercase;color:#E83E33;
  display:flex;align-items:center;gap:14px;
}
.cq-form__gr::before{content:"";flex:none;width:28px;height:1px;background:currentColor}
.cq-form__gr:first-child{margin-top:0}

/* Deux champs par ligne, empilés sous 700 px */
.cq-form__rang{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.4vw,20px)}
@media(max-width:700px){.cq-form__rang{grid-template-columns:1fr}}

/* Champ : l'intitulé chevauche la bordure */
.cq-ch{position:relative;display:block}
.cq-ch__l{
  position:absolute;top:0;left:14px;transform:translateY(-50%);z-index:1;
  padding:0 7px;background:#fff;
  font-family:Roboto,sans-serif;font-size:12.5px;line-height:1;color:#006BCA;
  pointer-events:none;
}
.cq-form input[type=text],
.cq-form input[type=email],
.cq-form input[type=tel],
.cq-form select,
.cq-form textarea{
  width:100%;display:block;
  padding:17px 16px;border:1px solid rgba(42,72,84,.34);border-radius:10px;
  background:#fff;color:#1D1D1B;
  font-family:Roboto,sans-serif;font-size:15.5px;line-height:1.3;
  transition:border-color .25s,box-shadow .25s;
}
.cq-form textarea{min-height:clamp(120px,14vw,190px);resize:vertical}
.cq-form input:focus,
.cq-form select:focus,
.cq-form textarea:focus{
  outline:0;border-color:#006BCA;box-shadow:0 0 0 3px rgba(0,107,202,.12);
}
/* champ en erreur */
.cq-form .wpcf7-not-valid{border-color:#E83E33}
.cq-form .wpcf7-not-valid-tip{
  display:block;margin-top:7px;font-family:Roboto,sans-serif;font-size:13px;color:#E83E33;
}

/* Menu déroulant : chevron maison */
.cq-form select{
  appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232A4854'%3E%3Cpath d='M12 15.5 5.5 9l1.6-1.6L12 12.3l4.9-4.9L18.5 9z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:17px;
}

/* Cases à cocher */
.cq-form__cases .wpcf7-checkbox{display:grid;grid-template-columns:1fr 1fr;gap:12px clamp(14px,1.4vw,24px)}
.cq-form__cases--une .wpcf7-checkbox{grid-template-columns:1fr}
@media(max-width:700px){.cq-form__cases .wpcf7-checkbox{grid-template-columns:1fr}}
.cq-form__cases .wpcf7-list-item{margin:0}
.cq-form__cases label{display:flex;align-items:center;gap:11px;cursor:pointer}
.cq-form input[type=checkbox]{
  appearance:none;-webkit-appearance:none;flex:none;
  width:20px;height:20px;margin:0;border:1px solid rgba(42,72,84,.42);border-radius:5px;
  background:#fff;cursor:pointer;transition:background .2s,border-color .2s;
}
.cq-form input[type=checkbox]:checked{
  background:#006BCA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9.6 16.2 4.8 11.4l1.7-1.7 3.1 3.1 7.9-7.9 1.7 1.7z'/%3E%3C/svg%3E") center/14px no-repeat;
  border-color:#006BCA;
}
.cq-form .wpcf7-list-item-label{font-family:Roboto,sans-serif;font-size:15.5px;color:#2A4854}

/* Consentement */
.cq-form__rgpd{font-family:Roboto,sans-serif;font-size:13.5px;line-height:1.55;color:#626A77}
.cq-form__rgpd .wpcf7-list-item{margin:0}
.cq-form__rgpd label{display:flex;align-items:flex-start;gap:11px}
.cq-form__rgpd a{color:#006BCA}

/* Bouton d'envoi : pilule rouge + cercle flèche, comme les boutons du site */
.cq-form__pied{display:flex;justify-content:flex-end;margin-top:clamp(6px,1vw,14px)}
.cq-envoi{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.cq-envoi input[type=submit]{
  border:0;cursor:pointer;
  background:#E83E33;color:#fff;border-radius:999px;padding:17px 26px;
  font-family:'Libre Franklin',sans-serif;font-weight:600;font-size:13px;line-height:14px;
  letter-spacing:.08em;text-transform:uppercase;
  transition:filter .25s;
}
.cq-envoi::after{
  content:"";flex:none;width:48px;height:48px;border-radius:50%;pointer-events:none;
  background:#E83E33 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M13.2 4.8 20.4 12l-7.2 7.2-1.7-1.7 4.3-4.3H3.6v-2.4h12.2l-4.3-4.3 1.7-1.7z'/%3E%3C/svg%3E") center/15px no-repeat;
  transition:filter .25s;
}
.cq-envoi:hover input[type=submit],.cq-envoi:hover::after{filter:brightness(.92)}
.cq-form .wpcf7-spinner{margin:0 0 0 12px}

/* Messages de réponse */
.wpcf7 form .wpcf7-response-output{
  margin:clamp(16px,2vw,24px) 0 0;padding:15px 18px;border-radius:10px;border-width:1px;
  font-family:Roboto,sans-serif;font-size:14.5px;
}
.wpcf7 form.sent .wpcf7-response-output{border-color:#47A2A4;background:rgba(71,162,164,.08);color:#2A4854}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{border-color:#E83E33;background:rgba(232,62,51,.06);color:#2A4854}

/* Encadré des coordonnées, en face du formulaire */
.cq-coord .elementor-icon-list-item{align-items:flex-start}
.cq-coord .elementor-icon-list-icon{color:#E83E33!important}
.cq-coord .elementor-icon-list-text{
  font-family:Roboto,sans-serif;font-size:15.5px;line-height:1.6;color:#626A77;
}
.cq-coord a{color:#2A4854;text-decoration:none}
.cq-coord a:hover{color:#E83E33}

/* =========================================================
   3. PAGES LÉGALES — texte long lisible
   ========================================================= */
.cq-legal h2{
  font-family:Roboto,sans-serif;font-weight:700;font-size:clamp(20px,1.7vw,26px);
  line-height:1.2;color:#2A4854;margin:clamp(28px,3vw,44px) 0 14px;
}
.cq-legal h3{
  font-family:'Libre Franklin',sans-serif;font-weight:600;font-size:17px;
  color:#2A4854;margin:24px 0 10px;
}
.cq-legal p,.cq-legal li{font-family:Roboto,sans-serif;font-size:15.5px;line-height:1.75;color:#626A77}
.cq-legal p{margin:0 0 14px}
.cq-legal ul{margin:0 0 14px;padding-left:20px}
.cq-legal li{margin-bottom:7px}
.cq-legal a{color:#006BCA}
.cq-legal strong{color:#2A4854}