/* app.scss - layout principal (index_new.html.twig) */
body {
  background-color: var(--k-paper, #f7f7f7);
}

.grecaptcha-badge {
  display: none !important;
}

/* ---------- Service page (main/default/creaweb.html.twig) ---------- */
.service-notice {
  background: var(--k-dark-card);
  padding: 35px 40px;
  padding-top: 45px;
  border-radius: 8px;
  border-left: 4px solid var(--k-coral);
  box-shadow: 0 10px 30px var(--k-shadow-strong);
  position: relative;
  overflow: hidden;
  margin-bottom: 40px;
}

.service-notice-dots {
  position: absolute;
  top: 15px;
  left: 15px;
  display: flex;
  gap: 8px;
}

.service-notice-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.service-notice-dot--coral {
  background: var(--k-coral);
}
.service-notice-dot--gold {
  background: var(--k-gold);
}
.service-notice-dot--sage {
  background: var(--k-sage-deep);
}

.service-notice-command {
  color: var(--k-coral);
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.2rem;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.service-notice-text {
  color: var(--k-cream-soft);
  font-size: 1.2rem;
  line-height: 1.7;
  font-weight: 600;
  font-family: "Signika", sans-serif;
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}

.service-notice-tags {
  color: var(--k-sage-deep);
  font-family: monospace;
  font-size: 1.1rem;
}

.service-illustration {
  border-radius: 8px;
  box-shadow: 0 4px 15px var(--k-shadow);
  display: inline-block;
  max-width: 100%;
}

.service-illustration-wrapper {
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}

.specialty-wrapper {
  margin-top: 40px;
  padding: 60px 0;
}

.specialty-grid + .specialty-grid {
  margin-top: 30px;
}

.service-stack-section {
  margin-top: 0;
}

.service-stack-copy {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--k-cream-soft);
}

.service-stack-list {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--k-cream-soft);
  margin-bottom: 25px;
  list-style-type: none;
  padding-left: 0;
}

.service-stack-list-marker {
  margin-right: 10px;
  font-weight: bold;
}
.service-stack-list-marker--coral {
  color: var(--k-coral);
}
.service-stack-list-marker--gold {
  color: var(--k-gold);
}
.service-stack-list-marker--sage {
  color: var(--k-sage-deep);
}

.service-stack-quote {
  background: rgba(0, 0, 0, 0.3);
  padding: 15px 20px;
  border-left: 3px solid var(--k-plum);
  font-family: monospace;
  font-size: 1rem;
  color: #aaa;
  border-radius: 4px;
}
.service-stack-quote span {
  color: #fff;
}
/* Google Fonts are now loaded via <link> tags in the HTML head for better compatibility */
html,
body {
  min-height: 100%;
}

html {
  font-family: sans-serif;
}

html body {
  position: relative;
  background-image: url(/build/images/sitebg.d82181f0.jpg);
  background-repeat: repeat;
  background-position: center top;
}

html body nav.navbar-inverse {
  background-color: rgba(0, 0, 0, 0.8);
}

html body div.main-wrapper {
  padding: 50px 0 0;
}

html body div.main-wrapper .nazi {
  color: #a500ff;
  border-color: #a500ff;
}

html body div.main-wrapper hr {
  border-color: rgba(0, 0, 0, 0.4);
}

html body div.main-wrapper h1.main_title {
  color: #333;
  margin-top: 60px;
  text-align: center;
}

html body div.main-wrapper h1.main_title a {
  color: #333;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 200ms;
  -o-transition-duration: 200ms;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  text-decoration: none;
}

html body div.main-wrapper h1.main_title a:hover {
  color: #98b2af;
  text-shadow: #000 3px -3px 5px, #fff 2px 2px 0;
}

html body div.main-wrapper h1.main_title div {
  text-shadow: -3px 3px 0px #999;
}

html body div.main-wrapper h1.main_title div.top {
  background: transparent url(/build/images/deux-traits.08da5414.png) left top repeat-x;
  font-size: 55px;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 200ms;
  -o-transition-duration: 200ms;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
}

html body div.main-wrapper h1.main_title div.top span {
  font-family: "Leckerli One", cursive;
  padding: 0 60px;
  background: transparent url(/build/images/sitebg.d82181f0.jpg) left top repeat-x;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  html body div.main-wrapper h1.main_title div.top {
    font-size: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  html body div.main-wrapper h1.main_title div.top {
    font-size: 45px;
  }
  html body div.main-wrapper h1.main_title div.top span {
    padding: 0 30px;
  }
}
@media only screen and (max-width: 767px) {
  html body div.main-wrapper h1.main_title div.top {
    font-size: 20px;
  }
  html body div.main-wrapper h1.main_title div.top span {
    padding: 0 10px;
  }
}
html body div.main-wrapper h1.main_title div.bigbig {
  margin: 20px 0;
  font-size: 95px;
  text-transform: uppercase;
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 200ms;
  -o-transition-duration: 200ms;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  html body div.main-wrapper h1.main_title div.bigbig {
    font-size: 65px;
  }
}
@media only screen and (max-width: 767px) {
  html body div.main-wrapper h1.main_title div.bigbig {
    font-size: 28px;
    margin: 10px 0;
  }
}
html body div.main-wrapper h1.main_title div.big {
  margin: 20px 0;
  font-size: 75px;
  text-transform: uppercase;
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 200ms;
  -o-transition-duration: 200ms;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  html body div.main-wrapper h1.main_title div.big {
    font-size: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  html body div.main-wrapper h1.main_title div.big {
    font-size: 45px;
  }
}
@media only screen and (max-width: 767px) {
  html body div.main-wrapper h1.main_title div.big {
    font-size: 25px;
    margin: 10px 0;
  }
}
html body div.main-wrapper h1.main_title div.bot span {
  font-family: "Open Sans", sans-serif;
  font-size: 70px;
  text-transform: uppercase;
  font-weight: 800;
}

@media only screen and (max-width: 767px) {
  html body div.main-wrapper h1.main_title div.bot span {
    font-size: 30px;
  }
}
html body div.main-wrapper h1.main_title div.bot p.line {
  background: transparent url(/build/images/simple-trait.e7fa7e00.png) left center repeat-x;
}

html body div.main-wrapper h1.main_title div.bot p.line img {
  background: url(/build/images/sitebg.d82181f0.jpg) repeat scroll left top transparent;
  padding: 20px;
}

@media only screen and (max-width: 767px) {
  html body div.main-wrapper h1.main_title div.bot p.line img {
    padding: 10px;
    width: 50px;
    height: auto;
  }
}
html body div.main-wrapper div.black:before {
  content: "";
  background: url(/build/images/frise_bandeau-top.6115a286.png);
  width: 100%;
  height: 12px;
  display: block;
}

html body div.main-wrapper div.black:after {
  content: "";
  background: url(/build/images/frise_bandeau-sub.67fca2ac.png);
  width: 100%;
  height: 12px;
  display: block;
}

html body div.main-wrapper div.black div.black_content {
  background-color: #333;
  color: #ffffff;
}

html body div.main-wrapper div.content {
  padding: 20px 0;
}

html body div.main-wrapper div.content a {
  color: #564c1d;
}

html body div.main-wrapper div.content p {
  font-size: 1.1em;
}

html body div.main-wrapper div.content h2 {
  font-family: "Yanone Kaffeesatz", sans-serif;
  font-size: 42px;
  margin: 10px 0 30px;
  font-weight: bold;
}

html body div.main-wrapper div.content ul.stared {
  list-style-image: url(/build/images/little-star.09fbd69e.png);
}

html body div.main-wrapper div.content ul.stared.big li {
  margin-bottom: 5px;
  font-size: 19px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  html body div.main-wrapper div.content div#countdown h2 {
    margin-bottom: 0px;
  }
}
@media only screen and (max-width: 767px) {
  html body div.main-wrapper div.content div#countdown h2 {
    margin-bottom: 0px;
  }
}
html body div.main-wrapper div.content div#countdown p {
  margin: 0;
  text-align: center;
  font-family: "Poller One", cursive;
}

