clovis
/
bdlg2022


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Sarah Planning</title>
    <style>
      ::before,
::after {
  box-sizing: border-box;
}
:root {
  --color-primary-100: hsl(10, 59%, 25%);
  --color-primary-200: hsl(10, 59%, 45%);
  --color-primary-400: hsl(37, 100%, 45%);
  --color-primary-600: hsl(37, 100%, 65%);
  --color-primary-800: hsl(37, 100%, 85%);

  --color-accent-100: hsl(179, 52%, 15%);
  --color-accent-200: hsl(179, 52%, 25%);
  --color-accent-400: hsl(172, 58%, 40%);
  --color-accent-500: hsl(172, 58%, 53%);
  --color-accent-600: hsl(172, 58%, 66%);
  --color-accent-700: hsl(172, 60%, 70%);
  --color-accent-800: hsl(172, 60%, 80%);
  --color-accent-850: hsl(172, 70%, 90%);
  --color-accent-900: hsl(172, 85%, 95%);
  --color-accent-950: hsl(172, 96%, 98%);

  --color-neutral-100: hsl(37, 5%, 15%);
  --color-neutral-200: hsl(37, 5%, 25%);
  --color-neutral-300: hsl(37, 5%, 35%);
  --color-neutral-400: hsl(37, 5%, 45%);
  --color-neutral-600: hsl(37, 5%, 60%);
  --color-neutral-800: hsl(37, 5%, 80%);
}
.icon {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -moz-font-feature-settings: "liga";
  -moz-osx-font-smoothing: grayscale;
}
.benevole {
  vertical-align: middle;
  display: inline-block;
}
.benevole .icon {
  vertical-align: bottom;
}
.planning-container {
  max-width: 800px;
  width: 100%;
}
.daily-agenda {
  border: solid 1px var(--color-neutral-200);
}
.day-header {
  background: var(--color-neutral-200);
  color: var(--color-accent-800);
  padding: 12px;
  font-size: 1.8rem;
  font-weight: bold;
  text-transform: capitalize;
}
.agenda-creneau-header {
  padding: 12px;
  background: var(--color-accent-850);
  position: relative;
  border-bottom: 1px solid var(--color-accent-600);
}
.agenda-creneau-time {
  padding-right: 8px;
}

.agenda-creneau-title {
  font-weight: bold;
  text-transform: capitalize;
}
.agenda-creneau-action {
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  outline: 0;
  border: 0;
  cursor: pointer;
}
.agenda-creneau-action:hover {
  color: var(--color-neutral-400);
}

.transformation-container {
  height: auto;
  overflow: hidden;
}
.agenda-creneau-details {
  padding: 4px 12px;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  opacity: 1;
  transform-origin: 0px 0px;
  transition: height 0.3s ease-in-out;
}
.agenda-creneau-details--title {
  width: 100%;
  font-weight: 600;
  margin: 8px 0px;
}
.agenda-creneau-details--content {
  width: 100%;
  margin: 0px 0px 8px;
}
@media (min-width: 600px) {
  .name-header {
    text-align: center;
  }
  .planning-container {
    margin-left: auto;
    margin-right: auto;
  }
  .agenda-creneau-time {
    padding-right: 2rem;
  }
  .agenda-creneau-details--title {
    width: 16.6%;
    margin-bottom: 12px;
  }
  .agenda-creneau-details--content {
    width: calc(33.3% - 8px);
    padding-right: 8px;
    margin: 8px 0px 16px;
  }
}

