/*
COLORS:
#FFFFFF : White
#000000 : Black
#4D804D : Green of the Logo ()
#BB8E11 : Gold of the Logo (AA only for Large Text, Graphical Object and User Interface Components)
#DDDDDD : Grey Footer and background of the site

#1f3044 : p, li, a





#1460AA or #126bb7 : Blue background color, Logo
#000000 : Black : h1, h2, h3, h4, h5, h6
#DDDDDD : Grey : footer background-color
*/

/*** FONT ***/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i);

/*** STYLE ***/
* {
	position:relative;
	box-sizing:border-box;
}
html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent
}
body {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.75;
  color:#1f3044;
  text-align: left;
  background-color: #DDDDDD;
  /*background:url(../media/background_2.jpg) left 0 no-repeat fixed;
  background-size: cover;*/
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
  margin: 0
}
body, html { height: 100%; }

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }

h1, h2, h3, h4, h5, h6 {
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-family: Open Sans, Helvetica, Arial, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: #000000;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
h6 { font-size: .875rem; }

p, li {
  font-family: Open Sans, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75rem;
  color: #1F3044;
  text-align: left;
  margin: 0;
}

p {padding-bottom:1em;}

dl, ol, ul { margin-top: 0; }
ol ol, ol ul, ul ol, ul ul { margin-bottom: 0; }

b, strong, .bold { font-weight: 600; }

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.small, small {
  font-size: .75em;
  font-weight: 400;
}
.red {
  color: #ff0000;
}
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline
}

nobr {white-space: nowrap;}

img {position:relative;display:block;}
img.responsive {width: 100%;height: auto;}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

/* Block quote */
blockquote { margin: 0 0 1rem 0;border-radius: 10px;background: #eee; }
blockquote p { padding: 1rem 1rem 0.5rem 1rem; }
blockquote footer {text-align:left;background:#eeeeee;padding-top:0;padding-left:20px;border-radius:0 0 10px 10px;}
/*put quote before and after the copy*/
blockquote p::before { content: '\201C'; }
blockquote p::after { content: '\201D'; }


/*** LINK ***/
a:link, a:visited, a.externalLink {
	color:#1f3044;text-decoration:underline;
	-webkit-transition:background-color .25s linear;
  transition:background-color .25s linear;
}
a:active, a:focus, a:hover, a.externalLink:active, a.externalLink:focus, a.externalLink:hover {
	background-color:#ffffcc;
	color: #BF1722;
}
/*Accessibility of the external link*/
a.externalLink,
a.externalLink[href^="http:"]:visited, 
a.externalLink[href^="https:"]:visited {
  background: url(../media/iconNewWindow_red_20x17.png) no-repeat 100% 0px;
  padding-right: 25px;
}
a.externalLink[href^="http:"]::after, 
a.externalLink[href^="https:"]::after {
  content: " - External link";
  position: absolute;
  left: -10000px;
  top: auto;
}
/*** END of LINK ***/

/*** BACK TOP Button ***/
#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: red; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}
/*** BACK TOP Button ***/

/* Button */
.button {
  background-color: #ffffff;
  border: none;
  color: #4D804D;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 12px;
}
.button {
  transition-duration: 0.4s;
}
.button:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
/* END of Button */

/* Button Green */
.button-green {
  background-color: #4D804D;
  border: none;
  color: #FFFFFF;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 12px;
}
.button-green {
  transition-duration: 0.4s;
}
.button-green:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
/* END of Button Green */

/* DISABLED BUTTON */
button:disabled,
button[disabled]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
  cursor:default;
}
button:disabled:hover,
button[disabled]:hover {
  box-shadow: none;
}
/* END of DISABLED BUTTON */

/* HR's */
/* Glyph, by Harry Roberts */
hr.style-eight {
  overflow: visible; /* For IE */
  padding: 0;
  border: none;
  border-top: medium double #333;
  color: #333;
  text-align: center;
}
hr.style-eight:after {
  content: "§";
  display: inline-block;
  position: relative;
  top: -1em;
  font-size: 1.5em;
  padding: 0 0.25em;
  background: white;
}
/* END of HR's */

/* Form Contact page */
input[type=text],input[type=email],input[type=tel], select, textarea, input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 0px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: #4D804D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: left;
  display:block;
  width:auto;
}

