/* ============================================================
   CHARTE GRAPHIQUE — Portfolio Lindsay
   Noir     : #000000
   Marron   : #7c2e10
   Bleu-vert: #0a858b
   Orange   : #f4950d
   Blanc    : #ffffff
============================================================ */

/* ── Variables globales Bootstrap ──────────────────────────── */
:root {
  /* Couleurs de marque */
  --brand-noir:      #000000;
  --brand-marron:    #7c2e10;
  --brand-bleu-vert: #0a858b;
  --brand-orange:    #f4950d;
  --brand-blanc:     #ffffff;

  /* Redéfinition des couleurs Bootstrap */
  --bs-primary:          #0a858b;
  --bs-primary-rgb:      10, 133, 139;
  --bs-secondary:        #7c2e10;
  --bs-secondary-rgb:    124, 46, 16;
  --bs-dark:             #000000;
  --bs-dark-rgb:         0, 0, 0;
  --bs-warning:          #f4950d;
  --bs-warning-rgb:      244, 149, 13;

  /* Fond et texte */
  --bs-body-bg:          #ffffff;
  --bs-body-color:       #000000;
  --bs-heading-color:    #000000;

  /* Liens — légèrement plus foncé pour accessibilité AA (4,5:1 sur blanc) */
  --bs-link-color:       #086a6f;
  --bs-link-hover-color: #054649;
  --bs-link-color-rgb:   8, 106, 111;

  /* Bordures */
  --bs-border-color: rgba(10, 133, 139, 0.2);

  /* Fond clair (sections bg-light) — blanc chaud */
  --bs-light:     #f5efeb;
  --bs-light-rgb: 245, 239, 235;

  /* Texte secondaire/muted — marron moyen lisible */
  --bs-secondary-color: #5a3a28;
}

/* ── Typographie ───────────────────────────────────────────── */
:root {
  --font-titres: 'Rokkitt', Georgia, serif;
  --font-corps:  'Inter', sans-serif;
  --font-mono:   'B612 Mono', 'Courier New', monospace;
}

/* ── Corps de page ─────────────────────────────────────────── */
body {
  background-color: #ffffff;
  color: #000000;
  font-family: var(--font-corps);
  font-weight: 400;
}

/* Titres → Rokkitt ExtraBold */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6,
.navbar-brand,
.card-title {
  font-family: var(--font-titres);
  font-weight: 800;
  line-height: 1;
  /*letter-spacing: -0.02em;*/
}

/* Corps de texte → Inter */
p, .lead, .card-text,
.text-muted, .text-body-secondary {
  font-family: var(--font-corps);
  font-weight: 400;
  line-height: 1.7;
}

/* Boutons & nav → B612 Mono */
.btn, .nav-link, .navbar-brand,
.footer a, footer a, footer .nav-link,
label {
  font-family: var(--font-mono);
}

/* ── Navbar ────────────────────────────────────────────────── */
nav.navbar.bg-dark,
nav.navbar-dark {
  background-color: #7c2e10 !important;
}

.navbar-dark .navbar-brand,
.navbar-dark .nav-link {
  color: rgba(255, 255, 255, 0.9);
}

.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus,
.navbar-dark .nav-link.active {
  color: #f4950d !important;
}

.navbar-dark .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.4);
}