html body div.main-wrapper div.content div#countdown p span#annees {
  font-size: 50px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  html body div.main-wrapper div.content div#countdown p span#annees {
    font-size: 40px;
  }
}
@media only screen and (max-width: 767px) {
  html body div.main-wrapper div.content div#countdown p span#annees {
    font-size: 30px;
  }
}
html body div.main-wrapper div.content div#countdown p span#mois {
  font-size: 40px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  html body div.main-wrapper div.content div#countdown p span#mois {
    font-size: 30px;
  }
}
@media only screen and (max-width: 767px) {
  html body div.main-wrapper div.content div#countdown p span#mois {
    font-size: 26px;
  }
}
html body div.main-wrapper div.content div#countdown p span#jours {
  font-size: 27px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  html body div.main-wrapper div.content div#countdown p span#jours {
    font-size: 22px;
  }
}
@media only screen and (max-width: 767px) {
  html body div.main-wrapper div.content div#countdown p span#jours {
    font-size: 22px;
  }
}
html body div.main-wrapper div.content div#countdown p span#heures {
  font-size: 20px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  html body div.main-wrapper div.content div#countdown p span#heures {
    font-size: 17px;
  }
}
@media only screen and (max-width: 767px) {
  html body div.main-wrapper div.content div#countdown p span#heures {
    font-size: 18px;
  }
}
html body div.main-wrapper div.content div#countdown p span#minutes {
  font-size: 17px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  html body div.main-wrapper div.content div#countdown p span#minutes {
    font-size: 15px;
  }
}
@media only screen and (max-width: 767px) {
  html body div.main-wrapper div.content div#countdown p span#minutes {
    font-size: 14px;
  }
}
html body div.main-wrapper div.content div#countdown p span#secondes {
  font-size: 14px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  html body div.main-wrapper div.content div#countdown p span#secondes {
    font-size: 12px;
  }
}
@media only screen and (max-width: 767px) {
  html body div.main-wrapper div.content div#countdown p span#secondes {
    font-size: 10px;
  }
}
html body div.main-wrapper div.content img#tronche {
  display: inline-block;
  margin-top: 40px;
  padding: 15px;
  background-color: #ffffff;
  -moz-box-shadow: 0px 0px 5px #333;
  -webkit-box-shadow: 0px 0px 5px #333;
  box-shadow: 0px 0px 5px #333;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 300ms;
  -o-transition-duration: 300ms;
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
}

@media only screen and (min-width: 1200px) {
  html body div.main-wrapper div.content img#tronche {
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  html body div.main-wrapper div.content img#tronche:hover {
    -moz-transform: rotate(5deg) scale(1.2);
    -ms-transform: rotate(5deg) scale(1.2);
    -webkit-transform: rotate(5deg) scale(1.2);
    transform: rotate(5deg) scale(1.2);
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  html body div.main-wrapper div.content img#tronche {
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  html body div.main-wrapper div.content img#tronche:hover {
    -moz-transform: rotate(-5deg) scale(1.1);
    -ms-transform: rotate(-5deg) scale(1.1);
    -webkit-transform: rotate(-5deg) scale(1.1);
    transform: rotate(-5deg) scale(1.1);
  }
}
html body div.main-wrapper div#skills ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

html body div.main-wrapper div#skills ul li span {
  color: #000;
  font-family: "Yanone Kaffeesatz", sans-serif;
  font-size: 25px;
  padding-left: 15px;
  display: inline-block;
  height: 35px;
  line-height: 35px;
  -moz-border-radius: 0 4px 4px 0;
  -webkit-border-radius: 0;
  border-radius: 0 4px 4px 0;
  text-shadow: #eee 2px 2px 2px;
}

html body article div.article {
  margin-bottom: 20px;
  padding: 20px;
  background: url(/build/images/article-bg.6f632194.jpg) repeat scroll left top rgba(255, 255, 255, 0.3);
  -moz-box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 400ms;
  -o-transition-duration: 400ms;
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
}

