/* framework.css */

/* ------------------ */
/* VARIABLES GLOBALES */
/* ------------------ */

/*
Préfixe et usage

.el-     
Décris un élément HTML ou composant visuel distinct (ex. el-btn, el-card, el-image, el-blocsouspage)

.mod-
Appliquer une variation ou un style alternatif sur cet élément (ex. mod-large, mod-outline)

.ctx-
Créer un contexte qui influence ses enfants (ex. ctx-dark, ctx-form)

.is-
Représenter un État dynamique (ex. is-active, is-disabled, is-open...)

*/


/*

Au niveau des sheme de coouleur
text
background
foregrpoung
border
accent

*/

:root {
  --font_base: 'Helvetica Neue', sans-serif;
  --font_heading: 'Georgia', serif;
  

  --line-height-base: 1.6;

  --radius_sm: 0.5em;
  --radius_md: 1em;
  --radius_lg: 2em;
  
  
  
  --form_radius : 8px;
  --form_border_size : 1px;
  --default_radius : 8px;
  --radius_modal: 16px;

  --default_padding : 1em;
  
  /* //Palette de couleur default; */
  --color_primary: #DB5028;
  --color_primary-dark: #8b3017; /* version foncée */
  --color_primary-light :#e99780;
  
  --color_secondary: #453b3a;
  --color_secondary_dark: #0d0b0b; 
  --color_secondary_light: #7c6a68; 
  
  
  /* Thème clair */
  --bg_color: #ffffff;
  --text_color: #333333;
  --componement_color : var( --color_primary );
  --accent_color: var(  --color_secondary );
  
  
  --image_ratio : 2/1;
  
  /* Devrait utiliser image_ratio plutot que padding-bottom */
  --image_padding_bottom : 50%;
  
  /* //Default SwiperColor */
  --swiper-theme-color : var( --color_secondary );
}


/* ex :theme sur le body */
[data-theme="dark"] {
  --color-bg: #1a1a1a; 
/* 
Prévoir alors toute les nouvelle pallette de couleur possible?
Bleu foncé devient X
 */
}

/* ------------- */
/*  accordion   */
/* ------------- */

.accordion-item {
  border-bottom: 1px solid #ccc;
}

.accordion-header {
  all: unset;
  cursor: pointer;
  display: block;
  width: 100%;
  padding: 1em;
  font-weight: bold;
  background-color: #f5f5f5;
  transition: background-color 0.2s;
}

.accordion-header:hover {
  background-color: #e0e0e0;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 1em;
  font-size: 0.9em;
}

.accordion-item.active .accordion-content {
  max-height: 300px; /* ajustable */
  padding: 1em;
}
/* ------------- */
/*  COLOR   */
/* ------------- */

.ctx_back-primary-color {
  background: var(--color_primary);
  color: var(--color-text-inversed);
}



.ctx_back_secondary_color {
  background: var(--color_secondary);
  color: var(--color-text-inversed);
}


.mod_back_primary_color {  
--bg_color: var(--color_primary); 
background : var(--bg_color);
}
.mod_back_primary_color.dark { 	--bg_color : var(--color_primary-dark); }
.mod_back_primary_color.light { 	--bg_color : var(--color_primary-light); }

.mod_back_secondary_color { 	
--bg_color: var(--color_secondary); 
background : var(--bg_color);
}

.mod_back_secondary_color.light { 	--bg_color : var(--color_secondary_light);}
.mod_back_secondary_color.dark {   --bg_color : var(--color_secondary_dark);}

.mod_back_color_accent { --bg_color : var(--accent_color); }


.mod_primary_color {   color : var(--color_primary); }
.mod_primary_color.dark { 	color : var(--color_primary-dark); }
.mod_primary_color.light { 	color : var(--color_primary-light); }

.mod_secondary_color { 	
  color : var(--color_secondary);
  --text_color:var(--color_secondary);
}

.mod_secondary_color_light { 	color : var(--color_secondary_light);}
.mod_secondary_color_dark {   color : var(--color_secondary_dark);}

.mod_color_accent { color : var(--accent_color); }



.mod_text_md {
  font-size: 1.5em;
}

