:root {
    --c-blanc: #efefef;
    --c-gris: #2f2f2f;
	--c-bleu: #5978db;
    --c-bleu-fonce: #375AC7;
	--c-link: #d87a30;
	--c-link-hover: #5978db;
	--c-transparent: rgba(0, 0, 0, 0);
	--c-background: rgba(19, 19, 19, 1);
	--c-background-fonce: rgba(24, 26, 38, 0.97);

	--radius-menu: 12px;
	--height-menu-h: 94px;
}

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

html, body {
    padding: 0px;
    margin: 0px;
    scroll-behavior: smooth;
}

body {
    background-color: var(--c-background);
    color: #ffffff;
    font-family: 'Lato'!important;
    font-size: 20px;
    font-weight: 400;
    padding-top: 86px;
}

header {
    background: #131313;
    background: linear-gradient(180deg, rgba(19, 19, 19, 1) 20%, rgba(19, 19, 19, 0.64) 57%, rgba(19, 19, 19, 0) 100%);
}

footer {
    color: var(--c-blanc);
}

.nav a.nav-link {
    color: white;
    padding: 3px 24px;
}
.nav a.nav-link:hover {
    /*background-color: var(--c-background-fonce);*/
    color: rgba(216,122,48,1);
}
/* Soulignement progressif */
.underline-hover {
  position: relative;
  display: inline-block;
  color: inherit;
  text-decoration: none;
}

.underline-hover::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 1px;
  /*background-color: rgba(216,122,48,1);*/
  background: linear-gradient(90deg, rgba(216,122,48,1) 0%, rgba(74,144,226,1) 100%);
  transition: width 0.3s ease;
}

.underline-hover:hover::after {
  width: 100%;
}

