/**************************************************************
 Osteo Bordeaux Sud (www.osteo-bordeaux-sud.fr)
 Copyright 2026-2026 Develop'it
 
 Version : 1.0.2
 Date    : 20/03/2026
 Fichier : css/Screen.css
**************************************************************/

@font-face {
  font-family: Quicksand;
  font-display: swap;
  src: url("../webfonts/Quicksand-VariableFont_wght.ttf");
}
@font-face {
  font-family: Nunito;
  font-display: swap;
  src: url("../webfonts/Nunito-VariableFont_wght.ttf");
}

/*************************** General ***************************/
:root {
  --clr-alternate: #ff8154;

  --gradient-primary: linear-gradient(
    135deg,
    hsl(185, 100%, 29%),
    hsl(203, 74%, 61%)
  );

  --gradient-primary-inverse: linear-gradient(
    -45deg,
    hsl(185, 100%, 29%),
    hsl(203, 74%, 61%)
    /* 135deg,
    hsl(168, 35%, 52%),
    hsl(192, 55%, 30%) */
    /* 135deg,
    hsl(185, 28%, 42%),
    hsl(205, 38%, 36%) */
    /* 135deg,
    hsl(185 100% 35%),
    hsl(185 80% 25%) */
  );

  --clr-neutral: 100 10% 50%;
  --clr-primary: 185 100% 29%;
  --clr-secondary: 203 74% 61%;
  --clr-background: 201 0% 100%;
  --clr-foreground: 200 10% 20%;
  --clr-muted-background: 200 20% 96%;
  --clr-muted-foreground: 200 10% 45%;
  --clr-link: 203 74% 61%; /* idem que secondary */
  --clr-link-hover: 8 100% 68%;
}
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  text-rendering: auto;
  box-sizing: border-box;
}
*:focus {
  outline: none;
}
html {
  scroll-behavior: smooth;
  interpolate-size: allow-keywords;
}
body {
  background-color: var(--clr-background);
  font-family: "Nunito", sans-serif;
  font-size: 16px;
  color: hsl(var(--clr-foreground));
}
::selection {
  background: hsl(var(--clr-link) / 0.3);
  /* color: rgba(255, 255, 255, 1); */
}
::-moz-selection {
  background: hsl(var(--clr-link) / 0.3);
  /* color: rgba(255, 255, 255, 1); */
}
p {
  margin-bottom: 1em;
}
a {
  text-decoration: none;
  color: hsl(var(--clr-link));
  transition: all 0.3s ease;
}
a.Discret {
  color: hsl(var(--clr-foreground) / 0.8);
}
a:hover,
a:focus {
  color: hsl(var(--clr-link-hover));
}
/* h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	line-height: 1em;
	margin: 0 0 1em 0;
} */
h1 {
  font-family: "Quicksand";
  font-size: 3.75em;
  line-height: 1;
  font-weight: 800;
  /* margin-top: 1em; */
  margin-bottom: 1em;
  /* color: hsl( var(--clr-foreground) ); */
}
h2 {
  font-family: "Quicksand";
  font-size: 2.25em;
  line-height: 1.5em;
  font-weight: 800;
  text-align: center;
  margin-top: 1em;
  margin-bottom: 0.5em;
}
h3 {
  display: inline-flex;
  font-family: "Quicksand";
  font-size: 1.2em;
  line-height: 1.0em;
  font-weight: 800;
  margin-top: 0em;
  margin-bottom: 0.5em;
}
@media only screen and (max-width:639px) {
  h2 {
    font-size: 2.0em;
  }
}
/* h2 {
	font-family: 'JosefinLight';
	line-height: 1.2em;
	margin-top:1em;
	margin-bottom:1em;
	color:rgba( 229,   0 ,125, 1.0);
	font-size: 31px;
	font-weight:normal;
}
h3 {
	display:inline-block;
	font-family: 'JosefinLight';
	font-weight:normal;
	font-size: 31px;
	margin-top:1em;
	margin-bottom:1em;
	color: rgba( 239, 124,   0, 1.0);
} */
ul,
ol {
  list-style-type: disc;
  margin-bottom: 1.5em;
}
ul li {
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}
ul li ul {
  list-style-type: disc;
  list-style: "- ";
}
ul li ul li {
  font-size: 0.9em;
  margin-top: 0em;
  margin-bottom: 0em;
}

svg.Icone {
  width: 1em;
  height: 1lh;
  margin-right: 0.5em;
  fill: currentColor;
}

@media only screen and (max-width: 639px) {
  /* small */
  h1 {
    margin-top: 0;
  }
}

p.SousTitre {
  text-align: center;
  margin-bottom: 2em;
  color: hsl(var(--clr-muted-foreground));
}