.mod_text_lg {
  font-size: 2.5em;
}
/* ------------- */
/* LAYOUT   */
/* ------------- */


.full-height {
  height: 100vh;
}
.full-width {
  width: 100vw;
}

.full-screen {
  width: 100vw;
  height: 100vh;
}


.mod_square {
	aspect-ratio: 1 / 1;
	overflow: visible;
}
.mod_padding_lg {
	padding: calc( var(--default_padding) * 3 );
}
.mod_padding_md  {
	padding: calc( var(--default_padding) * 1.5 );
}



.mod_radius_lg {
	border-radius:var(--radius_lg);
}

.mod_radius_md {
	border-radius:var(--radius_md);
}
.mod_radius_sm {
	border-radius:var(--radius_sm);
}

.is_scrollable { overflow-y: scroll; }

.mod_vertical_center {
  display: flex;
  align-items: center;
      
}
/* ------------- */
/* TYPOGRAPHIE   */
/* ------------- */

body {
  font-family: var(--font_base);
  /* font-size: var(--font_size-base); */
  line-height: var(--line-height-base);
  color: var(--text_color);
  background-color: var(--color-bg);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-x: scroll;
}
*:not(body) {
  color: var(--text_color, inherit);
  text-wrap: balance;
}

[class^="ctx_"], [class*=" ctx_"] {
  color: var(--text_color, inherit);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font_heading);
  margin: 0 0 0.5em 0;
  line-height: 1.2;
  font-weight:100;
}
h1,h2 { 
  --text_color: var(--componement_color, inherit); 
  /* color : var(--componement_color, inherit);  */
}

h1 { font-size: 3em; }
h2 { font-size: 2.25em; }
h3 { font-size: 1.75em; }
h4 { font-size: 1.25em; }


.mod_text-md { font-size: 1.15em; }
.mod_text-lg { font-size: 2em; }

.mod_text_right { text-align: right;}
.mod_text_center { text-align: center;}
.mod_text_left { text-align: left;}


a:link, a:visited, a:active { 

  text-decoration: none;
}



a:hover {
  color:var(--accent_color);
  text-decoration: underline;
}

/* p { margin: 1em 0px;} */
/* p + p { margin-bottom: 1em;} */
p + * { margin-top: var(--font-size-base); }
p + p { margin-bottom: 1em; margin-top: 1em;}
em { font-style: italic; }
sup { text-transform: lowercase!important; }




/* ---------- */
/* RESET MAISON  */
/* ---------- */


figure { margin: 0px; }
figure img { display: block;}
img  {  max-width: 100%; }
html {  scroll-behavior: smooth; }
*:focus {   outline: none; }

/* //Rset de la valeur defaut de 1em; */

/* ---------- */
/* FORM ET BUTTON    */
/* ---------- */

.ctx_form {
  --text_color: black;
  --bg_color: white;
  --componement_color: gray;
  --form_radius: 8px;
  --form_border_size: 1px;
}

.ctx_form input,
.ctx_form textarea {
  display: inline-block;
  padding: 0.5em 1em;
  border-radius: var(--form_radius);
  border: var(--form_border_size) solid var(--componement_color);
  background: var(--bg_color);
  color:var(--text_color);
  margin: 0.5em 0;
  box-sizing: border-box;
  max-width: 100%;
}

.ctx_form input::placeholder,
.ctx_form textarea::placeholder  {
 color:var(--text_color);
 opacity: 0.5;
}
.ctx_form textarea {
  border-radius: calc(var(--form_radius) / 1 );
}

.ctx_form label {
  display: block;
  font-size: 0.8em;
  /* line-height: 1.2em; */
}




.ctx_form .select-style {
  appearance: none;           /* Supprime le style natif */
  -webkit-appearance: none;
  -moz-appearance: none;
  
  background-color: var(--bg_color);
  color:var(--text_color);
  border: var(--form_border_size) solid var(--componement_color);
  border-style: solid;

  border-radius: var(--form_radius);
  padding: 0.4em 1.75em 0.35em 0.75em;
  font-size: 0.9rem;
  line-height: 1.5;

  cursor: pointer;
  position: relative;
}

.ctx_form .select-style:focus {
  outline: none;

}




