/*
-----------------------
* TITLES: h1->h5
-----------------------
*/
h1,
.h1 {
  font-size: 1.6rem;
  font-family: "ExoBold", sans-serif;
  color:#252323;
  margin-bottom: 20px;
  line-height: 2rem;
}

h2,
.h2 {
  font-size: 1.4rem;
  color:#252323;
  font-family: "ExoMedium", sans-serif;
  margin-bottom: 20px;
}


h3,
.h3 {
  font-size: 1.2rem;
  font-family: "ExoMedium", sans-serif;
  color:#252323;
  margin-bottom: 20px;
}

h4,
.h4 {
  font-size: 1rem;
  font-family: "ExoMedium", sans-serif;
  color:#252323;
  margin-bottom: 15px;
}

h5,
.h5 {
  font-size: 0.8rem;
  font-family: "ExoMedium", sans-serif;
  color:#252323;
  margin-bottom: 10px;
}

/*
-------------------------
| cpn-align
-------------------------
*/
.cpn-align--left {
  text-align: left;
}

.cpn-align--center {
  text-align: center;
}

.cpn-align--right {
  text-align: right;
}

/*
-----------------------
* cpn-zIndex
-----------------------
*/
.cpn-zIndex5 {
  z-index: 5;
}

.cpn-zIndex10 {
  z-index: 10;
}

.cpn-zIndex20 {
  z-index: 20;
}

.cpn-zIndex30 {
  z-index: 30;
}

.cpn-zIndex40 {
  z-index: 40;
}

.cpn-zIndex50 {
  z-index: 50;
}

/*
-----------------------
* cpn-pd
-----------------------
*/

.cpn-pd0 {
  padding: 0;
}

.cpn-pd0--force {
  padding: 0 !important;
}


.cpn-pd5 {
  padding: 5px;
}

.cpn-pd10 {
  padding: 10px;
}

.cpn-pd15 {
  padding: 15px;
}

.cpn-pd-h-15 {
  padding: 0 15px;
}

.cpn-pd-v-15 {
  padding: 15px 0;
}


/*
-----------------------
* cpn-mgB
-----------------------
*/

.cpn-mgB0 {
  margin-bottom: 0;
}

.cpn-mgB0--force {
  margin-bottom: 0 !important;
}


.cpn-mgB5 {
  margin-bottom: 5px;
}

.cpn-mgB10 {
  margin-bottom: 10px;
}

.cpn-mgB15 {
  margin-bottom: 15px;
}

.cpn-mgB-h-15 {
  margin-bottom: 0 15px;
}

.cpn-mgB-v-15 {
  margin-bottom: 15px 0;
}



/*
-----------------------
* cpn-Form
-----------------------
*/
.cpn-form {
  width: 100%;
  /* ui/select.js auto-detects the nearest shared ancestor of 2+ selects and bumps its z-index
     to 100 while open (class "ui-select-parent(--active)") — but z-index only has any effect on
     a positioned element, so without this, that bump is silently a no-op and the dropdown
     renders behind whatever form content comes after it in the DOM. */
  position: relative;
}

.cpn-form__row {
  margin-bottom: 12px;
  z-index: auto;
}
.cpn-form__row.cpn-form__row--vertical-align {
  display: flex;
  align-items: center;
}

/* Two (or more) fields sharing one line — e.g. Nom/Prénoms, Sexe/Situation matrimoniale.
   z-index:200 (not just position:relative) because reset.css applies `* { position:relative;
   z-index:5 }` to EVERY element — so this wrapper already has its own stacking context at
   baseline 5 whether we like it or not, and loses to whichever sibling .cpn-form__row comes
   after it: IndexManager (form_module.js) gives each top-level row an explicit, increasing
   z-index (100, 101, 102...) so a row's open dropdown can overlap rows below it, and a row
   several fields down a modal can easily clear 106+. A row-split's *own* z-index has to beat
   the highest such value among its later siblings, no matter how high its select's z-index gets
   boosted internally (bringToFront tops out around 100+rowCount+10) — that boost never escapes
   this wrapper's own stacking context otherwise. 200 comfortably clears any realistic form. */
.cpn-form__row-split {
  display: flex;
  gap: 15px;
  margin-bottom: 12px;
  position: relative;
  z-index: 200;
}
.cpn-form__row-split .cpn-form__row {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.cpn-form__wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  z-index: 10;
}

.cpn-form__footer {
  display: flex;
  flex-wrap: wrap;
}

.cpn-label {
  font-size: 0.8rem;
  line-height: 0.9rem;
  font-family: "EXO2-Medium", sans-serif;
  color: #564334;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  width: 100%;
}

.cpn-label-grp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.cpn-label-grp .cpn-label {
  width: auto;
}

.cpn-label--center {
  justify-content: center;
}

.cpn-label-required {
  font-size: 1rem;
  color: #ff3a3a;
}

.cpn-radio-group {
  display: flex;
  gap: 15px;
}