html body article div.article:hover {
  background-color: rgba(255, 255, 255, 0.5);
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

html body article div.article h2.article_title {
  margin-top: 0;
  margin-bottom: 20px;
}

html body article div.article h2.article_title a {
  font-family: Signika, sans-serif;
  text-decoration: none;
  color: #333;
  font-size: 50px;
  text-shadow: #999 2px 2px 2px;
  -moz-transition-property: "text-shadow";
  -o-transition-property: "text-shadow";
  -webkit-transition-property: "text-shadow";
  transition-property: "text-shadow";
  -moz-transition-duration: 1000ms;
  -o-transition-duration: 1000ms;
  -webkit-transition-duration: 1000ms;
  transition-duration: 1000ms;
}

html body article div.article h2.article_title a:hover {
  text-shadow: transparent 40px 10px 10px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  html body article div.article h2.article_title a {
    font-size: 45px;
  }
}
@media only screen and (max-width: 767px) {
  html body article div.article h2.article_title a {
    font-size: 28px;
    font-weight: bold;
  }
}
html body article div.article > .contenu {
  word-wrap: break-word;
  margin-top: 20px;
  font-size: 1.2em;
  padding: 5px;
}

html body article div.article > .contenu h1,
html body article div.article > .contenu h2,
html body article div.article > .contenu h3,
html body article div.article > .contenu h4,
html body article div.article > .contenu h5,
html body article div.article > .contenu h6 {
  font-weight: bold;
  font-family: Signika, sans-serif;
}

html body article div.article > .contenu a {
  color: #444;
  text-decoration: none;
  font-weight: bold;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 200ms;
  -o-transition-duration: 200ms;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
}

html body article div.article > .contenu a:hover {
  color: #000;
}

html body article div.article > .p_link {
  margin-bottom: 0;
}

html body article div.date {
  width: 190px;
  position: relative;
  padding: 10px 20px 20px 20px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #ddd;
  margin-bottom: 20px;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 400ms;
  -o-transition-duration: 400ms;
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

html body article div.date:hover {
  color: #fff;
  background-color: #000;
}

@media only screen and (min-width: 1200px) {
  html body article div.date:hover {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  html body article div.date:hover {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
html body article div.date span {
  font-family: "Open Sans", sans-serif;
}

html body article div.date span.day {
  font-size: 75px;
  margin-left: 15px;
  margin-top: 10px;
  font-weight: bold;
  position: relative;
  top: 5px;
}

html body article div.date span.month {
  font-size: 30px;
  display: block;
  text-align: center;
  position: relative;
  top: -15px;
}

html body article div.date span.year {
  font-size: 23px;
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  position: absolute;
  right: 22px;
  top: 56px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  html body article div.date {
    -moz-box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    width: 100%;
    padding: 10px;
    color: #666;
    background: #e2ded5 url(/build/images/article-bg.6f632194.jpg) repeat scroll left top;
    text-align: center;
  }
  html body article div.date:hover {
    color: #000;
  }
  html body article div.date span.day {
    font-size: 25px;
    margin: 0 10px 0 0;
    top: auto;
  }
  html body article div.date span.month {
    font-size: 25px;
    position: static;
    top: auto;
    display: inline;
    margin-right: 10px;
  }
  html body article div.date span.year {
    font-size: 20px;
    position: static;
    top: auto;
  }
}
@media only screen and (max-width: 767px) {
  html body article div.date {
    -moz-box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    width: 100%;
    padding: 10px;
    color: #666;
    background: #e2ded5 url(/build/images/article-bg.6f632194.jpg) repeat scroll left top;
    text-align: center;
  }
  html body article div.date:hover {
    color: #000;
  }
  html body article div.date span.day {
    font-size: 25px;
    margin: 0 20px 0 0;
    top: auto;
  }
  html body article div.date span.month {
    font-size: 25px;
    position: static;
    top: auto;
    display: inline;
    margin-right: 20px;
  }
  html body article div.date span.year {
    font-size: 20px;
    position: static;
    top: auto;
  }
}
html body article div#div-sociale {
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

html body article div#div-sociale p#charity {
  font-size: 13px;
  padding-bottom: 10px;
  border-bottom: 1px dotted #ccc;
}

html body article div#div-sociale a {
  color: #333;
}

html body article div#div-sociale div.fb-like {
  margin-bottom: 10px;
  width: 100%;
}

html body nav ul.pagination li a {
  border: 1px solid #999;
  color: #ccc;
  background-color: rgba(0, 0, 0, 0.4);
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 200ms;
  -o-transition-duration: 200ms;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
}

html body nav ul.pagination li:hover a {
  color: #ddd;
  background-color: rgba(0, 0, 0, 0.6);
}

html body nav ul.pagination li.active a {
  background-color: black;
}

html body nav ul.pagination li.active:hover a {
  color: #fff;
  border-color: #fff;
}

html div#twitage p.date {
  font-size: 12px;
  text-align: right;
  border-bottom: 1px dashed #999;
  padding-bottom: 5px;
  color: #000;
  font-style: italic;
}

html div#derniers_articles p.date {
  font-size: 12px;
  text-align: right;
  border-bottom: 1px dashed #999;
  padding-bottom: 5px;
  color: #000;
  font-style: italic;
}

html div#photos_wrapper div {
  padding: 8px;
  margin: 5px;
  background-color: #fff;
  -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 0 2px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 0 2px;
  box-shadow: rgba(0, 0, 0, 0.3) 0 0 2px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  html div#photos_wrapper div {
    padding: 4px;
    margin: 3px;
  }
}
@media only screen and (max-width: 767px) {
  html div#photos_wrapper div {
    padding: 4px;
  }
}
html div#photos_wrapper div a img {
  height: auto;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  html div#photos_wrapper div a img {
    width: 71px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  html div#photos_wrapper div a img {
    width: 59px;
  }
}
@media only screen and (max-width: 767px) {
  html div#photos_wrapper div a img {
    width: 50px;
  }
}
html footer {
  margin-top: 30px;
  background: #a0bab7 url(/build/images/footer_bg.fa22c6e2.jpg) center top repeat;
  z-index: 50;
  box-shadow: inset 0 20px 20px -20px rgba(0, 0, 0, 0.6);
  padding: 30px 0 20px 0;
}

html footer a {
  display: inline-block;
  margin: 15px 20px;
}

@media only screen and (max-width: 767px) {
  html footer a {
    margin: 10px 10px;
  }
}
html footer a img {
  height: auto;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 200ms;
  -o-transition-duration: 200ms;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  html footer a img {
    width: 140px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  html footer a img {
    width: 100px;
  }
}
@media only screen and (max-width: 767px) {
  html footer a img {
    width: 60px;
  }
}
html #cv {
  padding: 1px 0;
  word-wrap: break-word;
  -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.6) !important;
}

html #cv div.trait_vert,
html #cv div.trait_gris {
  position: relative;
}

html #cv div.trait_vert {
  border-right: 1px solid #84c44d;
}

@media only screen and (max-width: 767px) {
  html #cv div.trait_vert {
    border: none;
  }
}
html #cv div.trait_gris {
  border-right: 1px solid #999;
}

@media only screen and (max-width: 767px) {
  html #cv div.trait_gris {
    border: none;
  }
}
html #cv img.deco {
  position: absolute;
  right: -16px;
  top: -17px;
}

@media only screen and (max-width: 767px) {
  html #cv img.deco {
    display: none;
  }
}
html #cv div#header {
  padding: 60px 0;
}

html #cv div#header h1,
html #cv div#header h2 {
  margin-right: 30px;
}

html #cv div#header h1 {
  color: #999;
  font-size: 55px;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  html #cv div#header h1 {
    text-align: center;
  }
}
@media only screen and (max-width: 767px) {
  html #cv div#header h1 {
    font-size: 35px;
    margin: 0 20px;
  }
}
html #cv div#header h2 {
  color: #84c44d;
  font-size: 30px;
  font-weight: bold;
  margin-top: 0;
  margin-right: 170px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  html #cv div#header h2 {
    text-align: center;
    margin-right: 90px;
  }
}
@media only screen and (max-width: 767px) {
  html #cv div#header h2 {
    font-size: 20px;
    margin-right: 20px;
  }
}
html #cv div#header ul {
  list-style: none;
  padding: 0;
  margin: 3px 0 0 0;
}

html #cv div#header ul li a {
  color: #999;
  text-decoration: none;
}

html #cv div#emplois p.date {
  color: #999;
  font-weight: bold;
  text-align: right;
  font-size: 17px;
  margin-top: 5px;
}

@media only screen and (max-width: 767px) {
  html #cv div#emplois p.date {
    width: 100%;
    text-align: center;
    font-size: 13px;
    background-color: #9ed173;
    color: #fff;
    padding: 5px 0;
  }
}
html #cv div#emplois p.date span {
  display: block;
}

@media only screen and (max-width: 767px) {
  html #cv div#emplois p.date span {
    display: inline;
  }
  html #cv div#emplois p.date span:after {
    content: " <= ";
  }
}
html #cv div#emplois p.jobInfos span.company {
  color: #84c44d;
  display: inline-block;
  margin-right: 25px;
  font-weight: bold;
  font-size: 20px;
}

@media only screen and (max-width: 767px) {
  html #cv div#emplois p.jobInfos span.company {
    display: block;
    text-align: center;
    font-size: 30px;
    margin: 0;
  }
}
html #cv div#emplois p.jobInfos span.city {
  color: #999;
  font-weight: bold;
  font-size: 17px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  html #cv div#emplois p.jobInfos span.city {
    font-weight: 100;
    font-size: 15px;
  }
}
@media only screen and (max-width: 767px) {
  html #cv div#emplois p.jobInfos span.city {
    display: block;
    font-size: 14px;
    text-align: center;
  }
}
html #cv div#emplois h2.jobType {
  color: #999;
  font-weight: bold;
  font-size: 33px;
  margin-top: 10px;
}