/*************************** section ***************************/
section {
  margin: 0;
  padding: 40px 40px 50px 40px;
}
section.FondCouleur {
  background-color: hsl(var(--clr-muted-background));
}
section.FondPrimaryLight {
  background-color: hsl(185 20% 93%);
}




@media only screen and (max-width: 1023px) {
  /* medium */
  section {
    padding: 20px 10px 40px 10px;
  }
}

@media only screen and (max-width: 639px) {
  /* small */
  section {
    padding: 20px 10px 40px 10px;
  }
}

/*************************** CadreSaisie ********************************/
.CadreSaisie {
  background-color: rgba(254, 254, 254, 1);
  box-shadow: 0px 2px 6px hsl(var(--clr-neutral) / 0.4);
  border-radius: 0.75em;
  padding: 20px;
  margin: 0 auto;
  margin-top: 0px;
  margin-bottom: 20px;
  vertical-align: top;
}

/*************************** CadreInfo ********************************/
.CadreInfo {
  background: var(--gradient-primary-inverse);
  box-shadow: 0px 2px 6px hsl(var(--clr-neutral) / 0.4);
  color:rgba(254,254,254);
  border-radius: 0.75em;
  padding: 20px;
  margin: 0 auto;
  margin-top: 0px;
  /* margin-bottom: 20px; */
  vertical-align: top;
}

/*************************** section ***************************/
form .Erreur {
  border-color: #cc0000;
}
form .ErreurSaisie {
  height: 13px;
  margin-bottom: 4px;
  font-size: 11px;
  line-height: 1.1em;
  color: #cc0000;
}

/*************************** label ***************************/
label {
  margin-top: 10px;
  margin-bottom: 3px;
  font-size: 14px;
  text-align: left;
  position: relative;
  width: 100%;
  /* color: rgba( 0, 82, 160, 1.0 ); */
  color: hsl(var(--clr-primary));
  line-height: 1.5em;
}
label.Obligatoire::after {
  content: " *";
  position: relative;
  /* color:rgba( 250,  100,  50, 0.8); */
  color: hsl(var(--clr-secondary));
}
label + input {
  margin-bottom: 0px;
}

/*************************** buttons ***************************/
button,
input,
select,
textarea,
a.button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
button,
input,
optgroup,
select,
textarea {
  font: inherit;
  color: inherit;
  text-transform: none;
  /* margin-bottom:0 !important; */
  /* margin-top:0.95rem !important; */
}
textarea {
  resize: none;
}

button,
a.button,
[type="button"],
[type="submit"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  padding: 0.65rem 1.5rem;
  margin: 0;
  font-weight: 700;
  background: rgba(2, 81, 143, 1);
  border-radius: 10rem;
  color: rgba(254, 254, 254);
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 300ms ease-out;
  box-shadow: 0 2px 6px hsl(var(--clr-neutral) / 0.5);
}
button:hover,
a.button:hover,
[type="button"]:hover,
[type="submit"]:hover,
button:focus,
a.button:focus,
[type="button"]:focus,
[type="submit"]:focus {
  background-color: rgba(0, 82, 160, 1);
  text-decoration: none;
  box-shadow: 0 2px 6px hsl(var(--clr-neutral) / 0.8);
}

a.button.small {
  border-radius: 10rem;
  font-size: 13px;
  padding: 0.4em 1.5em;
}
button.fit,
html input[type="button"].fit,
input[type="reset"].fit,
input[type="submit"].fit,
[type="button"].fit,
[type="submit"].fit,
a.button.fit {
  width: 100%;
  justify-content: center;
}

button svg,
a.button svg,
[type="button"] svg,
[type="submit"] svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  margin-right: 0.35em;
}


/* button.FondOrange, a.button.FondOrange {	background-color:rgba( 239, 124,   0, 1.0 ); }
button.FondRose, a.button.FondRose {		background-color:rgba( 229,   0 ,125, 1.0 ); }
button.FondVert, a.button.FondVert {		background-color:rgba(  58, 199, 199, 1.0 ); }
button.FondRouge, a.button.FondRouge {		background-color:rgba( 214,  16,  82, 1.0 ); }
button.FondOrange:hover, a.button.FondOrange:hover {	background-color:rgba( 239, 124,   0, 0.2 ); }
button.FondRose:hover, a.button.FondRose:hover {		background-color:rgba( 229,   0 ,125, 0.2 ); }
button.FondVert:hover, a.button.FondVert:hover {		background-color:rgba(  58, 199, 199, 0.3 ); }
button.FondRouge:hover, a.button.FondRouge:hover {		background-color:rgba( 214,  16,  82, 0.2 ); } */

/* a.button > .Complement {
	display:block;
	clear:both;
	color: #fff;
    font-size: 0.75em;
	line-height:0.75em;
} */