.cpn-radio-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-family: "EXO2-Medium", sans-serif;
  color: #564334;
  cursor: pointer;
}

.ui-select__option--disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.cpn-radio-option input[type="radio"] {
  accent-color: #8F4E00;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.cpn-phone-field {
  display: flex;
  gap: 8px;
}

.cpn-phone-field__country {
  width: auto;
  min-width: 100px;
  flex-shrink: 0;
}

/* The native <select> above gets swapped for a searchable custom widget (ui/select.js) since
   there are 200+ countries — keep that widget the same fixed width as the native select would be */
.cpn-phone-field .ui-select {
  flex-shrink: 0;
  min-width: 110px;
}

.cpn-phone-field__number {
  flex: 1;
}

.cpn-form__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
  padding-bottom: 15px;
  gap: 15px;
}

.cpn-form .cpn-btn {
  background-color: #FA8D05;
  border: solid 1px #FA8D05;
  color: #ffffff;
  min-width: 140px;
  min-height: 45px;
}

.cpn-form .cpn-btn:hover {
  background-color:  #c66e03;
  border-color: #c66e03;
  color: #ffffff;
}

/*
-------------------------
| cpn-x
-------------------------
*/
.cpn-x{display: flex;justify-content: space-between;flex-wrap:wrap;}
.cpn-x--center {align-items: center;}
.cpn-x__row {margin-bottom: 15px;}
.cpn-x.cpn-x--align-vert-center {align-items: center;}
.cpn-x__1{width: 100%;}
.cpn-x__2{width: calc(50% - 7.5px);}
.cpn-x__3-4{width: calc(67% - 7.5px);  }
.cpn-x__3{width: calc(33.333% - 7.5px);}
.cpn-x__4{width: calc(25% - 7.5px);  }
.cpn-x__--center{margin:auto;}
@media(max-width: 600px) {
  .cpn-x {flex-direction: column;}
  [class*="cpn-x__"] {width: 100%;}
}


/*
-------------------------
| cpn-field
-------------------------
*/

input,
select,
textarea,
.cpn-field {
  display: block;
  width: 100%;
  height: 36px;
  border: solid 1px #897362;
  border-radius: 0.5rem;
  padding: 6px 12px;
  text-align: left;
  border-radius: 4px;
  color: #231a12;
  background-color: #fff8f5;
}

.cpn-field-wrap {
  position: relative;
}

.cpn-field-wrap>i[class^="icon-"] {
  position: absolute;
  left: 8px;
  top: calc(50% - 8px);
  z-index: 10;
}

.cpn-field-wrap>i[class^="icon-"] + .cpn-field {
  padding-left: 30px;
}

.cpn-search-field {
  position: relative;
}

.cpn-search-field > .cpn-icon.icon-search {
  position: absolute;
  z-index: 10;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #897362;
  min-width: 14px;
  min-height: 14px;
  mask-size: 14px 14px;
  pointer-events: none;
}

.cpn-search-field > .cpn-field {
  padding-left: 32px;
}

.cpn-field ::placeholder {
  /*display: inline-block !important;*/
  font-size: 0.75rem;
  color: #90adcf;
}

.cpn-field .cpn-field--error,
.cpn-field.cpn-field--error {
  border-color: #E6402E;
}

.cpn-field .cpn-field--warning {
  border-color: #FAB650;
}

.cpn-field .cpn-field--success {
  border-color: #14C773;
}

.cpn-field--disabled,
.cpn-field:disabled {
  pointer-events:none!important;
  background-color:#74727229!important;
  color: #d8d8d8!important;
  cursor: not-allowed;
}

textarea,
textarea.cpn-field {
  height: 80px;
  resize: none;
}


input[type="file"].cpn-field {
  width: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
  z-index: -5;
  visibility: hidden;
}

/* Same hiding technique as input[type="file"].cpn-field above, but WITHOUT the coupled
   "+ label" 100px placeholder-box styling below — for file inputs whose trigger label should
   look like whatever the caller wants (a cpn-btn button, a plain text link...) instead of that
   fixed box. */
.cpn-field-file-hidden {
  width: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
  z-index: -5;
  visibility: hidden;
}