@media only screen and (max-width: 767px) {
  html #cv div#emplois h2.jobType {
    display: block;
    text-align: center;
    font-size: 35px;
    margin: 0;
  }
}
html #cv div#emplois p.jobDetails {
  color: #999;
  padding-right: 20px;
}

@media only screen and (max-width: 767px) {
  html #cv div#emplois p.jobDetails {
    display: block;
    text-align: justify;
    font-size: 15px;
    margin: 0;
    padding: 5px 15px;
  }
}
html #cv div#etudes {
  color: #999;
  margin-top: 30px;
}

@media only screen and (max-width: 767px) {
  html #cv div#etudes div.etude {
    padding-bottom: 10px;
    border-top: 2px solid #d3eac0;
    -moz-transition-property: all;
    -o-transition-property: all;
    -webkit-transition-property: all;
    transition-property: all;
    -moz-transition-duration: 200ms;
    -o-transition-duration: 200ms;
    -webkit-transition-duration: 200ms;
    transition-duration: 200ms;
  }
  html #cv div#etudes div.etude:hover {
    border-top: 2px solid #b9dd9a;
    background-color: #eef7e6;
  }
}
html #cv div#etudes div.etude h3 {
  color: #84c44d;
  margin-bottom: 10px;
  font-size: 22px;
  font-weight: bold;
}

@media only screen and (max-width: 767px) {
  html #cv div#etudes div.etude h3 {
    margin-top: 5px;
    padding: 10px;
    text-align: center;
  }
}
html #cv div#etudes div.etude p {
  margin-bottom: 2px;
  font-weight: bold;
}

@media only screen and (max-width: 767px) {
  html #cv div#etudes div.etude p {
    text-align: center;
  }
}
html #cv div#etudes div.etude p > span {
  display: inline-block;
  min-width: 70px;
  text-transform: uppercase;
  font-weight: 100;
}

html #cv div#etudes div.etude p.address {
  font-size: 12px;
  font-style: italic;
  font-weight: 100;
}

html #cv div#etudes div.etude p.annee {
  font-size: 14px;
}

html #cv div#etudes div.etude p.type {
  font-size: 14px;
}

html #cv div#etudes div.etude p.info {
  font-size: 18px;
}

html #cv div#etudes div#competences {
  padding-top: 10px;
}

html #cv div#etudes div#competences h2#h2Comp {
  text-align: center;
  font-size: 40px;
  font-weight: bold;
}

html #cv div#etudes div#competences div.competence {
  margin: 3px 0 5px 0;
}

@media only screen and (max-width: 767px) {
  html #cv div#etudes div#competences div.competence {
    margin: 0;
    padding: 0px 20px;
  }
}
html #cv div#etudes div#competences div.competence span.name {
  font-size: 18px;
  font-weight: bold;
  display: inline-block;
  width: 45%;
  height: 40px;
  line-height: 40px;
  vertical-align: top;
}

html #cv div#etudes div#competences div.competence span.stars {
  font-size: 0px;
  margin-top: 15px;
  display: inline-block;
  height: 10px;
  width: 45%;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-color: #ccc;
}

html #cv div#etudes div#competences div.competence span.stars span {
  background-color: #84c44d;
  display: inline-block;
  height: 10px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

html #cv div#contact {
  margin-top: 50px;
  margin-bottom: 50px;
}

html #cv div#contact h2#h2Contact {
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  color: #999;
}

html #cv div#contact p {
  margin: 20px;
  color: #999;
  font-size: 18px;
}

@media only screen and (max-width: 767px) {
  html #cv div#contact p {
    text-align: center;
  }
}
html #cv div#contact address {
  margin-top: 20px;
  color: #999;
  font-size: 20px;
}

@media only screen and (max-width: 767px) {
  html #cv div#contact address {
    padding-top: 20px;
    margin: 20px;
    border-top: 1px solid #84c44d;
    text-align: center;
  }
}
/* Google Fonts Raleway is now loaded via <link> tags in the HTML head for better compatibility */
div#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  background-color: rgba(0, 0, 0, 0.7);
}

div#modal_wrapper {
  position: fixed;
  left: 0;
  top: 0;
  display: table;
  z-index: 2100;
  height: 100%;
  width: 100%;
}

div#modal_wrapper div#modal_content {
  margin: 0 auto;
  background-color: #fff;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  max-width: 600px;
  width: 90%;
  margin: 100px auto;
  text-align: center;
  padding: 50px 40px;
  font-family: "Raleway", Arial, sans-serif;
  font-size: 25px;
}

div#modal_wrapper div#modal_content button {
  border: none;
  color: white;
  padding: 10px 20px;
  margin-top: 40px;
  font-size: 20px;
}

div#modal_wrapper div#modal_content.danger {
  color: #c94e50;
}

div#modal_wrapper div#modal_content.danger button {
  background-color: #c94e50;
}

div#modal_wrapper div#modal_content.danger button:hover {
  background-color: #af3537;
}

div#modal_wrapper div#modal_content.success {
  color: #61a867;
}

div#modal_wrapper div#modal_content.success button {
  background-color: #61a867;
}

div#modal_wrapper div#modal_content.success button:hover {
  background-color: #4c8a51;
}
/*
 * modern.scss - homepage/site-wide visual refresh, layered on top of main.css.
 *
 * The palette is defined as native CSS custom properties (`--variable`) instead
 * of Sass `$variables`, so this file stays valid as both .scss and .css and the
 * palette is editable in one place.
 *
 * NOTE: keep this file pure ASCII. Any non-ASCII character makes sass emit an
 * `@charset` (or a UTF-8 BOM in compressed mode) at the start of the compiled
 * output, which breaks the rule that follows it in the production bundle.
 */
:root {
  --k-paper: #EFE7D6;
  --k-card-bg: #F7F1E4;
  --k-ink: #2E2A25;
  --k-ink-soft: #5B5346;
  --k-sage: #A0BAB7;
  --k-sage-deep: #5F8079;
  --k-gold: #D9A94A;
  --k-coral: #E2643A;
  --k-coral-deep: #B84A26;
  --k-plum: #8E6B98;
  --k-shadow: rgba(46, 42, 37, 0.18);
  --k-shadow-strong: rgba(46, 42, 37, 0.32);
  /* Dark zone (hero + specialty cards only - the rest of the page stays on
     the light paper palette above). */
  --k-dark-bg: #211E1A;
  --k-dark-card: #2A2621;
  --k-cream: #ECE3D2;
  --k-cream-soft: #C9BEA9;
  /* Decorative star, kept as an escape so the compiled output stays ASCII. */
  --k-star: '\2605';
}

/* Chrome includes the scrollbar's width inside 100vw (Firefox doesn't), so
   the calc(-50vw + 50%) full-bleed tricks below overshoot by the scrollbar
   width in Chrome specifically, causing a stray horizontal scrollbar. Clip
   that sliver instead of chasing exact scrollbar-width math. */
html, body {
  overflow-x: hidden;
}