.agenda-creneau-details--content .chip {
  margin: 2px;
}
.hide {
  display: none;
}
#links {
  list-style-type: none;
  max-width: 200px;
  margin: 0 auto;
  border-top: 1px solid var(--color-neutral-400);
  padding: 0;
}
.link-item {
  padding: 8px 12px;
  margin: 0 auto;
  border: solid 1px var(--color-neutral-400);
  border-top: 0px;
}
.link-item a {
  display: block;
}
.formcontrol {
  all: initial;
  display: block;
  box-sizing: border-box;
  font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
}
.formcontrol.home-search {
  margin: 3rem auto 1rem;
  max-width: 400px;
}
.formcontrol:not(:last-child) {
  margin-bottom: 1rem;
}
.formcontrol-control {
  width: 100%;
}
.formcontrol-label {
  color: var(--color-neutral-200);
  display: -webkit-box;
  display: flex;
  font-size: 0.9rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.5rem;
  margin-bottom: 0.2rem;
}
.formcontrol-label > button {
  margin-left: 0.25rem;
}
.formcontrol-optional {
  -webkit-box-flex: 1;
  flex: 1;
  color: #647592;
  font-size: 0.75rem;
  margin-top: 0.25rem;
  text-align: right;
  line-height: 1.125rem;
  margin-left: 0.25rem;
}
.formcontrol-help {
  color: #647592;
  display: -webkit-box;
  display: flex;
  font-size: 0.75rem;
  margin-top: 0.5rem;
  font-family: inherit;
  line-height: 1.125rem;
}
.formcontrol-helplink {
  -webkit-box-flex: 1;
  flex: 1;
  margin-top: calc(-0.25rem);
  text-align: right;
}
.formcontrol--error .formcontrol-help {
  color: #e4002b;
}
.formcontrol--success .formcontrol-help {
  color: #08875b;
}
.input {
  all: initial;
  color: var(--color-neutral-100);
  width: 100%;
  border: none;
  height: 2rem;
  margin: 0;
  outline: 0;
  padding: 0.2rem 0.5rem;
  font-size: 0.875rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: 0 -1px 0 0 var(--color-accent-700) inset;
  box-sizing: border-box;
  -webkit-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
  font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
  line-height: 1.25rem;
  background-color: var(--color-accent-950);
  -webkit-transition-property: box-shadow, border;
  transition-property: box-shadow, border;
}
.input::-webkit-input-placeholder {
  color: #505d74;
}
.input:-ms-input-placeholder {
  color: #505d74;
}
.input::-ms-input-placeholder {
  color: #505d74;
}
.input::placeholder {
  color: #505d74;
}
.input:hover {
  background-color: var(--color-accent-850);
}
.input:focus {
  box-shadow: 0 0 0 2px var(--color-accent-700);
  border-color: transparent;
  background-color: var(--color-accent-950);
}
.input:disabled {
  color: #c1c7d3 !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-color: transparent;
  pointer-events: none;
}
.input:disabled::-webkit-input-placeholder {
  color: #c1c7d3;
}
.input:disabled:-ms-input-placeholder {
  color: #c1c7d3;
}
.input:disabled::-ms-input-placeholder {
  color: #c1c7d3;
}
.input:disabled::placeholder {
  color: #c1c7d3;
}
.input--small {
  height: 2rem;
  font-size: 0.875rem;
  line-height: 1.125rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.input--adorned-start {
  padding-left: 2rem;
}
.input--adorned-end {
  padding-right: 2rem;
}
.input--valid {
  box-shadow: 0 -1px 0 0 #08875b inset !important;
}
.input--valid:focus {
  box-shadow: 0 0 0 2px #08875b !important;
}
.input--invalid {
  box-shadow: 0 -1px 0 0 #e93255 inset !important;
}
.input--invalid:focus {
  box-shadow: 0 0 0 2px #e93255 !important;
}
#search {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224px%22%20fill%3D%22%232ba191%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M15.5%2014h-.79l-.28-.27C15.41%2012.59%2016%2011.11%2016%209.5%2016%205.91%2013.09%203%209.5%203S3%205.91%203%209.5%205.91%2016%209.5%2016c1.61%200%203.09-.59%204.23-1.57l.27.28v.79l5%204.99L20.49%2019l-4.99-5zm-6%200C7.01%2014%205%2011.99%205%209.5S7.01%205%209.5%205%2014%207.01%2014%209.5%2011.99%2014%209.5%2014z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  padding-left: 30px;
  background-position: 4px;
}
    </style>
  </head>
  <body>
    <p>Bonjour Sarah,</p>
    <p>
      tu trouveras ci dessous et ci joint le récapitulatif de tes créneaux pour BDLG.<br />
      Blabla à faire valider à la com bénévole.
    </p>
    <p>Cordialement,<br />La commission Bénévole</p>
    

    <div class="planning-container">
      <div class="daily-agenda">
        <div class="day-header">vendredi 09 septembre</div>
        <div>
          