.container {
    max-width: 1140px;
}
.gears {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 68px;
    height: 68px;
    text-align: left;
}
.gear {
    width: 40px;
    height: 40px;
}
.gear1 {
    animation: spin-clockwise 5s linear infinite;
}
.gear2 {
    animation: spin-counterclockwise 5s linear infinite;
}
@keyframes spin-clockwise {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes spin-counterclockwise {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}
.footer {
    margin-top: 20px;
    font-size: 0.9em;
}
.gear2_pos {
    position: absolute; 
    bottom: 0;
    right: 0;
}
h1 {
    display: inline-block;
    margin: 0;
}
a {
    color: #d87a30;
}
.bar-container {
    display: block;
    width: 100%;
    height: 47px;
    position: relative;
    margin: 40px 0;
}
.group-bars {
    width: 50%;
    position: absolute;
    top: 0px;
    right: 0;
    text-align: right;
    display: flex;
    text-align: right;
    flex-direction: column;
    align-items: flex-end;
}
.bar-c1 { width: 100%; }
.bar-c2 { width: calc(100% - 20px); }
.bar-c3 { width: calc(100% - 40px); }
.bar-color {
    display: block;
    position: relative;
    right: 0;
    margin-bottom: 16px;
    height: 5px;
    background: rgb(74,144,226);
    background: linear-gradient(90deg, rgba(74,144,226,1) 0%, rgba(216,122,48,1) 100%);
}
@media screen and (max-width: 586px) {
    .group-bars {
        width: 20%;
        position: absolute;
        top: 23px;
        right: 0;
        text-align: right;
    }
    .bar-color {
        height: 4px;
        margin-bottom: 14px;
    }
}

section.parallax,
section.parallax-video {
  position: relative;
  height: 95vh;
  overflow: hidden;
}

section.parallax {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

section.parallax-video video {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  min-width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

section .content {
  position: relative;
  z-index: 1;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  text-shadow: 0 2px 5px rgba(0,0,0,0.7);
  padding: 0 20px;
}
section::before {
    content: '';
    display: block;
    width: 100%;
    height: 80px;
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    background: #131313;
    background: linear-gradient(180deg, rgba(19, 19, 19, 1) 20%, rgba(19, 19, 19, 0.64) 57%, rgba(19, 19, 19, 0) 100%);
}
section::after {
    content: '';
    display: block;
    width: 100%;
    height: 80px;
    position: absolute;
    z-index: 5;
    bottom: 0;
    left: 0;
    background: #131313;
    background: linear-gradient(0deg, rgba(19, 19, 19, 1) 20%, rgba(19, 19, 19, 0.64) 57%, rgba(19, 19, 19, 0) 100%);
}

.key-point {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 360px;
    min-height: 270px;
    padding: 42px 30px;
    background-color: var(--c-background);
    border-radius: 14px;
    box-shadow: 0px 1px 4px 1px rgba(0,0,0,0.7);
    justify-content: center;
}
.key-point .title {
    font-size: 62px;
    font-weight: bold;
}
.key-point .explanation {
    font-size: 16px;
}

.counter {
  /*font-size: 2em;*/
  /*font-weight: bold;*/
  opacity: 0;
  transition: opacity 0.5s;
}

.counter.visible {
  opacity: 1;
}



/* Politique de confidentialité */
    .privacy {
      padding: 40px 20px;
      color: var(--c-blanc);
      font-family: 'Lato', sans-serif;
      background: var(--c-background);
    }

    .privacy .privacy-container {
      max-width: 900px;
      margin: 0 auto;
      background: var(--c-background-fonce);
      border-radius: var(--radius-menu);
      padding: 40px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.6);
    }

    .meta {
      display: inline-block;
      font-size: .9em;
      color: rgba(255,255,255,.8);
      padding: 6px 10px;
      border-radius: 8px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
      margin-bottom: 18px;
    }

    h1.bar {
      display: block;
      font-size: 2.2rem;
      line-height: 1.2;
      margin: 0 0 14px 0;
      color: #fff;
      padding-bottom: 12px;
      /*border-bottom: 3px solid var(--c-bleu);*/
    }

    h1.bar:after {
        content: '';
        display: block;
        height: 3px;
        width: 100%;
        background: linear-gradient(90deg, rgba(74,144,226,1) 0%, rgba(216,122,48,1) 100%);
        margin-top: 6px;
    }

    h2 {
      font-size: 1.35rem;
      margin: 28px 0 6px 0;
      color: var(--c-blanc);
      padding-left: 12px;
      border-left: 4px solid var(--c-bleu);
    }
    h2:before {
        content: '';
        display: inline-block;
        width: 3px;
        height: 100%;
    }

    .privacy p {
      margin: 0 0 14px 0;
      color: rgba(255,255,255,.92);
    }

    .privacy ul {
      margin: 0 0 16px 22px;
      padding: 0;
    }

    .privacy li {
      margin: 6px 0;
      color: rgba(255,255,255,.92);
    }

    .privacy a {
      color: var(--c-link);
      text-decoration: none;
    }

    .privacy a:hover,
    .privacy a:focus {
      color: var(--c-link-hover);
      text-decoration: underline;
    }

    /* Encadré d’infos (identité du responsable) */
    .privacy .highlight {
      margin: 14px 0 18px 0;
      padding: 14px 16px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.04);
    }

    /* Règle de séparation douce */
    .rule {
      height: 1px;
      width: 100%;
      margin: 22px 0;
      background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.18) 50%,
        rgba(255,255,255,0) 100%
      );
    }

    /* Liste à puces + puce personnalisée discrète */
    .privacy ul li {
      position: relative;
      list-style: none; /* enlever la puce native */
      padding-left: 14px;
    }
    .privacy ul li::before {
      content: '';
      position: absolute;
      left: 0;
      top: .7em;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: linear-gradient(90deg, rgba(74,144,226,1) 0%, rgba(216,122,48,1) 100%);
      transform: translateY(-50%);
    }

    /* Bandeau gradient fin sous les titres pour une touche de marque */
    div.bar {
      height: 2px;
      width: 100%;
      border-radius: 999px;
      margin: 0px 0 12px 0;
      background: linear-gradient(90deg, rgba(74,144,226,1) 0%, rgba(216,122,48,1) 100%);
      opacity: .35;
    }

    /* Accessibilité / focus visibles */
    .privacy a:focus {
      outline: 2px dashed var(--c-bleu);
      outline-offset: 2px;
    }

    /* Responsive */
    @media (max-width: 640px) {
      .privacy { padding: 28px 14px; }
      .privacy .privacy-container { padding: 22px 18px; }
      .privacy h1 { font-size: 1.8rem; }
      .privacy h2 { font-size: 1.15rem; }
    }

    /* Impression (fond blanc, texte noir, liens soulignés) */
    @media print {
      .privacy {
        background: #fff !important;
        color: #000 !important;
        padding: 0;
      }
      .privacy .privacy-container {
        box-shadow: none;
        background: #fff;
        border: none;
        padding: 0;
      }
      .privacy a { color: #000; text-decoration: underline; }
      .privacy .highlight, .privacy .bar { display: none; }
    }


.btn.btn-primary {
    width: 100%;
    padding: 12px 8px;
    border-color: var(--c-bleu);
    background-color: var(--c-bleu);
    transition: all 0.2s;
}
.btn.btn-primary:hover {
    background-color: var(--c-bleu-fonce);
}
.btn.btn-primary:focus {
    width: 100%;
    padding: 12px 8px;
    border-color: var(--c-link);
    background-color: var(--c-link);
}


/* Forcer l'input à garder le style Bootstrap */
.iti { width: 100%; } /* le conteneur prend toute la largeur */

.iti input.form-control {
  width: 100%;
  box-sizing: border-box;
}

/* Quand l’indicatif est séparé, décale le padding pour ne pas chevaucher le drapeau/indicatif */
.iti--separate-dial-code input.form-control,
.iti--allow-dropdown input.form-control {
  padding-left: 3.25rem; /* ajuste si besoin (3rem–3.75rem) */
}

/* Arrondis/bordures cohérents avec Bootstrap au focus */
.iti input.form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

/* Mode sombre (si tu utilises data-bs-theme="dark") */
[data-bs-theme="dark"] .iti__country-list {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
}
[data-bs-theme="dark"] .iti__country.iti__highlight {
  background-color: var(--bs-secondary-bg);
}
.iti__search-input {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}