@charset "UTF-8";
/*!
* Start Bootstrap - Resume v7.0.6 (https://startbootstrap.com/theme/resume)
* Copyright 2013-2023 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-resume/blob/master/LICENSE)
*/
/*!
 * Bootstrap  v5.2.3 (https://getbootstrap.com/)
 * Copyright 2011-2022 The Bootstrap Authors
 * Copyright 2011-2022 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root {
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-body-font-family: Muli, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-bg: #FAF2F0; /*Couleur du background*/

/*Réinitialisation box-sizing à laisser dans le code*/
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
/*Fin réinitialisation box-sizing*/

/*Couleur du texte*/
  .text-primary{
    color : #f33362;
  }
/*Fin couleur du texte*/

/*Logo OM*/
  #logo-om{
    width:100px
  }
  .logo{
    width: 50px;
    margin-right: 50px;
    margin-top: 5px;
  }
/*Fin logo OM*/

/*Impression CV*/
  .marges-impression{
    margin-top:  20px;
  }

  .imprimer{
    margin-bottom: 20px; 
    margin-top: 10px; 
    margin-left:85px; 
    width: 50px; 
    fill: #22bbed;
  }
  .imprimer :hover {
    fill: #F33362;
  }
/*Fin impression CV*/

/*Séparations*/
  #separations{
    margin-bottom: 30px;
  }
/*Fin séparations*/

/*Marges sections*/ 
  .resume-section-content{
    margin-bottom: -40px;
  }
/*Fin marges sections*/

/*Couleur des liens dont adresse mail*/
  a {
    color: #f33362;
    text-decoration: underline;
  }
  a:hover {
    color: #22bbed;
  }
/*Fin couleurs des liens dont adresse mail*/

/*Lectures*/
  .lectures{
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
  }

  .lectures img{
    width: 100px;
    height: 160px;
    object-fit: cover;
  }
/*Fin lectures*/ 

/*Site phoques*/
  #site-internet{
    margin-top: 15px;
  }
/*Fin site phoques*/

/*Formation*/
  /*Début master*/ 
    #m-edition1{
      line-height: 0.5px;
    }
    #ua-1{
      width:80px; 
      margin-right:20px; 
      margin-top: 60px; 
      margin-bottom: -50px;
    }
    #m-edition2{
      margin-left: 100px; 
      margin-top: -60px;
    }
    #m-edition3{
      margin-top:10px;
    } 
  /*Fin master*/

  /*Début licence*/
    #ua-2{
      width:80px; 
      margin-right:15px; 
      margin-top: 60px; 
      margin-bottom: -60px;
    }
    #licence{
      margin-left: 95px;
      margin-top: -60px;
    }
  /*Fin licence*/ 

  /*Début bac*/ 
    #bac{
      width:80px;
      margin-right:15px;
      margin-top: 60px;
      margin-bottom: -40px;
    }
    #bac-mention{
      margin-left: 95px;
      margin-top: -60px;
    }
   /*Fin bac*/
/*Fin formation*/ 

/*Expériences professionnelles*/
  /*CDL*/ 
    #cdl-logo{
      width:80px;
      margin-right: 15px;
      margin-top:60px;
      margin-bottom: -40px;
    }
    #cdl-lieu{
      margin-left:95px;
      margin-top: -60px;
    }
  /*Fin CDL*/ 

  /*JDA*/ 
    #jda-logo{
      width:80px;
      margin-right: 15px;
      margin-top:60px;
      margin-bottom: -50px;
    }
    #jda-lieu{
      margin-left:95px;
      margin-top: -60px;
    }
  /*Fin JDA*/

  /*Kroki*/ 
    #kroki-logo{
      width:80px;
      margin-right: 15px;
      margin-top:60px;
      margin-bottom: -50px;
    }
    #kroki-lieu{
      margin-left:95px;
      margin-top: -60px;
    }
  /*Fin Kroki*/

  /*Bibliothèque*/ 
    #biblio-logo{
      width:80px;
      margin-right: 15px;
      margin-top:60px;
      margin-bottom: -50px;
    }
    #biblio-lieu{
      margin-left:95px;
      margin-top: -60px;
    }
  /*Fin biblothèque*/ 

  /*Super U*/ 
    #u-logo{
      width:80px;
      margin-right: 15px;
      margin-top:60px;
      margin-bottom:-50px;
    }
    #u-lieu{
      margin-left:95px; 
      margin-top: -60px;
    }
  /*Fin Super U*/

  /*Burger King*/ 
    #bk-logo{
      width:80px;
      margin-right: 15px;
      margin-top:60px;
      margin-bottom:-50px;
    }
    #bk-lieu{
      margin-left:95px;
      margin-top: -70px;
    }
  /*Fin Burger King*/
/*Fin expériences professionnelles*/

