/* Import de la police Ubuntu depuis Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,700');
@import url('https://fonts.googleapis.com/css?family=Lexend:400,700');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: 'Ubuntu', sans-serif;
  color: #333;
  background: transparent;
}

body {
  font-size: 18px;
  line-height: 1.6;
  transition: background-color 0s ease;
}

body::before {
  content: var(--pseudo-content, "\f0c2"); /* icône cloud */
  color: #f0f0f0;
  font-family: "FontAwesome";
  font-size: 90vw;
  line-height: 1;
  position: fixed;
  top: 50%;
  left: 50%;
  display: inline-block;
  transform: translate(-50%, -50%) scale(1.0, 0.9);
  z-index: -1;
  pointer-events: none;
  opacity: 1;
  transition: opacity 1s ease, transform 1s ease;
}

p {
  padding-top: 4px;
  padding-bottom: 8px;
}

.no-content::before {
  content: "";
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
}

/* Conteneur fixe de 1100px, centré, avec fond blanc */
.container {
  width: 1100px;
  margin: 0 auto;
  background-color: transparent;
  min-height: 100vh;
}

/* Styles angular et rounded */
.angular * {
  border-radius: 0 !important;
}

.rounded * {
  border-radius: 4px;
}

/* Liens : changement visible au survol */
a {
  text-decoration: none;
  color: #E95420;
  transition: color 0.3s ease;
}
a:hover {
  color: #c13f0b;
  text-decoration: underline;
}

.image-container img {
  min-height: 100%;
}

.quote {
  font-size: 0.85em;
  letter-spacing: 2px;
}

.quoteleft {
  color: #666;
  float: left;
  margin-right: 0.5em;
  transform: translate(5px, 12px);
}

.quoteright {
  color: #888;
  transform: translate(0px, -2px);
}

footer cite {
  font-size: 0.9em;
  letter-spacing: 1px;
  color: gray;
  display: block;
  text-align: right;
  margin-top: -12px;
  margin-right: 6px;
}

/* ==========================================================
 MENU HORIZONTAL
 ========================================================== */

.menu-container {
position: fixed;
width: 1100px;
height: 84px;
text-align: center;
padding: 1em 0;
background-color: rgba(0, 0, 0, 0.05);
z-index: 1;
}

.menu-container ul {
display: inline-block;
list-style: none;
}

.menu-container li {
display: inline-block;
margin: 0 1em;
position: relative;
}

.menu-link {
display: inline-block;
padding: 0.5em 1em;
background-color: #f5f5f5;
border: 1px solid #ddd;
cursor: pointer;
}

/* Par défaut, le sous-menu est caché */
.submenu {
display: none !important;
position: absolute;
left: 0;
top: 100%;
background-color: #fff;
border: 1px solid #ddd;
min-width: 140px;
z-index: 999;
}

.submenu li {
display: block;
border-bottom: 1px solid #eee;
}

.submenu li a {
display: block;
padding: 0.5em;
color: #333;
}

.submenu li a:hover {
background-color: #f8f8f8;
}

/* Lorsque la classe .open est ajoutée, le sous-menu s'affiche */
.menu-item.open .submenu {
display: block !important;
}

.hidden {
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}

/* ==========================================================
 LOGO
 ========================================================== */

.logo-fixed {
position: fixed;
top: 0;
right: 0;
height: 84px;
z-index: 9999;
}

.logo-fixed img {
height: 100%;
object-fit: contain;
}

/* ==========================================================
 TITRES (H1 à H5)
 + bandeaux (banner-title1, banner-title2)
 ========================================================== */

h1 {
margin-top: 1.2em;
font-size: 2.2em;
font-weight: bold;
color: #222;
margin-bottom: 0.5em;
}

h2 {
margin-top: 1.2em;
font-size: 1.8em;
font-weight: bold;
color: #E95420;
margin-bottom: 0.5em;
}

h3 {
margin-top: 0.8em;
font-size: 1.6em;
font-weight: 700;
color: #555;
border-bottom: 2px solid #E95420;
display: inline-block;
margin-bottom: 0.5em;
}

h4 {
margin-top: 0.7em;
font-size: 1.4em;
font-weight: 700;
color: #333;
letter-spacing: 1px;
margin-bottom: 0.3em;
text-transform: uppercase;
}

h5 {
margin-top: 0.6em;
font-size: 1.2em;
font-weight: 700;
color: #666;
margin-bottom: 0.2em;
}

/* Bandeaux sous le texte */
.banner-title1 {
display: inline-block;
position: relative;
padding: 0.5em 1em;
background-color: #E95420;
color: #fff;
margin-bottom: 0.8em;
text-shadow: 2px 2px 12px #d0d0d0;
}

.banner-title1::after {
content: "";
display: block;
width: 100%;
height: 4px;
background-color: #fff; 
margin-top: 0.3em;
}

.banner-title2 {
display: inline-block;
position: relative;
padding: 0.5em 1em;
background-color: #333;
color: #fff;
margin-bottom: 0.8em;
text-shadow: 2px 2px 12px #d0d0d0;
}