/* ---------- Script accent (the cursive "Mais qui est donc" line) - every page ---------- */
html body div.main-wrapper h1.main_title div.top span {
  color: var(--k-coral);
}

/* Breadcrumb link inside the hero (e.g. "Blog" on article pages): warmer orange by
   default, while `:not(:hover)` keeps the existing grey/teal hover effect untouched. */
html body div.main-wrapper h1.main_title div.top a:not(:hover) {
  color: var(--k-coral);
}

/* ---------- Hero eyebrow tagline ---------- */
h1.main_title p.eyebrow {
  margin: 0 0 10px;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--k-sage-deep);
  font-weight: 600;
  text-align: center;
}

/* ---------- Hero star: gentle life without being distracting ---------- */
html body div.main-wrapper h1.main_title div.bot p.line img {
  transition: transform 0.4s ease;
}

html body div.main-wrapper h1.main_title:hover div.bot p.line img {
  transform: rotate(8deg) scale(1.08);
}

/* =====================================================================
   Homepage-only dark opening: the hero and the specialty cards read as
   one continuous dark zone instead of light-hero + dark-cards. Scoped
   with :has(.specialty-grid) so other pages (apropos, cv, contact...)
   that reuse h1.main_title keep the original light look.
   ===================================================================== */
/* .main-wrapper's own 50px top padding + h1's 60px margin-top were both
   OUTSIDE h1's box (so outside its background too) - leaving ~110px of the
   body's cream paper texture visible between the nav and the dark hero.
   Zero those and move the same breathing room inside h1 as padding, which
   IS covered by its background. */
body:has(.hero-intro) div.main-wrapper {
  padding-top: 0;
}

body:has(.hero-intro) h1.main_title {
  background: var(--k-dark-bg);
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}

/* main.css also has a longer "html body div.main-wrapper h1.main_title"
   duplicate of the margin-top:60px rule, which out-specs the shorter
   selector above - match that exact chain to actually win. */
html body:has(.hero-intro) div.main-wrapper h1.main_title {
  margin-top: 0;
  padding-top: 100px;
}

/* .hero-intro is also a bootstrap .container, which sets an explicit fixed
   width at each breakpoint - a margin-based full-bleed trick can't expand
   a box whose width isn't "auto". Paint the full-bleed dark bg on a
   viewport-anchored ::before behind it instead, so the fixed width of the
   content box itself is left alone. */
body:has(.hero-intro) .hero-intro {
  position: relative;
  padding-top: 40px;
  padding-bottom: 56px;
}

body:has(.hero-intro) .hero-intro::before {
  content: "";
  display: block;
  position: absolute;
  /* Overlap upward past this box's own top edge - h1.main_title and
     .hero-intro come from separate templates and don't touch exactly,
     which was leaving a sliver of the body's cream paper texture
     showing through between them. */
  top: -30px;
  bottom: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: var(--k-dark-bg);
  z-index: -1;
}

body:has(.hero-intro) .hero-intro::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 14px;
  background-color: transparent;
  background-image: linear-gradient(135deg, var(--k-dark-bg) 50%, transparent 50%), linear-gradient(-135deg, var(--k-dark-bg) 50%, transparent 50%);
  background-size: 16px 16px;
  background-repeat: repeat-x;
  background-position: left top;
  z-index: -1;
}

/* Same duplicate-specificity issue as margin-top above: main.css also has a
   longer "html body div.main-wrapper h1.main_title{color:#333}" rule. */
html body:has(.hero-intro) div.main-wrapper h1.main_title,
body:has(.hero-intro) h1.main_title a,
body:has(.hero-intro) .hero-intro,
body:has(.hero-intro) .hero-intro p,
body:has(.hero-intro) .hero-intro h2,
body:has(.hero-intro) .hero-intro li {
  color: var(--k-cream);
}

body:has(.hero-intro) h1.main_title p.eyebrow {
  color: var(--k-sage);
}

html body:has(.hero-intro) div.main-wrapper h1.main_title div {
  text-shadow: -2px 2px 0px rgba(0, 0, 0, 0.5);
}

/* The original line/star art (deux-traits.png, simple-trait.png, star.png)
   is drawn dark-on-transparent for a light page - invisible on a dark one.
   Drop the raster lines and redraw the star with a gold CSS glyph instead.
   These re-declare the full "html body div.main-wrapper ..." chain the
   originals use in main.css, otherwise the longer original selector wins
   the specificity tie and its raster background keeps showing through. */
html body:has(.hero-intro) div.main-wrapper h1.main_title div.top {
  background: none;
}

html body:has(.hero-intro) div.main-wrapper h1.main_title div.top span {
  background: none;
}

html body:has(.hero-intro) div.main-wrapper h1.main_title div.bot p.line {
  background: none;
  border-top: 1px solid rgba(236, 227, 209, 0.2);
  height: 0;
  position: relative;
}

html body:has(.hero-intro) div.main-wrapper h1.main_title div.bot p.line img {
  display: none;
}

html body:has(.hero-intro) div.main-wrapper h1.main_title div.bot p.line::after {
  content: var(--k-star);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--k-dark-bg);
  color: var(--k-gold);
  font-size: 2.5rem;
  line-height: 1;
  padding: 0 18px;
}

/* ---------- Zigzag divider: CSS teeth instead of the raster frise_* PNGs ---------- */
html body div.main-wrapper div.black:before {
  content: "";
  display: block;
  width: 100%;
  height: 14px;
  background-color: transparent;
  background-image: linear-gradient(45deg, var(--k-dark-bg) 50%, transparent 50%), linear-gradient(-45deg, var(--k-dark-bg) 50%, transparent 50%);
  background-size: 16px 16px;
  background-repeat: repeat-x;
  background-position: left bottom;
}

html body div.main-wrapper div.black:after {
  content: "";
  display: block;
  width: 100%;
  height: 14px;
  background-color: transparent;
  background-image: linear-gradient(135deg, var(--k-dark-bg) 50%, transparent 50%), linear-gradient(-135deg, var(--k-dark-bg) 50%, transparent 50%);
  background-size: 16px 16px;
  background-repeat: repeat-x;
  background-position: left top;
  position: relative;
  z-index: 60;
}

body:has(.hero-intro) footer {
  margin-top: -14px;
}

/* ---------- Bigger section headers ("Ce que j'utilise" / "Derniers articles") ---------- */
html body div.main-wrapper div.content h2 {
  font-size: 3.6rem;
}

/* ---------- Depth on the black specialty section (was a flat background-color:#333) ---------- */
html body div.main-wrapper div.black div.black_content {
  background-color: var(--k-dark-bg);
}

/* ---------- Nav underline (kept the existing bootstrap nav, just gave links a draw-in underline) ---------- */
.navbar-nav > li > a {
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.2rem;
  font-weight: 600;
}

.navbar-nav > li > a::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 6px;
  height: 2px;
  background: var(--k-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

.navbar-nav > li > a:hover::after,
.navbar-nav > li.active > a::after {
  transform: scaleX(1);
}

html body div.main-wrapper div.content.specialty-wrapper {
  padding-top: 80px;
}

/* ---------- Specialty cards ("stamped" tiles) - homepage only ---------- */
.specialty-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -11px;
}

.specialty-grid > div {
  padding: 0 11px;
  margin-bottom: 22px;
}