/*Expériences extra-pro*/ 
  /*Angers BD*/ 
    #angersbd-logo{
      width:100px;
      margin-right: 15px;
      margin-top:60px;
      margin-bottom: -60px;
    }
    #angersbd-lieu{
      margin-left:125px;
      margin-top: -65px;
    }
    #angersbd-date{
      margin-left:125px;
    }
  /*Fin Angers BD*/ 

  /*Short Edition*/ 
    #shorted-logo{
     width:100px;
     margin-right: 15px;
     margin-top: 60px;
     margin-bottom:-60px;
    }
    #shorted-lieu{
      margin-left:125px;
      margin-top: -65px;
    }
    #shorted-date{
      margin-left:125px;
    }
  /*Fin Short Edition*/
/*Fin expériences extra-pro*/ 

/*Compétences*/ 
    #microsoft{
      width:70px;
    }
    #tiktok{
      border-radius: 10px;
    }
    #gsuite{
      width:150px;
    }

  /*Logiciels des compétences*/
    .logiciels {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-top: 30px;
    }

    .logiciels img {
      width: 70px;
    }
  /*Fin logiciels des compétences*/
/*Fin compétences*/

/*Porfolio*/ 
  #docs{
    width:250px;
  }

  .marges-portfolio{
    margin-top: 30px;
  }

  /*Légendes du portfolio*/
    .image-survol {
      position: relative;
      display: inline-block;
    }

    .image-survol img {
      display: block;
    }

    .image-survol .caption {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;

      background: rgba(0, 0, 0, 0.65);
      color: white;
      padding: 8px;
      font-size: 0.9rem;
      text-align: center;

      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .image-survol:hover .caption {
      opacity: 1;
    }
  /*Fin légendes du portfolio*/
  /*Placement des images du portfolio*/
  .images-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin: 15px;
    space-between:15px;
  }
  /*Placement des images du portfolio*/
/*Fin portfolio*/

/*Images survol*/
  .image-survol {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
  }
  .image-survol:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  }
/*Fin images survol*/



/*Rond photo sidebar*/
  .rounded-circle {
    border-radius: 50% !important;
  }
/*Fin rond photo sidebar*/

/*Caractéristiques navbar*/

    /*Repli de la navbar*/
      .collapse:not(.show) {
        display: none;
      }
      .collapsing {
        height: 0;
        overflow: hidden;
        transition: height 0.35s ease;
      }
    /*Repli de la navbar*/

    /*Position de la navbar*/
      .nav-link {
        display: block;
        padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
        font-size: var(--bs-nav-link-font-size);
        font-weight: var(--bs-nav-link-font-weight);
        color: var(--bs-nav-link-color);
        text-decoration: none;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
      }
    /*Position de la navbar*/

    /*Couleur texte quand la souris passe sur la navbar*/
      .nav-link:hover, .nav-link:focus {
        color: var(--bs-nav-link-hover-color);
      }
    /*Couleur texte quand la souris passe sur la navbar*/

    /*Navbar onglet réduit*/
      .name{
        font-weight: 900;
      }

    .navbar {
      --bs-navbar-toggler-padding-y: 0.25rem;
      --bs-navbar-toggler-padding-x: 0.75rem;
      --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
      --bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.1);
      --bs-navbar-toggler-border-radius: 0.375rem;
      --bs-navbar-toggler-focus-width: 0.25rem;
      --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      padding: 5px;
    }

    .navbar-toggler {
      font-size: var(--bs-navbar-toggler-font-size);
      color: rgba(255, 255, 255, 0.3);
      background-color: transparent;
      border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
      border-radius: 5px;
      cursor: pointer;
    }

    .navbar-toggler:focus {
      box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width);
    }

    .navbar-toggler-icon {
      display: inline-block;
      width: 1.5em;
      height: 1.5em;
      vertical-align: middle;
      background-image: var(--bs-navbar-toggler-icon-bg);
    }
  /*Navbar onglet réduit*/

  /*texte "Orlane Merand" navbar*/
    .navbar-brand {
      color: #fff;
      text-decoration: none;
    }

    .navbar-brand:hover, .navbar-brand:focus {
      color: #fff;
    }
      .navbar-nav {
        --bs-nav-link-padding-x: 0;
        --bs-nav-link-padding-y: 0.5rem;
        --bs-nav-link-color: var(--bs-navbar-color);
        --bs-nav-link-hover-color: var(--bs-navbar-hover-color);
        --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
        display: flex;
        flex-direction: column;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
      }

    /*Permet à la navbar de se replier*/
      .navbar-collapse {
        flex-basis: 100%;
        flex-grow: 1;
        align-items: center;
      }

    /*Couleur du backgroung de la navbar*/
      .bg-primary {
        --bs-bg-opacity: 1;
        background-color: #f33362 !important;
      } 

    /*Position fixe de la navbar*/
      .navbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        transition: top 0.3s ease; /* animation de disparition */
        background-color: #fff; /* ou ce que tu veux */
        z-index: 1000;
      }

    /*Position dans la page dans la nav bar*/
      .navbar-nav .show > .nav-link,
      .navbar-nav .nav-link.active {
        color: var(--bs-navbar-active-color);
      }

    /*Couleurs des typos navbar*/
    .navbar-dark {
      --bs-navbar-color: rgba(255, 255, 255, 0.55);
      --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
      --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
      --bs-navbar-active-color: #fff;
      --bs-navbar-brand-color: #fff;
      --bs-navbar-brand-hover-color: #fff;
      --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
      --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    /*Navbar quand demi onglet*/
    .d-none {
      display: none !important;
    }
/*Fin caractéristiques navbar*/

/*Flèche qui permet de revenir en haut de la page*/ 
   html {
      scroll-behavior: smooth;
    }

    #scrollToAbout {
      position: fixed;
      bottom: 30px;
      right: 30px;
      cursor: pointer;
      display: none;
      background-color: #fff;
      border-radius: 50%;
      padding: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      transition: opacity 0.3s ease, transform 0.3s ease;
      z-index: 1000;
      width: 50px;
      height: 50px;
      fill: #22BBED;
    }

    #scrollToAbout.show {
      display: block;
      opacity: 1;
      transform: translateY(0);
    }

    #scrollToAbout.hide {
      opacity: 0;
      transform: translateY(20px);
    }