.banner-title2::after {
content: "";
display: block;
width: 100%;
height: 4px;
background-color: #E95420; 
margin-top: 0.3em;
}

/* ==========================================================
 CODE (sur fond clair et sur fond sombre)
 ========================================================== */

.code-light {
background-color: #f7f7f7;
border-left: 4px solid #E95420;
padding: 1em;
font-family: 'Courier New', monospace;
overflow-x: auto;
margin: 1em 0;
}

.code-dark {
background-color: #333;
color: #eee;
border-left: 4px solid #E95420;
padding: 1em;
font-family: 'Courier New', monospace;
overflow-x: auto;
margin: 1em 0;
}

/* ==========================================================
 TABLES
 ========================================================== */

table {
width: 100%;
border-collapse: collapse;
margin: 1em 0;
}

thead {
background-color: rgba(0, 0, 0, 0.1);
font-weight: bold;
}

th, td {
padding: 0.75em 1em;
}

tbody tr:hover {
background-color: rgba(233, 84, 32, 0.1);
}

/* ==========================================================
 BULLET LISTS avec icône FontAwesome
 ========================================================== */

ul.fa-bullets {
list-style: none;
margin: 1em 0;
padding: 0;
}

ul.fa-bullets li {
position: relative;
padding-left: 2em;
margin-bottom: 0.5em;
}

ul.fa-bullets li:before {
content: "\f00c";
font-family: 'FontAwesome';
position: absolute;
left: 0;
color: #E95420;
}

/* ==========================================================
 INFO-BULLES (tooltips)
 ========================================================== */

.tooltip {
position: relative;
cursor: pointer;
color: #E95420;
}

.tooltip .tooltip-text {
visibility: hidden;
width: 160px;
background-color: #222;
color: #fff;
text-align: center;
padding: 0.5em;
border-radius: 4px;
position: absolute;
z-index: 999;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s ease;
}

.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}

/* ==========================================================
 CLIGNOTEMENT LENT + BOLD
 ========================================================== */

@keyframes slow-blink {
0%   { opacity: 1;   }
30%  { opacity: 0.4; }
100% { opacity: 1;   }
}

.highlight-blink {
font-weight: bold;
animation: slow-blink 1s infinite;
}

/* ==========================================================
 FORMULAIRES
 ========================================================== */

input, select, textarea {
font-family: 'Ubuntu', sans-serif;
padding: 0.75em;
border: 1px solid #ccc;
outline: none;
transition: border-color 0.3s ease;
width: 100%;
max-width: 100%;
font-size: 1.1em;
}

input:focus, select:focus, textarea:focus {
border-color: #E95420;
}

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
background-color: #E95420;
color: #fff;
padding: 0.7em 1.2em;
border: none;
cursor: pointer;
font-family: 'Ubuntu', sans-serif;
transition: background-color 0.3s ease;
font-size: 1.1em;
margin-right: 0.5em;
margin-bottom: 0.5em;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
background-color: #c13f0b;
}

/* ==========================================================
 CHECKBOX & RADIO
 ========================================================== */

/* Annuler l’apparence native pour pouvoir tout personnaliser */
input[type="checkbox"],
input[type="radio"] {
position: relative;
top: 0.4em;

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

/* Dimensions et style de base */
width: 1.5em;
height: 1.5em;
border: 2px solid #E95420;
background-color: #fff;
margin-right: 0.3em;
margin-left: 0.5em;
cursor: pointer;
position: relative;
outline: none;
box-shadow: 0 0 2px rgba(0,0,0,0.2);
transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Checkbox : bords légèrement arrondis */
input[type="checkbox"] {
border-radius: 4px;
}

/* Radio : forme circulaire */
input[type="radio"] {
border-radius: 50%;
}

/* État coché */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
background-color: #E95420;
border-color: #E95420;
box-shadow: 0 0 5px rgba(233,84,32,0.4);
}