.stamp-card {
  position: relative;
  height: 100%;
  background: var(--k-dark-card);
  color: var(--k-cream);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  padding: 30px 20px 24px;
  box-shadow: 0 10px 22px var(--k-shadow-strong);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.specialty-grid > div:nth-child(1) .stamp-card {
  transform: rotate(-2deg);
}

.specialty-grid > div:nth-child(2) .stamp-card {
  transform: rotate(1.5deg);
}

.specialty-grid > div:nth-child(3) .stamp-card {
  transform: rotate(-1deg);
}

.specialty-grid > div:nth-child(4) .stamp-card {
  transform: rotate(2deg);
}

/* :hover needs to match the nth-child rules' specificity (3 classes each) or
   it loses the tie and the "flatten + lift" transform never actually swaps in. */
.specialty-grid > div:nth-child(1) .stamp-card:hover,
.specialty-grid > div:nth-child(2) .stamp-card:hover,
.specialty-grid > div:nth-child(3) .stamp-card:hover,
.specialty-grid > div:nth-child(4) .stamp-card:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 18px 30px var(--k-shadow-strong);
}

.stamp-card .tape {
  position: absolute;
  top: -10px;
  left: 50%;
  width: 60px;
  height: 20px;
  transform: translateX(-50%) rotate(-4deg);
  opacity: 0.85;
  box-shadow: 0 2px 4px var(--k-shadow);
}

.specialty-grid > div:nth-child(1) .tape {
  background: var(--k-coral);
  transform: translateX(-50%) rotate(-5deg);
}

.specialty-grid > div:nth-child(2) .tape {
  background: var(--k-gold);
  transform: translateX(-50%) rotate(4deg);
}

.specialty-grid > div:nth-child(3) .tape {
  background: var(--k-sage-deep);
  transform: translateX(-50%) rotate(-3deg);
}

.specialty-grid > div:nth-child(4) .tape {
  background: var(--k-plum);
  transform: translateX(-50%) rotate(5deg);
}

.stamp-card .card-icon {
  display: block;
  font-size: 1.6rem;
  color: var(--k-sage);
  margin-bottom: 10px;
}

.stamp-card h2 {
  color: var(--k-cream);
  margin-top: 0;
}

.stamp-card p {
  color: var(--k-cream-soft);
}

/* ---------- Skills as playful sticker chips ---------- */
ul.skill-stickers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 10px;
}

ul.skill-stickers li {
  color: #fff;
  border-radius: 6px;
  padding: 16px 22px;
  font-size: 1.5rem;
  font-weight: 600;
  box-shadow: 0 4px 0 var(--k-shadow-strong), 0 6px 10px var(--k-shadow);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
  transform: rotate(var(--rot, 0deg));
}
ul.skill-stickers li.skill-coral {
  background: var(--k-coral);
}
ul.skill-stickers li.skill-sage {
  background: var(--k-sage-deep);
}
ul.skill-stickers li.skill-gold {
  background: var(--k-gold);
  color: var(--k-ink);
}
ul.skill-stickers li.skill-plum {
  background: var(--k-plum);
}
ul.skill-stickers li.rot--3 {
  --rot: -3deg;
}
ul.skill-stickers li.rot--2 {
  --rot: -2deg;
}
ul.skill-stickers li.rot--1 {
  --rot: -1deg;
}
ul.skill-stickers li.rot-1 {
  --rot: 1deg;
}
ul.skill-stickers li.rot-2 {
  --rot: 2deg;
}
ul.skill-stickers li.rot-3 {
  --rot: 3deg;
}

ul.skill-stickers li:hover {
  transform: rotate(0deg) translateY(-3px) scale(1.06);
  box-shadow: 0 6px 0 var(--k-shadow-strong), 0 10px 16px var(--k-shadow);
}

ul.skill-bars {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.skill-bars li {
  margin-bottom: 6px;
}

ul.skill-bars li span {
  color: #fff;
  font-family: "Yanone Kaffeesatz", sans-serif;
  font-size: 20px;
  padding-left: 15px;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 2px 5px var(--k-shadow);
  transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Blog list as index-card stamps ---------- */
ul.article-stamps {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.article-stamps li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--k-shadow);
}

ul.article-stamps li:last-child {
  border-bottom: none;
}

ul.article-stamps .stampdate {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px dotted var(--k-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--k-cream-soft);
  text-align: center;
  line-height: 1.2;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, color 0.2s ease;
}

ul.article-stamps li:nth-child(4n+1) .stampdate {
  border-color: var(--k-coral);
}

ul.article-stamps li:nth-child(4n+2) .stampdate {
  border-color: var(--k-sage-deep);
}

ul.article-stamps li:nth-child(4n+3) .stampdate {
  border-color: var(--k-gold);
}

ul.article-stamps li:nth-child(4n+4) .stampdate {
  border-color: var(--k-plum);
}

ul.article-stamps li:hover .stampdate {
  transform: rotate(10deg) scale(1.1);
  color: var(--k-cream);
}

html body div.main-wrapper div.content ul.article-stamps .article-body a {
  text-decoration: none;
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.3;
  color: var(--k-cream);
}

html body div.main-wrapper div.content ul.article-stamps .article-body a:hover {
  color: var(--k-coral);
}

/* ---------- Single blog article page ---------- */
.article-stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  background-color: var(--k-ink);
  color: var(--k-paper);
  border-radius: 50%;
  border: 4px solid var(--k-gold);
  box-shadow: 0 8px 20px var(--k-shadow-strong);
  text-align: center;
  transform: rotate(-4deg);
  transition: transform 0.3s;
}

.article-stamp:hover {
  transform: rotate(0deg) scale(1.05);
}

.article-stamp__day {
  font-size: 3.8rem;
  font-weight: 900;
  line-height: 1;
}

.article-stamp__month {
  margin-top: 4px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--k-gold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.article-stamp__year {
  margin-top: 4px;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--k-cream-soft);
}

/* Sur mobile le tampon date de l'article est trop imposant : on le reduit de moitie. */
@media only screen and (max-width: 767px) {
  .article-stamp {
    width: 75px;
    height: 75px;
    border: 2px solid var(--k-gold);
  }
  .article-stamp__day {
    font-size: 1.9rem;
  }
  .article-stamp__month {
    margin-top: 2px;
    font-size: 0.75rem;
  }
  .article-stamp__year {
    margin-top: 2px;
    font-size: 0.6rem;
  }
}
.article-card {
  background: var(--k-card-bg);
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 10px 30px var(--k-shadow);
  border: 1px solid rgba(46, 42, 37, 0.05);
  margin-bottom: 60px;
}

.article-card__image {
  margin: -40px -40px 30px -40px;
}

.article-card__image img {
  width: 100%;
  border-radius: 8px 8px 0 0;
  object-fit: cover;
  max-height: 400px;
}

.article-card .contenu {
  font-size: 1.45rem;
  line-height: 1.9;
  color: var(--k-ink);
}

.article-card__divider {
  margin: 40px 0;
  border-top: 1px dashed var(--k-shadow);
}

.article-back-link {
  padding: 8px 24px;
  background: transparent;
  border: 2px solid var(--k-sage-deep);
  color: var(--k-sage-deep);
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 4px;
  transition: all 0.2s;
}