input[type="file"].cpn-field + label {
  display: block;
  border: solid 1px #8a7362;
  background-color: #fff8f5;
  border-radius: 4px;
  min-height: 100px;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

input[type="file"].cpn-field + label::before {
  content: "Clicker pour choisir une image";
  position: absolute;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 30px;
  left: 0;
  top: calc(50% - 15px);
  transition: all .3s linear;
}

input[type="file"].cpn-field + label:hover::before {
  transform: scale(0.8);
}



/*
-------------------------
| cpn-box-btn
-------------------------
*/

.cpn-box-btn {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border: solid 1px #897362;
  border-radius: 0.5rem;
  min-height: 30px;
  padding: 10px 15px;
}

.cpn-box-btn--white {
  background-color: #fff;
}

.cpn-box-btn--white:hover {
  background-color: #ffdbb6;
  border-color: #f1902c;
}

.cpn-box-btn__title {
  font-size: 1.3rem;
  color: #231A12;
  font-family: "ExoMedium", sans-serif;
  margin-bottom: 5px;
}

.cpn-box-btn__subtitle {
  font-size: 0.875rem;
  color: #564334;
  font-family: "ExoMedium", sans-serif;
  margin-bottom: 5px;
}



/*
-------------------------
| cpn-btn 
-------------------------
*/
.cpn-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 1rem;
  padding: 10px 16px;
  background-color: transparent;
  border-radius: 8px;
  min-height: 35px;
  gap: 8px;
}

.cpn-btn:disabled,
.cpn-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.cpn-btn2 {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.cpn-btn--primary {
  background-color: #FA8D05;
  color: #fff;
}

.cpn-btn--primary>.cpn-icon {
  background-color: #fff;
}

.cpn-btn--primary:hover {
  background-color: #c66e03;
}

.cpn-btn--full {
  width: 100%;
}

.cpn-btn--big {
  width: 100%;
  max-width: 300px;
  height: 50px;
}

.cpn-btn--full.cpn-btn--big  {
  max-width: 100%;
}

.cpn-btn--medium {
  width: 50%;
}

.cpn-btn--blank-orang {
  background-color: transparent;
  border: solid 1px #FA8D05;
  color: #FA8D05;
}

.cpn-btn--blank-orang>.cpn-icon {
  background-color: #FA8D05;
}

.cpn-btn--blank-orang:hover {
  background-color: #FA8D05;
  color: #fff;
}

.cpn-btn--blank-orang:hover>.cpn-icon {
  background-color: #fff;
}


.cpn-btn--blank-red {
  background-color: transparent;
  border: solid 1px #ff3a3a;
  color: #ff3a3a;
}

.cpn-btn--blank-red>.cpn-icon {
  background-color: #ff3a3a;
}

.cpn-btn--blank-red:hover {
  background-color: #ff3a3a;
  color: #fff;
}
.cpn-btn--blank-red:hover>.cpn-icon {
  background-color: #fff;
}

.cpn-btn--blank-green {
  background-color: transparent;
  border: solid 1px #16a34a;
  color: #16a34a;
}

.cpn-btn--blank-green>.cpn-icon {
  background-color: #16a34a;
}

.cpn-btn--blank-green:hover {
  background-color: #16a34a;
  color: #fff;
}

.cpn-btn--blank-green:hover>.cpn-icon {
  background-color: #fff;
}

.cpn-btn--blank-chocolate {
  background-color: transparent;
  border: solid 1px #8F4E00;
  color: #8F4E00;
}

.cpn-btn--blank-chocolate>.cpn-icon {
  background-color: #8F4E00;
}

.cpn-btn--blank-chocolate:hover {
  background-color: #8F4E00;
  color: #fff;
}

.cpn-btn--blank-chocolate:hover>.cpn-icon {
  background-color: #fff;
}

.cpn-btn--chocolate {
  background-color: #8F4E00;
  border: solid 1px #8F4E00;
  color: #f8f8f8;
}

.cpn-btn--chocolate>.cpn-icon {
  background-color: #f8f8f8;
}

.cpn-btn--chocolate:hover {
  background-color: #78480d;
  color: #fff;
}

.cpn-form__btn {
  background-color: #FA8D05;
  color: #fff;
}

.cpn-btn--red,
.cpn-btn.cpn-btn--red {
  background-color: #ff3a3a;
  border-color: #ff3a3a;
  color: #fff;
}

.cpn-btn--red  .cpn-icon,
.cpn-btn.cpn-btn--red  .cpn-icon{
  background-color: #fff;
}

.cpn-btn--empty,
.cpn-btn.cpn-btn--empty {
  background-color: transparent;
  border: solid 1px #FA8D05;
  color: #FA8D05;
}

/*
-------------------------
| cpn-icon-box
-------------------------
*/
.cpn-icon-box {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.cpn-icon-box.cpn-icon-box--fill {
  background-color: #FEEADD;
}

/*
-------------------------
| cpn-scroll-y
-------------------------
*/
.cpn-scroll-y {overflow-y: auto;}
.cpn-scroll-y::-webkit-scrollbar{width: 6px;height: 6px;}
.cpn-scroll-y::-webkit-scrollbar-track{background-color: transparent;}
.cpn-scroll-y::-webkit-scrollbar-track-piece {width: 6px;background-color: #c6cada !important; /* old #50525d*/border-radius: 5px;box-shadow: none;border: none;}
.cpn-scroll-y::-webkit-scrollbar-thumb {width: 30%;height: 6px;background-color: #A8AAB1 !important;outline: none;border-radius: 6px;}


.cpn-filter-field .ui-select  {
  min-width: 130px;
}