/* Afficher un symbole (FontAwesome) pour la checkbox cochée */
input[type="checkbox"]:checked::after {
content: "\f00c"; /* Icône "check" FontAwesome */
font-family: "FontAwesome";
color: #fff;
font-size: 0.9em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

/* Afficher un rond blanc au centre pour la radio sélectionnée */
input[type="radio"]:checked::after {
content: "";
width: 0.7em;
height: 0.7em;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

/* ==========================================================
 ANIMATION POUR LES ICÔNES (wiggle)
 ========================================================== */

@keyframes icon-wiggle {
0% { transform: rotate(0deg) translateX(0); }
10% { transform: rotate(-10deg) translateX(-5px); }
20% { transform: rotate(10deg) translateX(5px); }
30% { transform: rotate(-10deg) translateX(-5px); }
40% { transform: rotate(10deg) translateX(5px); }
50% { transform: rotate(-10deg) translateX(-5px); }
60% { transform: rotate(10deg) translateX(5px); }
70% { transform: rotate(-10deg) translateX(-5px); }
80% { transform: rotate(10deg) translateX(5px); }
90% { transform: rotate(-10deg) translateX(-5px); }
100% { transform: rotate(0deg) translateX(0); }
}

.icon-animate {
display: inline-block;
animation: icon-wiggle 1s ease forwards;
}

.fixed-bg-section1 {
width: 1100px;
height: 400px;
margin: 0 auto;
background: url('/images/924x1436/09.jpg') center center no-repeat;
background-size: 1100px auto;
background-attachment: fixed;
}

.fixed-bg-section2 {
width: 1100px;
height: 400px;
margin: 0 auto;
background: url('/images/924x1436/10.jpg') center center no-repeat;
background-size: 1100px auto;
background-attachment: fixed;
}

.fixed-bg-section3 {
width: 1100px;
height: 400px;
margin: 0 auto;
background: url('/images/924x1436/11.jpg') center center no-repeat;
background-size: 1100px auto;
background-attachment: fixed;
}

/* Effet "fade-up" initial */
.fade-up {
opacity: 0;
transform: translateY(50px);
transition: opacity 0.9s ease, transform 0.9s ease;
}

/* Classe appliquée quand on veut l'afficher */
.fade-up-visible {
opacity: 1;
transform: translateY(0);
}

/* ==========================================================
 ANIMATION SCROLL-DOWN INFERIEURE DROITE (CHEVRONS)
 ========================================================== */

.scroll-down-container {
  position: fixed;
  bottom: 60px;
  text-align: center;
}

.scroll-icon {
  color: #333;
  opacity: 0.7;
  margin: 0; 
  animation: pulse 2s infinite;
}

/* Positionnement précis de chaque icône */
.scroll-icon-wrapper {
  position: absolute;
  bottom: 0;
}

.scroll-icon-wrapper:nth-child(1) {
  bottom: 0px;
}

.scroll-icon-wrapper:nth-child(2) {
  bottom: -20px;
}

.scroll-icon-wrapper:nth-child(3) {
  bottom: -40px;
}

/* Animation de scintillement décalée */
.scroll-icon-wrapper:nth-child(1) .scroll-icon {
  animation-delay: 0s;
}

.scroll-icon-wrapper:nth-child(2) .scroll-icon {
  animation-delay: 0.3s;
}

.scroll-icon-wrapper:nth-child(3) .scroll-icon {
  animation-delay: 0.6s;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.9;
  }
}

/* ==========================================================
 SIDEBAR
 ========================================================== */

.sidebar {
  position: relative;
  overflow: hidden;

  margin: 1.5em 0 1.5em 2.5em;
  padding: 1.2em 1.2em 0.9em 1.2em;

  background-color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(128, 128, 128, 0.5);
  border-left: 7px solid rgba(128, 128, 128, 0.5);

  font-size: 0.9em;
  color: #555;
  backdrop-filter: blur(4px);
}

.sidebar::before {
  content: "\f0f6"; /* fa-file-text-o */
  font-family: "FontAwesome";

  position: absolute;
  top: -0px;
  left: 1px;

  font-size: 4.5em;
  color: rgba(128, 128, 128, 0.12);

  line-height: 1;
  pointer-events: none;
}

.sidebar p:last-child {
  margin-bottom: 0;
}

/* ==========================================================
 NOTE
 ========================================================== */

.note {
  position: relative;
  overflow: hidden;

  margin: 1.5em 0 1.5em 2.5em;
  padding: 1.2em 1.2em 0.9em 1.2em;

  background-color: rgba(255, 255, 255, 0.55);
  border-left: 4px solid #E95420;
  border: 1px solid rgba(233, 84, 32, 0.25);

  font-size: 0.9em;
  color: #555;
  backdrop-filter: blur(4px);
}

.note::before {
  content: "\f05a"; /* fa-info-circle */
  font-family: "FontAwesome";

  position: absolute;
  top: -5px;
  left: 1px;

  font-size: 4.5em;
  color: rgba(233, 84, 32, 0.12);

  line-height: 1;
  pointer-events: none;
}

.note p:last-child {
  margin-bottom: 0;
}

/* ==========================================================
 IMAGES
 ========================================================== */

figure.image-frame {
  display: inline-block;
  margin: 1.5em 0;
}

figure.image-frame img,
img.framed {
  display: block;
  max-width: 100%;
  height: auto;
  padding: 6px;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(233, 84, 32, 0.35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

figure.image-frame figcaption {
  margin-top: 0.35em;
  font-size: 0.85em;
  font-style: italic;
  color: #777;
  text-align: right;
}

/* ==========================================================
 BULLET POINT
 ========================================================== */

.bullet-point {
  position: relative;
}

.bullet-point::before {
  content: "\f0da"; /* fa-caret-right */
  font-family: "FontAwesome";
  color: #E95420;
  font-size: 2.0em;
  top: 0.7em;
  position: absolute;
  transform: translate(-20px, -35px);
}