input[type=submit]:hover {
  background-color: #45a049;
}


.container {
  max-width: 500px;
  margin: 50px auto;
  text-align: left;
  font-family: sans-serif;
}

form {
  /*border: 1px solid #1A33FF;
  background: #ecf5fc;*/
  padding: 0px 0px 45px 0px;
}

.form-control:focus {
  border-color: #000;
  box-shadow: none;
}

form label {
  /*font-weight: 600;*/
  padding-bottom: 0px;
}
form input {_margin-bottom:1.5em;}

/*.error {
  color: red;
  font-weight: 400;
  display: block;
  padding: 6px 0;
  font-size: 14px;
}

.form-control.error {
  border-color: red;
  padding: .375rem .75rem;
}*/







/*.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}
*/
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
/*@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}*/

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
.col-lg-6 {
  position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
.form-group {
  margin-bottom: 1rem;
}
form label {
  padding: 0px 12px 0px 0px;
}
label {
  display: inline-block;
  margin-bottom: .5rem;
}
.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control::placeholder {
  color: #6c757d;
  opacity: 1;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}







.btn-success.disabled, .btn-success:disabled {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

.d-none {
  display: none !important;
}
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
.help-block.with-errors ul li {
  color: #ff5050;
  margin-top: 5px;
}




.alert {
position: relative;
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
}

.alert-heading {
color: inherit;
}

.alert-link {
font-weight: 700;
}

.alert-dismissible {
padding-right: 4rem;
}

.alert-dismissible .close {
position: absolute;
top: 0;
right: 0;
padding: 0.75rem 1.25rem;
color: inherit;
}

.alert-primary {
color: #004085;
background-color: #cce5ff;
border-color: #b8daff;
}

.alert-primary hr {
border-top-color: #9fcdff;
}

.alert-primary .alert-link {
color: #002752;
}

.alert-secondary {
color: #383d41;
background-color: #e2e3e5;
border-color: #d6d8db;
}

.alert-secondary hr {
border-top-color: #c8cbcf;
}

.alert-secondary .alert-link {
color: #202326;
}

.alert-success {
color: #155724;
background-color: #d4edda;
border-color: #c3e6cb;
}

.alert-success hr {
border-top-color: #b1dfbb;
}

.alert-success .alert-link {
color: #0b2e13;
}

.alert-info {
color: #0c5460;
background-color: #d1ecf1;
border-color: #bee5eb;
}

.alert-info hr {
border-top-color: #abdde5;
}

.alert-info .alert-link {
color: #062c33;
}

.alert-warning {
color: #856404;
background-color: #fff3cd;
border-color: #ffeeba;
}

.alert-warning hr {
border-top-color: #ffe8a1;
}

.alert-warning .alert-link {
color: #533f03;
}

.alert-danger {
color: #721c24;
background-color: #f8d7da;
border-color: #f5c6cb;
}

.alert-danger hr {
border-top-color: #f1b0b7;
}

.alert-danger .alert-link {
color: #491217;
}

.alert-light {
color: #818182;
background-color: #fefefe;
border-color: #fdfdfe;
}

.alert-light hr {
border-top-color: #ececf6;
}

.alert-light .alert-link {
color: #686868;
}

.alert-dark {
color: #1b1e21;
background-color: #d6d8d9;
border-color: #c6c8ca;
}

.alert-dark hr {
border-top-color: #b9bbbe;
}

.alert-dark .alert-link {
color: #040505;
}



.close {
float: right;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: .5;
}
button.close {
padding: 0;
background-color: transparent;
border: 0;
-webkit-appearance: none;
}
.close:not(:disabled):not(.disabled) {
cursor: pointer;
}







/* END of Form */

.agm {
  background-color: #ffcc00; /* Jaune vif pour capter l’attention */
    color: #800000; /* Rouge foncé pour le texte, qui contraste bien */
    padding: 20px;
    font-weight: bold;
}

.junior_world_2025 {
  background-color: #ffffff;
  border-bottom: 5px solid #124a89;
  text-align: center;
}
.cta.junior_world_2025 .container img {
  margin: 0 auto;
  max-width: 60%;
  height: auto;
}
.cta.junior_world_2025 .container h2 {
  color: #124a89;
  text-align: center;
  margin-bottom: 1em;
}
.cta.junior_world_2025 .container h3 {
  color: #124a89;
  text-align: center;
}
.cta.junior_world_2025 .container h4 {
  text-align: center;
}


.cta.nationaux_2025 {
  background-color: #124a89; /* Bleu PQ */
  color:#fff;
  text-align: center;
}
.cta.nationaux_2025 .container h2 {
  text-align: center;
  color:#fff;
  padding:0.5em 0.5em 0.7em 0.5em;
}
.cta.nationaux_2025 .container h4 {
  text-align: center;
  color:#fff;
  padding:0.5em 0.5em 0.7em 0.5em;
}
.cta.nationaux_2025 .container h4 a {
  color:#fff;
}
.cta.nationaux_2025 .container h4 a:hover {
  color:#124a89;
}
.cta.nationaux_2025 .container img {
  margin: 0 auto;
  max-width: 60%;
  height: auto;
}

/* TROPHEE 2025*/
.cta.trophee_2025 {
  background-color: #124a89; /* Bleu PQ */
  color:#fff;
  text-align: center;
}
.cta.trophee_2025 .container h2 {
  text-align: center;
  color:#fff;
  padding:0.5em 0.5em 0.7em 0.5em;
}
.cta.trophee_2025 .container h3 {
  text-align: center;
  color:#fff;
  padding:0.5em 0.5em 0.7em 0.5em;
}
.cta.trophee_2025 .container h4 {
  text-align: center;
  color:#fff;
  padding:0.5em 0.5em 0.7em 0.5em;
}
.cta.trophee_2025 .container h4 a {
  color:#fff;
}
.cta.trophee_2025 .container h4 a:hover {
  color:#124a89;
}
.cta.trophee_2025 .container img {
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

/* SEMINAR 2026 - Meagan Duhamel */
.seminar2026 {
  background-color: #4D804D; /* Green */
  color: #fff;
  text-align: center;
  padding: 2em 0;
  border-bottom: 5px solid #3a6b3a;
}

.seminar2026 .container h2 {
  text-align: center;
  color: #fff;
  font-size: 2rem;
  margin-bottom: 0.5em;
}

.seminar2026 .container h3 {
  text-align: center;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0.5em 0;
}

.seminar2026 .container h4 {
  text-align: center;
  color: #fff;
  font-size: 1.25rem;
  margin: 0.5em 0 1.5em 0;
}

.seminar2026 .seminar-notes {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 1.5em;
  margin: 1.5em auto;
  max-width: 900px;
  text-align: left;
}

.seminar2026 .seminar-notes p {
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 1em;
  text-align: left;
}

.seminar2026 .seminar-notes ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

.seminar2026 .seminar-notes li {
  color: #fff;
  padding: 0.5em 0;
  padding-left: 1.5em;
  position: relative;
  line-height: 1.6;
}

.seminar2026 .seminar-notes li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #BB8E11;
  font-weight: bold;
  font-size: 1.2em;
}

.seminar2026 .seminar-notes strong {
  font-weight: 600;
}

.seminar2026 .seminar-notes em {
  font-style: italic;
}
.seminar2026 .seminar-notes a {
  color: #fff!important;
}
.seminar2026 .seminar-notes a:hover, .seminar2026 .seminar-notes a:visited, .seminar2026 .seminar-notes a:focus {
  color: #000!important;
}

.seminar2026 .button {
  background-color: #ffffff;
  color: #4D804D;
  padding: 15px 40px;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 1.5em auto;
  display: block;
  width: fit-content;
  text-decoration: none;
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.seminar2026 .button:hover {
  background-color: #BB8E11;
  color: #ffffff;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  transform: translateY(-2px);
}


.blueGradientBg {background:radial-gradient(#0082c3,#176ea6,#004876);}
.greenGradientBg {background:radial-gradient(#80b57f,#4D804D);}
.imageBgSkate {
  /*background-image: url(../media/skates-black-and-white.jpg);*/
  background-image: url(../media/skate_home_1080x292.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position:center center;
  text-align: left;
  min-height: 250px;
}

.imageBg {background-image: url(../media/banqueImages/original.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position:center center;}

.cta.imageBgSkate .container h2 {text-align: left;color:#FFFFFF;background-color:#4D804D;padding:0.5em 0.5em 0.7em 0.5em;opacity:0.85;}

/*.imageBgSkaters2024 {
  background-image: url(../media/skaters/2024-2025/skaters_banner_2024-2025_1200x400.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position:center center;
  text-align: left;
  min-height: 400px;
}*/
.imageBgSkaters2024 {
  max-height:400px;
  background-color:#ffffff;
  padding:0;
  margin:0;
}
.imageBgSkaters2024 .container {
  padding:0;
}
.imageBgSkaters2024 img {
  max-width: 100%;
  height:auto;
}

.imageBgSkaters2023 {
  background-image: url(../media/banner_skaters_2023_1200x400.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position:center center;
  text-align: left;
  min-height: 250px;
}

.imageBgCompetitions {
  background-image: url(../media/podium_3_1200x300.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position:center center;
  text-align: left;
  min-height: 250px;
}

.imageBgEvents {
  background-image: url(../media/banner_events_1200x350.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position:center center;
  text-align: left;
  min-height: 250px;
}

.imageBgClubs {
  /*background-image: url(../media/banner_clubs_1200x350.jpg);*/
  background-image: url(../media/banner_clubs_2_1200x350.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position:center center;
  text-align: left;
  min-height: 250px;
}

.imageBgDevelopment {
  background-image: url(../media/banner_development_1200x350.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position:center bottom;
  text-align: left;
  min-height: 250px;
}

.imageBgOfficials {
  background-image: url(../media/banner_judges_1200x350.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position:center top;
  text-align: left;
  min-height: 250px;
}

.imageBgContact {
  /*background-image: url(../media/banner_contact_1200x350.jpg);*/
  background-image: url(../media/skate_home_1080x292.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position:center center;
  text-align: left;
  min-height: 250px;
}

/*** SKIP CONTENT ***/
#skiptocontent a {
  padding: 6px;
  position: absolute;
  top: -80px;
  left: 0px;
  color: white;
  background: #BF1722;
  -webkit-transition: top 1s ease-out;
  transition: top 1s ease-out;
  z-index: 100;
}
#skiptocontent a:focus {
	position:absolute;
	left:0px;
	top:0px;
	outline-color:transparent;	
	-webkit-transition: top .1s ease-in;
    transition: top .1s ease-in;
}
/* END of SKIP CONTENT */

/* Alert Message */
.alertMessage {background-color: #FFFB00;color:#000000;}
.alertMessage p {font-weight:600;}

/* Responsive TABLE */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
  margin-bottom:4em;
}
th {background-color:#4D804D;color:#FFFFFF;font-weight:600;}
th, td {
  text-align: left;
  padding: 10px 16px;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* ACCORDION */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
  transition: 0.4s;
}
.accordion h2 {
  padding: 0;
  margin: 0;
}

.activeAccordion, .accordion:hover {
  background-color: #4D804D;/*#ccc*/
  color: #ffffff;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
.accordion:hover:after {
  color: #ffffff;
}
.activeAccordion:after {
  content: "\2212";
  color:#ffffff;
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
/* END of ACCORDION */

/* Highlight */
.yellow {
  background-color:#FFFB00;
}
/* CONTAINER */
.container {display:block;max-width:1200px;margin:0 auto;padding:1em;}

.flex-container {
  display: flex;
  flex-direction: row;
  background-color: transparent;
  margin-bottom:1em;
  text-align:left;
}

.flex-container > div {
  background-color: transparent;/*f1f1f1*/
  padding: 20px;
}
.columns_1 > div {width:100%;}
.columns_2 > div {width:50%;}
.columns_3 > div {width:33.33%;}
.columns_4 > div {width:25%;}

.columns_4 > div .facebook img {display:inline-block;top:6px;}
.columns_4 > div a.facebook {text-decoration:none;}



/* Header */
header {position:relative;width:100%;background-color:#ffffff;}
header .container {padding:0 1em;}
header .container img {width:120px;}/*transition: width 2s;*/

/* langages */
.langages {position:absolute;top:6px;right:1em;}
.langages a {text-decoration:none;padding:0.5em;color:#000000;}
.langages a:active, .langages a:focus, .langages a:hover {background-color: #eeeeee; color:#333333;}
.langages a.active {background-color:#4D804D;color:#FFFFFF;}

/* Nav - Main Navigation  GREEN: #4D804D */
nav { background:#DDDDDD; }
nav .container {padding:0;}
/* Add a black background color to the top navigation */
.topnav {
  background-color: #DDDDDD;
  overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #000000;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
  font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
  background-color: #eeeeee; color:#333333;
}
/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #4D804D;color:#ffffff;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}


/* MAIN */
.main {position:relative;width:100%;background-color:#ffffff;}

/* CTA sections */
.cta {padding: 2em 0;}
.cta .container h2, .cta .container p {color:#ffffff;text-align:center;}
.cta .container h2 {margin:0;}

.ctaContacts {background-color:white;border-top:0px solid #dddddd;}
.ctaContacts .container .columns_4 div:nth-child(2) {padding-top:5.6em;}
.ctaContacts .container .columns_4 div:nth-child(3), .ctaContacts .container .columns_4 div:nth-child(4) {padding-top:9em;}
.ctaContacts .container .columns_4 img.logo {width:120px;}/*transition: width 2s;*/

/* Smart LINKS */
.smartLinks {background-color:#FFFFFF;}
.smartLinks .flex-container {margin-bottom:0;}
.smartLinks .columns_4 div {border:1px solid #4D804D;padding:0; margin:10px;text-align:center;color:#4D804D;border-radius:10px;cursor:pointer;}
.smartLinks .columns_4 div:hover {background-color:#4D804D;color:#ffffff;}
.smartLinks .columns_4 div a {text-decoration:none;color:#4D804D;}
.smartLinks .columns_4 div a:hover {color:#ffffff;}
.smartLinks .columns_4 div h3 {text-decoration:none;color:#4D804D;}
.smartLinks .columns_4 div h3:hover {color:#ffffff;}

/* Partners */
.partners {background-color:white;border-top:0px solid #dddddd;}
.partners .columns_3 div, .partners .columns_4 div {padding:0; margin:10px;text-align:center;}
.partners .columns_3 div img, .partners .columns_4 div img {margin:0 auto;}

img.olympiqueLogo, img.SkateCanadaLogo, img.PatinageQuebecLogo {height:100px;}
.partners .columns_4 div img.safeSportLogo {height:60px;margin-top:20px;}

/* Footer */
footer { position:relative;width:100%;background: #ddd; }
footer, footer p {
  text-align: center;
  padding-bottom: 0;
}
footer .flex-container > div p {text-align:left;}




/* TRY TO HAVE ONLY 1 BREAKPOINT */
/* On screens that are 768px wide or less */
@media screen and (max-width: 768px) {
  /* LOGO HEADER and FOOTER */
  header .container img.logo {width:80px;}
  .ctaContacts .container .columns_4 img.logo {width:80px;}

  .langages {right:0;}
  /* NAVIGATION */
  /* When the screen is less than 768 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  a.icon:active, a.icon:focus, a.icon:hover {
    background-color: #eeeeee; color:#333333;
  }


  
  .flex-container {
    display: flex;
    flex-direction: column;
    background-color: transparent;
    margin-bottom:1em;
    text-align:left;
  }
  .columns_1 > div, .columns_2 > div, .columns_3 > div, .columns_4 > div {width:100%;}
  .ctaContacts .container .columns_4 div:nth-child(2), .ctaContacts .container .columns_4 div:nth-child(3), .ctaContacts .container .columns_4 div:nth-child(4) {padding-top:0em;padding-bottom:0;}

  .ctaContacts .container .flex-container > div {padding: 20px 0;}

  .cta {padding: 0;}

  .smartLinks .columns_4 div {margin:10px 0;}

  /* Responsive TABLE */
  table.mobile {display:flex;flex-direction: column;}
  table.mobile tr {display:flex;flex-direction: column;}
  table.mobile td {display:flex;flex-direction: column;}

  .col-lg-6 {
  position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
max-width:100%;
flex: 0 0 100%;
}

}


/*  */
.flag {
  width:50px;
  display: inline;
  margin-right: 1em;
  bottom: -4px;
}


/* Figure et image d'Hitomi - HTML5 sémantique */
.charity-photo {
    margin: 0 auto 40px auto;
    text-align: center;
    max-width: 100%;
}

.charity-photo img {
    display: block;
    margin: 0 auto 15px auto;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.charity-photo img:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.charity-photo figcaption {
    font-style: italic;
    color: #5a6c7d;
    font-size: 1.1em;
    font-weight: 500;
    text-align: center;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    margin: 0 auto;
    max-width: 400px;
    /*border-left: 3px solid #7f8c8d;*/
}

/* Styles pour la section charity - Version respectueuse et solennelle */
.charity {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #dee2e6 100%);
    padding: 80px 0;
    margin: 0 0;
    border-top: 3px solid #6c757d;
    border-bottom: 3px solid #6c757d;
    position: relative;
}

.charity::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="%23000" opacity="0.02"/></svg>') repeat;
    pointer-events: none;
}

.charity-content {
    background: white;
    padding: 50px;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
    border: 1px solid #e9ecef;
}

.charity-content h2 {
    color: #2c3e50;
    font-size: 2.5em;
    margin-bottom: 40px;
    border-bottom: 2px solid #bdc3c7;
    padding-bottom: 20px;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-family: 'Georgia', serif;
}

.charity-details {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 30px;
}

.charity-date {
    flex: 1;
    min-width: 280px;
    background: #f8f9fa;
    padding: 30px;
    border-radius: 6px;
    border-left: 4px solid #34495e;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.charity-date h3 {
    color: #2c3e50;
    font-size: 1.6em;
    margin-bottom: 15px;
    font-weight: 600;
    font-family: 'Georgia', serif;
}

.charity-date p {
    margin: 8px 0;
    font-size: 1.1em;
    color: #495057;
    line-height: 1.5;
    text-align: center;
}

.charity-date .venue {
    font-weight: 600;
    color: #2c3e50;
    margin-top: 15px;
    padding: 8px 15px;
    background: white;
    border-radius: 4px;
    display: inline-block;
    border: 1px solid #dee2e6;
}

.charity-memorial {
    flex: 1;
    min-width: 280px;
    background: #f1f3f4;
    padding: 30px;
    border-radius: 6px;
    border-left: 4px solid #7f8c8d;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.charity-memorial h4 {
    color: #5d6d7e;
    font-size: 1.4em;
    margin-bottom: 15px;
    font-weight: 600;
    font-family: 'Georgia', serif;
    font-style: italic;
}

.charity-memorial p {
    font-style: italic;
    line-height: 1.7;
    color: #5a6c7d;
    font-size: 1.05em;
}

.charity-funds {
    background: #fbfcfc;
    padding: 35px;
    margin: 35px 0;
    border-radius: 6px;
    border: 2px solid #d5dbdb;
    position: relative;
}

.charity-funds::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: #85929e;
}

.charity-funds h4 {
    color: #2c3e50;
    margin-bottom: 20px;
    font-size: 1.3em;
    font-weight: 600;
    font-family: 'Georgia', serif;
}

.charity-funds .foundation {
    font-size: 1.4em;
    color: #34495e;
    margin-bottom: 25px;
    font-weight: 700;
    padding: 15px 25px;
    background: #ecf0f1;
    border-radius: 6px;
    display: inline-block;
    border-left: 3px solid #95a5a6;
}

.charity-sources {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

.charity-sources li {
    background: white;
    padding: 12px 25px;
    border-radius: 6px;
    border: 1px solid #bdc3c7;
    font-weight: 500;
    color: #2c3e50;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.charity-sources li:hover {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.charity-performers {
    background: #f7f9fc;
    padding: 35px;
    margin: 35px 0;
    border-radius: 6px;
    border-left: 4px solid #52658f;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.charity-performers h4 {
    color: #2c3e50;
    margin-bottom: 20px;
    font-size: 1.3em;
    font-weight: 600;
    font-family: 'Georgia', serif;
}

.charity-performers p {
    line-height: 1.7;
    color: #4a5568;
    font-size: 1.05em;
}

.charity-info {
    margin-top: 40px;
    padding-top: 35px;
    border-top: 2px solid #e9ecef;
    position: relative;
}

.charity-info::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: #95a5a6;
}

.charity-info p {
    font-size: 1.1em;
    margin-bottom: 25px;
    color: #2c3e50;
    font-weight: 500;
}

.charity-facebook-btn, .charity-facebook-btn:visited {
    display: inline-block;
    background: #4a5568;
    color: white!important;
    padding: 14px 35px;
    text-decoration: none!important;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1em;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(74, 85, 104, 0.2);
    letter-spacing: 0.5px;
}

.charity-facebook-btn:hover {
    background: #2d3748;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(74, 85, 104, 0.3);
    color: white;
    text-decoration: none;
}

/* Ajout d'une citation ou message respectueux */
.charity-quote {
    font-style: italic;
    font-size: 1.1em;
    color: #5a6c7d;
    margin: 30px 0;
    padding: 20px;
    border-left: 3px solid #bdc3c7;
    background: #f8f9fa;
    text-align: left;
    border-radius: 0 6px 6px 0;
}

.charity-quote::before {
    content: '"';
    font-size: 2em;
    color: #95a5a6;
    line-height: 0;
    margin-right: 8px;
    vertical-align: -0.4em;
}

.charity-quote::after {
    content: '"';
    font-size: 2em;
    color: #95a5a6;
    line-height: 0;
    margin-left: 8px;
    vertical-align: -0.4em;
}

/* Responsive */
@media (max-width: 768px) {
    .charity {
        padding: 60px 0;
        margin: 40px 0;
    }
    
    .charity-content {
        padding: 35px 25px;
        margin: 0 15px;
    }
    
    .charity-content h2 {
        font-size: 2em;
    }
    
    .charity-details {
        flex-direction: column;
    }
    
    .charity-date,
    .charity-memorial {
        min-width: 100%;
    }
    
    .charity-sources {
        flex-direction: column;
        align-items: center;
    }
    
    .charity-sources li {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .charity-content {
        padding: 25px 20px;
    }
    
    .charity-content h2 {
        font-size: 1.8em;
    }
    
    .charity-date h3 {
        font-size: 1.4em;
    }
    
    .charity-funds,
    .charity-performers {
        padding: 25px 20px;
    }
    
    .charity-facebook-btn {
        padding: 12px 25px;
        font-size: 0.95em;
    }
}

/* Animation subtile et respectueuse */
.charity-content {
    animation: fadeInGently 1.2s ease-out;
}

@keyframes fadeInGently {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.charity-address {
    background: #f8f9fa;
    padding: 15px 20px;
    margin: 20px 0;
    border-radius: 6px;
    border-left: 3px solid #6c757d;
}

.charity-address p {
    margin: 0;
    font-size: 1.1em;
    color: #2c3e50;
}

.charity-tickets {
    background: #e8f4f8;
    padding: 20px;
    margin: 20px 0;
    border-radius: 6px;
    border-left: 3px solid #17a2b8;
}

.charity-tickets h5 {
    color: #2c3e50;
    margin-bottom: 15px;
    font-size: 1.2em;
    font-weight: 600;
}

.ticket-prices {
    list-style: none;
    padding: 0;
    margin: 15px 0;
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.ticket-prices li {
    background: white;
    padding: 10px 20px;
    border-radius: 6px;
    border: 1px solid #17a2b8;
    color: #2c3e50;
    font-size: 1.05em;
}

.reservation {
    margin-top: 15px;
    font-size: 1.05em;
    color: #2c3e50;
}

.reservation a {
    color: #17a2b8;
    text-decoration: none;
    font-weight: 600;
}

.reservation a:hover {
    color: #138496;
    text-decoration: underline;
}

.charity-sales {
    background: #f1f3f4;
    padding: 20px;
    margin: 20px 0;
    border-radius: 6px;
    border-left: 3px solid #28a745;
}

.charity-sales h5 {
    color: #2c3e50;
    margin-bottom: 15px;
    font-size: 1.2em;
    font-weight: 600;
}

.payment-info {
    margin-top: 15px;
    font-style: italic;
    color: #6c757d;
    font-size: 0.95em;
    text-align: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
}

/* Responsive pour les nouvelles sections */
@media (max-width: 768px) {
    .charity-photo {
        margin: 0 auto 30px auto;
    }
    
    .charity-photo figcaption {
        font-size: 1em;
        padding: 8px 15px;
        margin: 0 10px;
    }
    
    .ticket-prices {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    
    .ticket-prices li {
        width: 100%;
        max-width: 250px;
        text-align: center;
    }
}