<div>
  <div class="agenda-creneau-header">
    <span class="agenda-creneau-time">22h00-23h00 </span>
    <span class="agenda-creneau-title">Synchronisation avec les PP</span>
  </div>
  <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
    <div class="agenda-creneau-details--content">Expliquer aux poissons pilotes quel est leur rôle, leur partager les spécificités de leurs tâches, leur présenter le roadbook, leur parler du planning général, leur dire qui contacter en cas de problème, etc...</div>
<div class="agenda-creneau-details--title">Liste des bénévoles avec toi</div>
<div class="agenda-creneau-details--content">
  
  <div class="benevole">
    
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
    <span>Mathieu Split : 06 74 24 06 28</span>
  </div>
  <div class="benevole">
    
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
    <span>Abigaël : 06 70 81 08 23</span>
  </div>
  <div class="benevole">
    
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
    <span>Nathan : 06 03 95 63 75</span>
  </div>
  <div class="benevole">
    
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
    <span>Thibaut : 06 70 12 34 65</span>
  </div>
  <div class="benevole">
    
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
    <span>Gaëlle : 06 70 36 77 33</span>
  </div>
  <div class="benevole">
    
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
    <span>Helena : 06 10 50 87 25</span>
  </div>
  <div class="benevole">
    
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
    <span>Lucile poupoule : 06 16 92 33 72</span>
  </div>
</div> 
    <div class="agenda-creneau-details--title">Le responsable</div>
    <div class="agenda-creneau-details--content">
      <div class="benevole">
        
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
        <span>Nathan : 06 03 95 63 75</span>
      </div>
    </div>  
  </div>
</div> 

<div>
  <div class="agenda-creneau-header">
    <span class="agenda-creneau-time">23h00-00h00 </span>
    <span class="agenda-creneau-title">Rangement bouffe</span>
  </div>
  <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
    <div class="agenda-creneau-details--content">Ranger la bouffe quand le repas est fini : ranger, laver les tables, faire la vaisselles, cleaner la cuisine</div> 
    <div class="agenda-creneau-details--title">Le responsable</div>
    <div class="agenda-creneau-details--content">
      <div class="benevole">
        
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
        <span>Alexis : 06 79 99 31 24</span>
      </div>
    </div> 
<div class="agenda-creneau-details--title">Ceux que tu remplaces</div>
<div class="agenda-creneau-details--content">
  
  <div class="benevole">
    
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
    <span>Nadège : 06 78 64 72 56</span>
  </div>
</div> 
  </div>
</div> 

<div>
  <div class="agenda-creneau-header">
    <span class="agenda-creneau-time">00h00-01h00 </span>
    <span class="agenda-creneau-title">Bar Durante </span>
  </div>
  <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
    <div class="agenda-creneau-details--content">Les gens sont en autonomie pour les bières mais votre créneau sera de changer les futs, nettoyer la zone du bar + gérer l&#39;alcool fort : ne pas ouvrir 1000 bouteilles en même temps, et servir le vin blanc et rosé qui sont au frais
+ passer la serpillère si bière renversée</div>
<div class="agenda-creneau-details--title">Liste des bénévoles avec toi</div>
<div class="agenda-creneau-details--content">
  
  <div class="benevole">
    
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
    <span>Victor : 06 85 57 26 79</span>
  </div>
</div> 
    <div class="agenda-creneau-details--title">Le responsable</div>
    <div class="agenda-creneau-details--content">
      <div class="benevole">
        
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
        <span>Stef : 06 66 33 03 09</span>
      </div>
    </div> 
<div class="agenda-creneau-details--title">Ceux que tu remplaces</div>
<div class="agenda-creneau-details--content">
  
  <div class="benevole">
    
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
    <span>Cédric : 06 85 75 55 08</span>
  </div>
  <div class="benevole">
    
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
    <span>Nicholas : 07 77 82 44 89</span>
  </div>