.btn {
  display: inline-block;
  padding: 0.5em 1em;
  border-radius: var(--form_radius);
 
  /* font-weight: 300; */
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  margin:0.5em 0.5em 0.5em 0;
  /* margin-right: 0.5em; */
  background: var( --componement_color); 
  border: var(--form_border_size) solid var(--componement_color);  
  transition: background-color 0.2s ease, color 0.2s ease;
  /* color:var(--btn-color-text, white); */
  color:var(--bg_color);
}

.btn-underline {
   padding: 0.15em 0em;
  border-radius: 0px;
  color: var(--componement_color, var(--color_primary));
   background-color: transparent;
 border: none;
  border-bottom : var(--form_border_size) solid var(--componement_color);  

}



.btn-outline {
  background-color: transparent;
  color: var(--componement_color, var(--color_primary));
  border-color : var(--componement_color,var(--color_primary));
}


.btn:hover {
  background-color: var(--accent_color, color-mix(in srgb, var(--componement_color) 70%, black));
  border-color : var(--accent_color, color-mix(in srgb, var(--componement_color) 70%, black));
  /* color:var(--btn-color-text-hover, white);  */
  color:var(--bg_color);
  text-decoration: none;
}

.btn-outline:hover {
  background-color:  var(--componement_color, var(--color_primary));
  border-color : var(--componement_color,var(--color_primary));  
  color: var(--bg_color);
}
.btn-underline:hover {
   background-color: transparent;
   color: var(--accent_color);
}



.ctx_form input:disabled, 
.ctx_form button:disabled, 
.ctx_form select:disabled,
.ctx_form .disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: not-allowed;
}



/* ----------------- */
/* LAYOUT / CONTAINERS */
/* ----------------- */

.el-modal {
  border-radius: var(--radius_modal);
  text-align: center;
}

.mfp-content { text-align: center; }
/* .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.grid {
  display: grid;
  gap: 1rem;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); } */

/* --------------------- */
/* UTILITAIRES RAPIDES   */
/* --------------------- */

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

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }

.p-1, .padding1 { padding: 0.5rem; }
.p-2, .padding2 { padding: 1rem; }
.p-3, .padding3 { padding: 2rem; }
.p-4, .padding4 { padding: 4rem;}
.p-4, .padding4 { padding: 6rem;}

.d-block { display: block; }
.d-inline { display: inline; }
.d-flex { display: flex; }

.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }

.rounded { border-radius: var(--radius_md); }

.same_height.containter12, .same_height .containter12 {
	align-items : stretch;
}



/* Helpers typographiques */
.text-center { text-align: center; }
.text-uppercase { text-transform: uppercase; }
.text-bold { font-weight: 700; }

/* Helpers spacing */
.mt-sm { margin-top: var(--space-sm); }
.p-md { padding: var(--space-md); }

/* Helpers display */
.flex { display: flex; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.flex-end { justify-content: flex-end;}

.flex-box-column{
  display:flex;
  flex-direction:column;
}



/* Helpers layout */
.w-full { width: 100%; }
.h-full { height: 100%; }


.padding5 { padding-top : 7%; padding-bottom: 7%; }

.mod_mt_lg { margin-top: var(--maring_ref,200px); }
.mod_mb_lg { margin-top: var(--maring_ref,200px); }

/* Remplacer par .small medium
.pad10 {
  padding: 1em; box-sizing: border-box; }

.pad20 {
  padding: 2em; box-sizing: border-box; }


/* Ajouter d'autres blocs au besoin */

/* --------------------- */
/* Animation   */
/* --------------------- */

.scroll-down{

  display:block;
  width:50px;
  height:60px;
  margin-top:auto;
  background-image:url('/images/ScrollDown White.png');
  background-size:contain;
  background-position:center center;
  background-repeat:no-repeat;
  z-index:1;
  text-decoration:none;
  animation:scroll-down_move 2s ease-out infinite;
  margin-bottom: 15vw;
  margin-top: 0px;
}
@keyframes scroll-down_move{
  0% { transform: translateY(0); }
  50% {	transform: translateY(10px);}
}



/* --------------------- */
/* Animation   */
/* --------------------- */
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}