/* ── Header / hero ──────────────────────────────────────────── */
header.bg-dark {
  background: linear-gradient(180deg, #2a0e06 0%, #7c2e10 100%) !important;
}



/* ── Autres sections bg-dark (hors navbar et header) ───────── */
.bg-dark:not(nav):not(header) {
  background-color: #000000 !important;
}

/* ── Sections claires ──────────────────────────────────────── */
.bg-light {
  background-color: #f5efeb !important;
}

/* ── Bouton primaire (bleu-vert) ───────────────────────────── */
.btn-primary {
  --bs-btn-bg:                #0a858b;
  --bs-btn-border-color:      #0a858b;
  --bs-btn-hover-bg:          #086a6f;
  --bs-btn-hover-border-color:#086a6f;
  --bs-btn-active-bg:         #054649;
  --bs-btn-active-border-color:#054649;
  --bs-btn-color:             #ffffff;
  --bs-btn-hover-color:       #ffffff;
  --bs-btn-active-color:      #ffffff;
  --bs-btn-focus-shadow-rgb:  10, 133, 139;
}

/* ── Bouton secondaire (marron) ────────────────────────────── */
.btn-secondary {
  --bs-btn-bg:                #7c2e10;
  --bs-btn-border-color:      #7c2e10;
  --bs-btn-hover-bg:          #5a2209;
  --bs-btn-hover-border-color:#5a2209;
  --bs-btn-active-bg:         #3d1706;
  --bs-btn-active-border-color:#3d1706;
  --bs-btn-color:             #ffffff;
  --bs-btn-hover-color:       #ffffff;
  --bs-btn-active-color:      #ffffff;
  --bs-btn-focus-shadow-rgb:  124, 46, 16;
}

/* ── Bouton outline-primary (bleu-vert) ────────────────────── */
.btn-outline-primary {
  --bs-btn-color:              #0a858b;
  --bs-btn-border-color:       #0a858b;
  --bs-btn-hover-bg:           #0a858b;
  --bs-btn-hover-border-color: #0a858b;
  --bs-btn-hover-color:        #ffffff;
  --bs-btn-active-bg:          #086a6f;
  --bs-btn-active-border-color:#086a6f;
  --bs-btn-active-color:       #ffffff;
  --bs-btn-focus-shadow-rgb:   10, 133, 139;
}

/* ── Bouton outline-light (sur header sombre) ──────────────── */
.btn-outline-light {
  --bs-btn-color:       #ffffff;
  --bs-btn-border-color:#ffffff;
  --bs-btn-hover-bg:    #ffffff;
  --bs-btn-hover-color: #000000;
  --bs-btn-active-bg:   #f5efeb;
  --bs-btn-active-color:#000000;
}

/* ── Bouton warning (orange) ───────────────────────────────── */
.btn-warning {
  --bs-btn-bg:          #f4950d;
  --bs-btn-border-color:#f4950d;
  --bs-btn-color:       #000000;
  --bs-btn-hover-bg:    #d07c0a;
  --bs-btn-hover-color: #000000;
}

/* ── Badges ────────────────────────────────────────────────── */
.badge.bg-primary,
.bg-primary.badge {
  background-color:  #f4950d !important;
  color: #ffffff !important;
}

.badge.bg-secondary,
.bg-secondary.badge {
  background-color: #7c2e10 !important;
  color: #ffffff !important;
}

.badge.bg-primary2,
.bg-primary.badge {
  border-color: #7c2e10 !important;
}

/* ── Icônes / feature boxes ────────────────────────────────── */
.feature.bg-primary,
.bg-primary.feature {
  background-color: #0a858b !important;
  color: #ffffff !important;
}

/* ── Gradient sur fond primaire ────────────────────────────── */
.bg-primary {
  background-color: #0a858b !important;
}

.bg-primary.bg-gradient {
  background: linear-gradient(135deg, #0a858b 0%, #086a6f 100%) !important;
}

/* ── Textes colorés ────────────────────────────────────────── */
.text-primary {
  color: #0a858b !important;
}

.text-secondary {
  color: #7c2e10 !important;
}

.text-warning {
  color: #f4950d !important;
}

.text-dark {
  color: #000000 !important;
}

/* ── Texte muted / secondaire ──────────────────────────────── */
.text-muted,
.text-body-secondary {
  color: #5a3a28 !important;
}

/* ── Texte muted dans les timelines (inline style override) ── */
.card-text [style*="rgba(123"] {
  color: #5a3a28 !important;
}

/* ── Liens dans les cartes ─────────────────────────────────── */
.link-dark {
  color: #000000 !important;
}

.link-dark:hover {
  color: #0a858b !important;
}

/* ── Cartes ────────────────────────────────────────────────── */
.card {
  --bs-card-border-color: rgba(10, 133, 139, 0.15);
}

/* ── Dropdown ──────────────────────────────────────────────── */
.dropdown-menu {
  --bs-dropdown-border-color:       rgba(10, 133, 139, 0.25);
  --bs-dropdown-link-hover-bg:      rgba(10, 133, 139, 0.1);
  --bs-dropdown-link-hover-color:   #0a858b;
  --bs-dropdown-link-active-bg:     #0a858b;
  --bs-dropdown-link-active-color:  #ffffff;
}

.dropdown-menu .dropdown-item {
  font-family: var(--font-mono);
}

/* ── Timeline ──────────────────────────────────────────────── */
.tl-line-h.bg-primary,
.tl-connector.bg-primary,
.tl-dot.bg-primary {
  background-color: #0a858b !important;
}

/* ── Barre horizontale / séparateur ────────────────────────── */
hr {
  margin: 3rem 0;
  border-color: rgba(10, 133, 139, 0.2);
}

/* ── Focus (accessibilité clavier) ────────────────────────── */
:focus-visible {
  outline: 2px solid #0a858b;
  outline-offset: 2px;
}

/* ── Utilitaires existants ─────────────────────────────────── */
.invisible {
  color: rgba(255, 255, 255, 0);
}

.text-blue {
  color: #0a858b;
}

.bg-primary2 {

  border: 1px solid #7c2e10;
  background-color: #ffffff;
}

/* ── Footer ────────────────────────────────────────────────── */
footer {
  background-color: #7c2e10;
  border-top: none !important;
}

footer h5 {
  font-family: var(--font-mono);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
}

footer .nav-link {
  font-family: var(--font-mono);
  color: rgba(255, 255, 255, 0.72);
  padding-left: 0;
}

footer .nav-link:hover {
  color: #f4950d;
}

footer p, footer small, footer .text-body-secondary {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* ════════════════════════════════════════════════════════════
   SECTIONS LÉGÈREMENT COLORÉES — page d'accueil
════════════════════════════════════════════════════════════ */
section{
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

#methodo{
  height: 100vh;
}
/* ── Timeline → teinte bleu-vert très douce ─────────────────── */
#timeline {
  background-color: #eaf4f4 !important;
}

#methodo {
  background-image: url('../assets/img/fond-bleu.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}




/* ── Démarches → teinte marron très douce ───────────────────── */
#demarches .bg-light {
  background-color: #f5ece7 !important;
}

/* ── Citation → teinte orange très douce ───────────────────── */
main > .py-5.bg-light {
  background-color: #fef3e2 !important;
}

/* ── Projets → teinte bleu-vert douce ───────────────────────── */
#projets-hors-formation {
  background-color: #FFEACD!important;
}
#projets-hors-formation .container{
  z-index: 2;
  position: relative;
}