</div> 
<div class="agenda-creneau-details--title">Les personnes qui arrivent après toi</div>
<div class="agenda-creneau-details--content">
  
  <div class="benevole">
    
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
    <span>Nadège : 06 78 64 72 56</span>
  </div>
  <div class="benevole">
    
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
    <span>Nils : 06 35 38 72 26</span>
  </div>
</div>
  </div>
</div> 

<div>
  <div class="agenda-creneau-header">
    <span class="agenda-creneau-time">01h00-02h00 </span>
    <span class="agenda-creneau-title">Laver les chiottes ! </span>
  </div>
  <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
    <div class="agenda-creneau-details--content">Laver les toilettes (cuvette / serpillère si besoin), les vasques. Vider les poubelles et remettre du PQ si besoin
</div>
<div class="agenda-creneau-details--title">Liste des bénévoles avec toi</div>
<div class="agenda-creneau-details--content">
  
  <div class="benevole">
    
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
    <span>Mathieu Split : 06 74 24 06 28</span>
  </div>
</div> 
    <div class="agenda-creneau-details--title">Le responsable</div>
    <div class="agenda-creneau-details--content">
      <div class="benevole">
        
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
        <span>nan</span>
      </div>
    </div> 
<div class="agenda-creneau-details--title">Ceux que tu remplaces</div>
<div class="agenda-creneau-details--content">
  
  <div class="benevole">
    
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
    <span>Abigaël : 06 70 81 08 23</span>
  </div>
  <div class="benevole">
    
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
    <span>Armand FP : 06 03 46 59 48</span>
  </div>
</div> 
<div class="agenda-creneau-details--title">Les personnes qui arrivent après toi</div>
<div class="agenda-creneau-details--content">
  
  <div class="benevole">
    
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
    <span>Hutch : 06 89 09 67 29</span>
  </div>
  <div class="benevole">
    
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
    <span>Helena : 06 10 50 87 25</span>
  </div>
</div>
  </div>
</div> 

<div>
  <div class="agenda-creneau-header">
    <span class="agenda-creneau-time">04h00-05h00 </span>
    <span class="agenda-creneau-title">Nettoyage et rangement Durante</span>
  </div>
  <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
    <div class="agenda-creneau-details--content">Quand presque tout le monde est parti : ranger la salle, mettre dans les poubelles, mettre dans un coin les bouteilles (attention au tri), etc. 
Passer un coup de balai + serpillère. Cleaner les toilettes.</div>
<div class="agenda-creneau-details--title">Liste des bénévoles avec toi</div>
<div class="agenda-creneau-details--content">
  
  <div class="benevole">
    
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
    <span>Anne Croute : 06 33 02 77 18</span>
  </div>
  <div class="benevole">
    
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
    <span>Nathan : 06 03 95 63 75</span>
  </div>
  <div class="benevole">
    
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
    <span>Amélie : 06 60 15 27 60</span>
  </div>
  <div class="benevole">
    
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
    <span>Voleur Elie : 06 43 71 56 83</span>
  </div>
  <div class="benevole">
    
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
    <span>Audrey : 06 71 20 80 36</span>
  </div>
  <div class="benevole">
    
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
    <span>Hutch : 06 89 09 67 29</span>
  </div>
  <div class="benevole">
    
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
    <span>Louise : 06 77 62 65 64</span>
  </div>
  <div class="benevole">
    
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
    <span>Nils : 06 35 38 72 26</span>
  </div>
  <div class="benevole">
    
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
    <span>Stefan : 06 66 33 03 09</span>
  </div>
</div> 
    <div class="agenda-creneau-details--title">Le responsable</div>
    <div class="agenda-creneau-details--content">
      <div class="benevole">
        
<svg
  class="icon"
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 0 24 24"
  width="24px"
  fill="currentcolor"
>
  <path d="M0 0h24v24H0z" fill="none" />
  <path
    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
  />
</svg>
        <span>Sylvain : 06 72 29 46 89</span>
      </div>
    </div>  
  </div>
</div> 
        </div>
      </div>
    </div>
  </body>
</html>