/*************************** input ***************************/
input[type="text"],
textarea {
  height: unset;
  padding: 0.75em 1em;
  color: hsl(var(--foreground));
  border-radius: 0.75em;
  border: 1px solid hsl(var(--clr-neutral) / 0.25);
  box-shadow: none;
}

input[type="text"]:focus,
textarea:focus {
  border: 1px solid hsl(var(--clr-primary));
  box-shadow: 0 0 0 2px hsl(var(--clr-primary));
}

/*************************** radio & checkbox ***************************/

/* input[type="checkbox"],
input[type="radio"] {
	-moz-appearance: none;
	-webkit-appearance: none;
	-o-appearance: none;
	-ms-appearance: none;
	appearance: none;
	display: block;
	float: left;
	margin-right: -2em;
	opacity: 0;
	width: 1em;
	z-index: -1;
	background-repeat: no-repeat;
	background-position: center;
}
input[type="checkbox"] + label,
input[type="radio"] + label {
	text-decoration: none;
	color: rgba( 0, 82, 160, 1.0 );
	cursor: pointer;
	display: inline-block;
	font-size: 1.0em !important;
	font-weight: normal;
	padding-left: 2.4em;
	padding-right: 0.75em;
	position: relative;
}
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
	background: rgba(254, 254, 254, 1.0);
	border-radius: 4px;
	border: solid 2px rgba(144, 144, 144, 0.75);
	content: '';
	display: inline-block;
	height: 1.65em;
	left: 0;
	line-height: 1.58125em;
	position: absolute;
	text-align: center;
	top: 0;
	width: 1.65em;
}
input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
	background-color: rgba( 239, 124,   0, 1.0);
	border-color: rgba( 239, 124,   0, 1.0);
	color: rgba( 254, 254,   254, 1.0);
}
input[type="checkbox"]:focus + label:before, input[type="checkbox"]:hover + label:before,
input[type="radio"]:focus + label:before, input[type="radio"]:hover + label:before {
	border-color: rgba( 239, 124,   0, 1.0);
	box-shadow: 0 0 0 1px rgba( 239, 124,   0, 1.0);
	outline: none;
}
input[type="checkbox"] + label:before {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>');
	background-size: 45%;
	border-radius: 4px;
}
input[type="radio"] + label:before {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z" /></svg>');
	border-radius: 100%;
} */

/*************************** bt personnels ********************************/
button.btPrimary,
a.button.btPrimary {
  background: var(--gradient-primary);
}
button.btPrimary:hover,
button.btPrimary:active,
a.button.btPrimary:hover,
a.button.btPrimary:active {
  opacity: 0.9;
}
button.btFondBlanc,
a.button.btFondBlanc {
  background-color: rgba(254,254,254);
  color: hsl(var(--clr-primary));
}
button.btFondBlanc:hover,
button.btFondBlanc:active,
a.button.btFondBlanc:hover,
a.button.btFondBlanc:active {
  opacity: 0.9;
}


/*************************** ResultatAction ********************************/
#ResultatAction {
  position: fixed;
  z-index: 9999;
  top: 15px;
  left: calc(50vw - 17.5%);
  width: 35%;
  height: auto;
  min-width: 300px;
  padding: 20px 30px;
  font-size: 15px;
  color: rgba(254, 254, 254, 1);
  box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}
#ResultatAction.OK {
  background-color: rgba(0, 153, 144, 1);
}
#ResultatAction.KO {
  background-color: rgba(215, 66, 81, 1);
}


/*************************** owl-carousel ********************************/
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next {
  position: absolute;
  aspect-ratio: 1;
  width: 40px;
  padding: 10px;
  /* opacity: 0; */
  background: none;
  /* background-size: cover !important; */
  background-repeat: no-repeat !important;
  background-position: center !important;
  transition: all 0.3s ease;
  color: #fefefe00;
  border-radius: 10em;
  border: 2px solid hsl(var(--clr-neutral) / 0.25);
  line-height: 0;
  background-size: 80%;
}
.owl-carousel.owl-theme .owl-nav .owl-prev {
  left: 0;
  background-image: url("../image/Gauche.svg") !important;
  background-size: 80%;
}
.owl-carousel.owl-theme .owl-nav .owl-next {
  right: 0;
  background-image: url("../image/Droite.svg") !important;
  background-size: 80%;

}
.owl-carousel .owl-nav .owl-prev:hover {
  color: #fefefe00;
  left: 0px;
  border: 2px solid hsl(var(--clr-primary));
  /* opacity: 1; */
}
.owl-carousel .owl-nav .owl-next:hover {
  color: #fefefe00;
  right: 0px;
  border: 2px solid hsl(var(--clr-primary));
  /* opacity: 1; */
}
.owl-theme .owl-nav [class*="owl-"]:hover {
  background-color: #8079be00;
  /* opacity: 1; */
  transform: scale(1.1);
}