/* ── Compétences → teinte marron douce ──────────────────────── */
#features {
  background-color: #f2e8e3 !important;
}

#header-about{
  height: 100vh;
}



/* bouton de renvoi vers le haut */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

#back-to-top {
    display: block;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: center / 50% 50% no-repeat #a1a1a1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='32' height='32' fill='white' %3E%3Cpath d='M11.9997 10.8284L7.04996 15.7782L5.63574 14.364L11.9997 8L18.3637 14.364L16.9495 15.7782L11.9997 10.8284Z'%3E%3C/path%3E%3C/svg%3E");
}

.next-to-section {
    display: block;
    position: absolute !important;
    bottom: 2rem;
    left: 2rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: center / 50% 50% no-repeat #a1a1a1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='32' height='32' fill='white' %3E%3Cpath d='M11.9997 10.8284L7.04996 15.7782L5.63574 14.364L11.9997 8L18.3637 14.364L16.9495 15.7782L11.9997 10.8284Z'%3E%3C/path%3E%3C/svg%3E");
    transform: rotate(180deg);
  }

.bg-dark2 {
  background-image: url(../assets/img/ronde.svg), url(../assets/img/fond-jaune.png);
  background-size: 90vmin, contain;
  background-repeat: no-repeat, repeat;
  background-position: bottom -15vmin right -20vmin, center center;
}