/*Fin flèche qui permet de revenir en haut de la page*/

/*Code du template à ne pas toucher car il permet la mise en forme du site*/
  /*Impacte les <hr> de sections*/
      .m-0 {
        margin: 0 !important;
      }
    /*Fin impacte les <hr> de sections*/
    body {
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    background-color: var(--bs-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  hr {
    margin: 1rem 0;
    color: inherit;
    border: 0;
    border-top: 1px solid;
    opacity: 0.25;
  }

  h6, .h6, h5, .h5, h4, .h4, h3, .h3, h1, .h1 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-family: "Saira Extra Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 700;
    line-height: 1.2;
    color: #343a40;
  }

  h1, .h1 {
    font-size: 5rem;
  }
  @media (min-width: 1200px) {
  }


  h2, .h2 {
    font-size: calc(1.475rem + 2.7vw);
    color:#22bbed;
    margin-top: -50px;

  }
  @media (min-width: 1200px) {
    h2, .h2 {
      font-size: 3.5rem;
    }
  }

  h3, .h3 {
    font-size: calc(1.325rem + 0.9vw);
  }
  @media (min-width: 1200px) {
    h3, .h3 {
      font-size: 2rem;
    }
  }

  h4, .h4 {
    font-size: calc(1.275rem + 0.3vw);
  }
  @media (min-width: 1200px) {
    h4, .h4 {
      font-size: 1.5rem;
    }
  }

  h5, .h5 {
    font-size: 1.25rem;
  }

  h6, .h6 {
    font-size: 1rem;
  }

  p {
    margin-top: 0;
    margin-bottom: 1rem;
  }

  @media (min-width: 992px) {
    .navbar-expand-lg {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
      flex-direction: row;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
      position: absolute;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
      padding-right: var(--bs-navbar-nav-link-padding-x);
      padding-left: var(--bs-navbar-nav-link-padding-x);
    }
    .navbar-expand-lg .navbar-nav-scroll {
      overflow: visible;
    }
    .navbar-expand-lg .navbar-collapse {
      display: flex !important;
      flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
      display: none;
    }
    .navbar-expand-lg .offcanvas {
      position: static;
      z-index: auto;
      flex-grow: 1;
      width: auto !important;
      height: auto !important;
      visibility: visible !important;
      background-color: transparent !important;
      border: 0 !important;
      transform: none !important;
      transition: none;
    }
    .navbar-expand-lg .offcanvas .offcanvas-header {
      display: none;
    }
    .navbar-expand-lg .offcanvas .offcanvas-body {
      display: flex;
      flex-grow: 0;
      padding: 0;
      overflow-y: visible;
    }
  }
  .mx-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  /* aucune idée mais dans le code*/

  .mb-0 {
    margin-bottom: 4rem !important;
  }

  .mb-1 {
    margin-bottom: 0.25rem !important;
  }

  .mb-2 {
    margin-bottom: 0.5rem !important;
  }

  .mb-3 {
    margin-bottom: 1rem !important;
  }

  .mb-4 {
    margin-bottom: 1.5rem !important;
  }

  .mb-5 {
    margin-bottom: 1px !important;
  }

  .mb-auto {
    margin-bottom: auto !important;
  }

  .p-0 {
    padding: 10 !important;
  }

  @media (min-width: 992px) {
    .d-lg-block {
      display: block !important;
    }
    .d-lg-grid {
      display: grid !important;
    }
    .d-lg-table {
      display: table !important;
    }
    .d-lg-table-row {
      display: table-row !important;
    }
    .d-lg-table-cell {
      display: table-cell !important;
    }
    .d-lg-flex {
      display: flex !important;
    }
    .d-lg-inline-flex {
      display: inline-flex !important;
    }
    .d-lg-none {
      display: none !important;
    }
    .flex-lg-fill {
      flex: 1 1 auto !important;
    }
    .flex-lg-row {
      flex-direction: row !important;
    }
    .flex-lg-column {
      flex-direction: column !important;
    }
    .flex-lg-row-reverse {
      flex-direction: row-reverse !important;
    }
    .flex-lg-column-reverse {
      flex-direction: column-reverse !important;
    }
    .flex-lg-grow-0 {
      flex-grow: 0 !important;
    }
    .flex-lg-grow-1 {
      flex-grow: 1 !important;
    }
    .flex-lg-shrink-0 {
      flex-shrink: 0 !important;
    }
    .flex-lg-shrink-1 {
      flex-shrink: 1 !important;
    }
    .flex-lg-wrap {
      flex-wrap: wrap !important;
    }
    .flex-lg-nowrap {
      flex-wrap: nowrap !important;
    }
    .flex-lg-wrap-reverse {
      flex-wrap: wrap-reverse !important;
    }
  }

  body {
    padding-top: 3.375rem;
    color: #6c757d;
  }

  @media (min-width: 992px) {
    body {
      padding-top: 0;
      padding-left: 17rem;
    }
  }
  h1, .h1,
  h2,
  .h2,
  h3,
  .h3,
  h4,
  .h4,
  h5,
  .h5,
  h6,
  .h6 {
    text-transform: uppercase;
  }

  h1, .h1 {
    line-height: 1;
  }

  p.lead {
    font-size: 1.10rem;
    font-weight: 500;
  }

  .subheading {
    font-family: "Saira Extra Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    text-transform: uppercase;
    font-weight: 500;
    font-size: 1.5rem;
  }

  #sideNav {
    position:fixed;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #sideNav .navbar-nav .nav-item .nav-link {
    font-weight: 800;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
  }
  #sideNav .navbar-toggler:focus {
    outline-color: #d48a6e;
  }

  @media (min-width: 992px) {
    #sideNav {
      padding-left: 0;
      padding-right: 0;
      text-align: center;
      position: fixed;
      top: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      width: 17rem;
      height: 100vh;
    }
    #sideNav .navbar-brand {
      display: flex;
      margin: auto auto 0;
      padding: 0.5rem;
    }
    #sideNav .navbar-brand .img-profile {
      max-width: 10rem;
      max-height: 10rem;
      border: 0.5rem solid rgba(255, 255, 255, 0.2);
    }
    #sideNav .navbar-collapse {
      display: flex;
      align-items: flex-start;
      flex-grow: 0;
      width: 100%;
      margin-bottom: auto;
    }
    #sideNav .navbar-collapse .navbar-nav {
      flex-direction: column;
      width: 100%;
    }
    #sideNav .navbar-collapse .navbar-nav .nav-item {
      display: block;
    }
    #sideNav .navbar-collapse .navbar-nav .nav-item .nav-link {
      display: block;
    }
  }
  .social-icons .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3.5rem;
    width: 3.5rem;
    background-color: #22bbed;
    color: #faf9f0 ;
    border-radius: 30%;
    font-size: 1.5rem;
    margin-right: 1.5rem;
  }
  .social-icons .social-icon:last-child {
    margin-right: 0;
  }
  .social-icons .social-icon:hover {
    background-color: #f33362;
  }
  .dev-icons {
    font-size: 3rem;
  }

  section.resume-section {
    display: flex;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 50px;
    padding-bottom: 5rem;
    max-width: 75rem;
  }
  section.resume-section .resume-section-content {
    width: 100%;
  }

  ::-webkit-datetime-edit-fields-wrapper,
  ::-webkit-datetime-edit-text,
  ::-webkit-datetime-edit-minute,
  ::-webkit-datetime-edit-hour-field,
  ::-webkit-datetime-edit-day-field,
  ::-webkit-datetime-edit-month-field,
  ::-webkit-datetime-edit-year-field {
    padding: 0;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  [type=search] {
    outline-offset: -2px;
    -webkit-appearance: textfield;
  }

  /* rtl:raw:
  [type="tel"],
  [type="url"],
  [type="email"],
  [type="number"] {
    direction: ltr;
  }
  */
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-color-swatch-wrapper {
    padding: 0;
  }

  ::file-selector-button {
    font: inherit;
    -webkit-appearance: button;
  }