.article-back-link:hover,
.article-back-link:focus {
  background: var(--k-sage-deep);
  color: var(--k-paper);
}

/* ---------- Sommaire auto (genere par assets/js/article-page.js) ---------- */
.article-toc {
  display: none;
  margin-bottom: 30px;
  padding: 20px 24px;
  background: var(--k-paper);
  border: 1px solid rgba(46, 42, 37, 0.08);
  border-left: 4px solid var(--k-gold);
  border-radius: 6px;
  box-shadow: 0 4px 12px var(--k-shadow);
}

.article-toc.is-visible {
  display: block;
}

.article-toc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--k-sage-deep);
}

.article-toc__toggle::after {
  content: "";
  width: 10px;
  height: 10px;
  margin-left: 12px;
  flex: 0 0 auto;
  border-right: 3px solid var(--k-sage-deep);
  border-bottom: 3px solid var(--k-sage-deep);
  transform: rotate(45deg); /* chevron pointing down when open */
  transition: transform 0.2s ease;
}

.article-toc.is-collapsed .article-toc__toggle::after {
  transform: rotate(-45deg); /* chevron pointing right when collapsed */
}

.article-toc.is-collapsed ul {
  display: none;
}

.article-toc ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.article-toc__item {
  margin: 6px 0;
}

.article-toc__item--h3 {
  padding-left: 18px;
}

.article-toc__item a {
  color: var(--k-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  font-size: 1.1rem;
  line-height: 1.5;
}

.article-toc__item a:hover,
.article-toc__item a.is-active {
  color: var(--k-coral);
}

.article-toc__item a.is-active {
  border-bottom-color: var(--k-coral);
}

/* ---------- Barre de partage ---------- */
.article-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.article-share__meta {
  margin-right: auto;
  font-size: 1.25rem;
  color: var(--k-ink-soft);
}

.article-share__label {
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--k-ink-soft);
}

.article-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border: 1px solid rgba(46, 42, 37, 0.15);
  border-radius: 26px;
  background: transparent;
  color: var(--k-ink);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s, color 0.2s, background 0.2s, border-color 0.2s;
}

.article-share__btn svg {
  width: 22px;
  height: 22px;
}

.article-share__btn:hover {
  transform: translateY(-1px);
}

.article-share__btn--x:hover {
  color: #ffffff;
  background: #000000;
  border-color: #000000;
}

.article-share__btn--in:hover {
  color: #ffffff;
  background: #0a66c2;
  border-color: #0a66c2;
}

.article-share__btn.is-copied {
  color: var(--k-paper);
  background: var(--k-sage-deep);
  border-color: var(--k-sage-deep);
}

/* ---------- Navigation article precedent / suivant ---------- */
.article-prev-next {
  display: flex;
  gap: 16px;
  margin: 30px 0;
}

.article-prev-next__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 26px;
  border: 1px solid rgba(46, 42, 37, 0.1);
  border-radius: 8px;
  background: transparent;
  text-decoration: none;
  color: var(--k-ink);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.article-prev-next__card:hover {
  background: var(--k-paper);
  box-shadow: 0 6px 16px var(--k-shadow);
  transform: translateY(-2px);
}

.article-prev-next__card--next {
  text-align: right;
}

.article-prev-next__card.is-empty {
  visibility: hidden;
}

.article-prev-next__dir {
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--k-sage-deep);
}

.article-prev-next__title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

/* ---------- Bouton retour en haut ---------- */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--k-sage-deep);
  color: var(--k-paper);
  box-shadow: 0 6px 18px var(--k-shadow-strong);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
  z-index: 100;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--k-gold);
  color: var(--k-ink);
}

/* ---------- CV seal button (replaces the flat btn-cv.png) ---------- */
a.cv-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a3530, #211e1a);
  color: var(--k-paper);
  font-weight: 800;
  letter-spacing: 0.05em;
  font-size: 1.1rem;
  text-decoration: none;
  box-shadow: 0 0 0 4px rgba(239, 231, 214, 0.35), 0 14px 26px rgba(0, 0, 0, 0.35);
  position: relative;
  transition: transform 0.2s ease;
}

a.cv-seal:hover,
a.cv-seal:focus-visible {
  transform: scale(1.06);
  color: var(--k-paper);
}

a.cv-seal::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1.5px dashed rgba(239, 231, 214, 0.45);
  animation: k-seal-pulse 3.5s ease-in-out infinite;
}

@keyframes k-seal-pulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.15;
    transform: scale(1.08);
  }
}
p.cv-caption {
  margin: 18px 0 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--k-ink);
}

@media (prefers-reduced-motion: reduce) {
  a.cv-seal::before,
  html body div.main-wrapper h1.main_title div.bot p.line img {
    animation: none !important;
    transition: none !important;
  }
}
/* ---------- Mobile: keep it tidy - flatten rotations, resize the seal ---------- */
@media only screen and (max-width: 767px) {
  .specialty-grid > div .stamp-card {
    transform: none;
  }
  .stamp-card:hover {
    transform: translateY(-3px);
  }
  .stamp-card .tape {
    width: 48px;
  }
  ul.skill-stickers li {
    transform: none;
    font-size: 1.25rem;
    padding: 12px 16px;
  }
  ul.skill-stickers li:hover {
    transform: translateY(-2px);
  }
  ul.article-stamps li {
    align-items: flex-start;
  }
  ul.article-stamps .stampdate {
    width: 46px;
    height: 46px;
    font-size: 0.95rem;
  }
  a.cv-seal {
    width: 88px;
    height: 88px;
    font-size: 0.95rem;
  }
  .article-card {
    padding: 20px;
  }
  .article-card__image {
    margin: -20px -20px 20px -20px;
  }
  .article-share {
    gap: 8px;
  }
  .article-share__meta {
    width: 100%;
    margin-right: 0;
    font-size: 1.05rem;
  }
  .article-share__label {
    width: 100%;
    font-size: 1rem;
  }
  .article-share__btn {
    flex: 1 1 0;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 1.05rem;
  }
  .article-share__btn svg {
    width: 18px;
    height: 18px;
  }
  .article-prev-next {
    flex-direction: column;
    gap: 12px;
  }
  .article-prev-next__card {
    flex: none;
    padding: 16px 20px;
  }
  .article-prev-next__card--next {
    align-items: flex-end;
  }
  .article-prev-next__card.is-empty {
    display: none;
  }
}
/* ---------- Pagination ---------- */
html body div.main-wrapper ul.pagination > li > a,
html body div.main-wrapper ul.pagination > li > span {
  background: var(--k-dark-card);
  color: var(--k-cream);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0 5px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 1.2rem;
  padding: 10px 18px;
  box-shadow: 0 4px 10px var(--k-shadow);
  transition: all 0.2s ease;
}

/* Annuler les arrondis asymetriques de Bootstrap */
html body div.main-wrapper ul.pagination > li:first-child > a,
html body div.main-wrapper ul.pagination > li:first-child > span,
html body div.main-wrapper ul.pagination > li:last-child > a,
html body div.main-wrapper ul.pagination > li:last-child > span {
  border-radius: 4px;
}