.bg-dark2bis {
  background-image: url(../assets/img/fond-jaune.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.bg-dark3 {
  background-image: url(../assets/img/ronde.svg), url(../assets/img/fond-bleu.png);
  background-size: 90vmin, contain;
  background-repeat: no-repeat, repeat;
  background-position: bottom -15vmin right -20vmin, center center;
}

/* ── Rosace responsive — petits et moyens écrans ───────────── */
@media (min-width: 576px) {
  .bg-dark2 {
    background-size: 75vmin, contain;
    background-position: bottom -12vmin right -18vmin, center center;
  }

    .bg-dark3{
    background-size: 75vmin, contain;
    background-position: bottom -12vmin right -18vmin, center center;
  }
}

@media (min-width: 768px) {
  .bg-dark2 {
    background-size: 65vmin, contain;
    background-position: bottom -14vmin right -22vmin, center center;
  }

    .bg-dark3 {
    background-size: 65vmin, contain;
    background-position: bottom -14vmin right -22vmin, center center;
  }
}

/* ── Grand écran — réglages d'origine ──────────────────────── */
@media (min-width: 992px) {
  .bg-dark2 {
    background-size: 75%, contain;
    background-position: bottom -190px right -410px, center center;
  }

    .bg-dark3 {
    background-size: 75%, contain;
    background-position: bottom -190px right -410px, center center;
  }
}

/* ════════════════════════════════════════════════════════════
   HERO / HEADER
════════════════════════════════════════════════════════════ */

header.bg-dark2 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
}

header.bg-dark2bis {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
}

header.bg-dark3 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
}


/* Panneau sombre pour accessibilité RGAA AA (contraste ≥ 4,5:1) */
.hero-content {
  background: rgba(20, 5, 2, 0.62);
  border-radius: 1rem;
  padding: 2rem 2.5rem;
}

/* Personnage décoratif dans le hero */
.header-perso {
  position: absolute;
  bottom: 0;
  right: 4%;
  height: 80%;
  max-height: 600px;
  opacity: 0.2;
  pointer-events: none;
  user-select: none;
}

/* ════════════════════════════════════════════════════════════
   BANDEAU DÉFILANT (like ticker Figma)
════════════════════════════════════════════════════════════ */

.bandeau-orange {
  background-color: var(--brand-orange);
  color: #000000;
  font-family: var(--font-titres);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  padding: 0.65rem 0;
  overflow: hidden;
  white-space: nowrap;
}

.bandeau-orange-inner {
  display: inline-block;
  animation: defilement 22s linear infinite;
}

.bandeau-orange-inner span {
  padding: 0 2.5rem;
}

@keyframes defilement {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ════════════════════════════════════════════════════════════
   BOUTONS — forme pilule
════════════════════════════════════════════════════════════ */

.btn {
  border-radius: 50rem !important;
  padding-inline: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ════════════════════════════════════════════════════════════
   ICÔNES COMPÉTENCES
════════════════════════════════════════════════════════════ */

.feature {
  width: 3.5rem;
  height: 3.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

/* ════════════════════════════════════════════════════════════
   ROSACE DÉCORATIVE EN FILIGRANE
════════════════════════════════════════════════════════════ */

.deco-rosace {
  position: relative;
}

.deco-rosace::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 320px;
  height: 320px;
  background: url('../assets/img/ronde.svg') center / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}


.deco-rosace-top {
  position: relative;
}

.deco-rosace-top::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  height: 320px;
  background: url('../assets/img/ronde.svg') center / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
  z-index: 1;
}


.deco-rosace > * {
  position: relative;
  z-index: 1;
}

.deco-rosace-left {
  position: relative;
}

.deco-rosace-left::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  height: 280px;
  background: url('../assets/img/ronde.svg') center / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

.bg-bottom{
  background-image: url('../assets/img/perso-A3-web.png');
  background-repeat: no-repeat ; 
  background-position: center bottom;
  background-size: contain;
}

.perso-marron {
  position: relative;
  width: 320px;
  height: 320px;
}

.perso-marron::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 320px;
  height: 320px;
  background: url('../assets/img/perso-grand-marron.svg') center / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

.perso-mmaron > * {
  position: relative;
  z-index: 1;
}

.perso-marron-left {
  position: relative;
}

.perso-marron-left::before {
  content: '';
  position: absolute;
  top: 55;
  left: -8vw;
  width: 338px;
  height: 857px;
  background: url('../assets/img/perso-grand-marron.svg') center / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
  transform: rotate(10deg);
}

.lh-10{
  line-height: 1.0 !important;
}

.lh-12{
  line-height: 1.2!important;
}


.lh-14{
  line-height: 1.4 !important;
}