html body div.main-wrapper ul.pagination > li > a:hover,
html body div.main-wrapper ul.pagination > li > a:focus {
  background: var(--k-gold);
  color: var(--k-dark-bg);
  border-color: var(--k-gold);
  transform: translateY(-3px);
  box-shadow: 0 6px 15px var(--k-shadow-strong);
}

html body div.main-wrapper ul.pagination > li.active > a,
html body div.main-wrapper ul.pagination > li.active > span,
html body div.main-wrapper ul.pagination > li.active > a:hover,
html body div.main-wrapper ul.pagination > li.active > span:hover {
  background: var(--k-coral);
  color: var(--k-cream);
  border-color: var(--k-coral);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  transform: none;
  cursor: default;
}

/* ---------- Photos Fancybox Hover ---------- */
html div#photos_wrapper div {
  background-color: transparent;
  box-shadow: none;
  padding: 0;
  margin: 5px;
}

html div#photos_wrapper div a img {
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s, box-shadow 0.2s;
  border: 2px solid transparent;
}

html div#photos_wrapper div a:hover img {
  transform: scale(1.08);
  border-color: var(--k-gold);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.8);
}

/* ---------- Stared list (replaces little-star.png) ---------- */
html body div.main-wrapper div.content ul.stared {
  list-style: none;
  padding-left: 0;
}

html body div.main-wrapper div.content ul.stared > li {
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  font-size: 1.1em;
  line-height: 1.5;
}

html body div.main-wrapper div.content ul.stared > li::before {
  content: var(--k-star);
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--k-gold);
  font-size: 1.5em;
  line-height: 1;
}

/* ---------- Footer secondary navigation ---------- */
html footer nav.footer-nav {
  margin-top: 30px;
}

html footer nav.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 0;
}

html footer nav.footer-nav li {
  padding: 0;
}

html footer nav.footer-nav a {
  display: inline-block;
  margin: 0 12px;
  padding: 6px 8px;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--k-ink);
  border-radius: 4px;
  transition: color 0.2s ease, background 0.2s ease;
}

html footer nav.footer-nav svg.footer-nav-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 6px;
  vertical-align: -0.125em;
  color: var(--k-ink);
}

html footer nav.footer-nav a:hover,
html footer nav.footer-nav a:focus-visible {
  color: var(--k-coral-deep);
  background: rgba(239, 231, 214, 0.35);
}

html footer nav.footer-nav a:hover svg.footer-nav-icon,
html footer nav.footer-nav a:focus-visible svg.footer-nav-icon {
  color: var(--k-coral-deep);
}

@media only screen and (max-width: 767px) {
  html footer nav.footer-nav a {
    margin: 0 6px;
    font-size: 1rem;
  }
}
/* cv.scss - page Mon CV (main/default/cv.html.twig) */
.cv-hero-name {
  color: var(--k-cream);
  font-size: 4rem;
  margin-bottom: 5px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.cv-hero-role {
  color: var(--k-gold);
  font-size: 1.8rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 30px;
}

.cv-hero-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.cv-hero-cta {
  background: var(--k-coral);
  border: none;
  color: var(--k-cream);
  font-weight: 800;
  padding: 12px 30px;
  text-transform: uppercase;
  border-radius: 4px;
  box-shadow: 0 4px 10px var(--k-shadow);
  transition: transform 0.2s;
}
.cv-hero-cta:hover {
  transform: translateY(-2px);
}

.cv-content {
  margin-top: 60px;
  padding-bottom: 80px;
}

.cv-section-title {
  font-size: 3rem;
  margin-bottom: 30px;
  color: var(--k-sage-deep);
  border-bottom: 2px dashed var(--k-shadow);
  padding-bottom: 15px;
}
.cv-section-title--spaced {
  margin-bottom: 40px;
  margin-top: 80px;
}

.cv-skills {
  margin-bottom: 60px;
}

.cv-date {
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--k-coral);
}

.cv-diploma-meta {
  color: var(--k-gold);
  font-size: 1.4rem;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .cv-timeline .col-sm-3 {
    text-align: left !important;
    padding-bottom: 5px;
  }
  .cv-timeline .col-sm-9 {
    border-left: none !important;
    padding-left: 15px !important;
    border-top: 2px solid var(--k-gold);
    padding-top: 15px;
    margin-bottom: 20px;
  }
}
/* Classes extraites des patterns style="" les plus recurrents dans les templates
   (identifies par frequence, >= 4 occurrences). Les styles ponctuels/uniques restent
   inline - voir ROADMAP.md, Travail additionnel (9). */
/* Espacements generiques */
.k-pt-5 {
  padding-top: 5px;
}

.k-pl-15 {
  padding-left: 15px;
}

.k-mb-30 {
  margin-bottom: 30px;
}

.k-mt-40 {
  margin-top: 40px;
}

.k-mt-60 {
  margin-top: 60px;
}

.k-my-40 {
  margin: 40px 0;
}

.k-h-100 {
  height: 100%;
}

/* Typo */
.k-cv-role {
  margin-top: 0;
  font-size: 1.8rem;
  color: var(--k-ink);
  font-weight: 700;
}

.k-text-muted-lg {
  color: var(--k-ink-soft);
  font-weight: 400;
  font-size: 1.1rem;
}

.k-body-copy {
  color: var(--k-ink-soft);
  font-size: 1.15rem;
  line-height: 1.6;
}

.k-badge-plum {
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--k-plum);
}

.k-heading-accent {
  font-weight: 700;
  color: var(--k-sage-deep);
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.k-heading-accent-flush {
  font-weight: 700;
  color: var(--k-sage-deep);
  font-size: 1.2rem;
}

.k-icon-gold-lg {
  color: var(--k-gold);
  font-size: 1.4rem;
}

/* Blocs et separateurs */
.k-accent-border-gold {
  border-left: 3px solid var(--k-gold);
  padding-left: 20px;
}

.k-accent-border-sage {
  border-left: 3px solid var(--k-sage);
  padding-left: 20px;
}

.k-hr-dark {
  border-color: rgba(255, 255, 255, 0.1);
}
/* pricing.scss - page "Pourquoi un site Internet ne coute pas 300 EUR" */
.pricing-hero-title {
  color: var(--k-cream);
  font-size: 3.5rem;
  margin-bottom: 20px;
}

.pricing-hero-lead {
  max-width: 800px;
  margin: 0 auto;
  color: var(--k-cream-soft);
}

.pricing-offset-intro {
  margin-top: 45px;
}

.pricing-calculation {
  background: var(--k-card-bg);
  padding: 20px;
  border-radius: 4px;
  margin: 20px 0;
  border: 1px dashed rgba(46, 42, 37, 0.2);
}

.pricing-calculation p:first-child {
  margin: 0;
}

.pricing-calculation-note {
  margin: 10px 0 0 0;
}

.pricing-calculation-result {
  margin: 10px 0 0 0;
  font-size: 1.2rem;
  color: var(--k-coral-deep);
}

.pricing-list-item {
  margin-bottom: 10px;
}

.pricing-conclusion {
  padding: 40px 0;
}

.pricing-conclusion-lead {
  max-width: 800px;
  margin: 0 auto 30px;
}

.pricing-conclusion-text {
  max-width: 800px;
  margin: 0 auto 30px;
}

.pricing-conclusion-quote {
  font-size: 1.4rem;
  color: var(--k-coral-deep);
}