clovis
/
bdlg2022


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Laureen 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 Laureen,</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">samedi 10 septembre</div>
        <div>
          

<div>
  <div class="agenda-creneau-header">
    <span class="agenda-creneau-time">07h30-09h00 </span>
    <span class="agenda-creneau-title">Finir nettoyage Durante</span>
  </div>
  <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
    <div class="agenda-creneau-details--content">L&#39;équipe du soir a normalement tout rangé et commencé le gros du nettoyage. Repasser un coup de balai et de serpillère pour que tout soit propre pour le petit dej. Faire un tour au toilettes / cleaner et mettre du PQ.</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>Aymeric Pompom : 06 78 57 28 15</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>Clovis : 06 68 79 86 73</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 90</span>
      </div>
    </div>  
  </div>
</div> 

<div>
  <div class="agenda-creneau-header">
    <span class="agenda-creneau-time">13h30-14h00 </span>
    <span class="agenda-creneau-title">Formation bar</span>
  </div>
  <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
    <div class="agenda-creneau-details--content">Tous les bénévoles qui font du bar dans la soirée se réunissent pour voir lieu / fonctionnement, 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>Jonas : 06 69 74 79 04</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>Adrien : 06 71 80 48 30</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>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>Julien : 06 34 54 45 41</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>David : 06 20 63 29 57</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 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 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>Theo : 06 51 13 60 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>Anne-Gaëlle : 06 66 96 14 07</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>Laurie : 07 77 23 11 34</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>Vincent M. : 06 25 57 25 99</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>Mathilde : 07 71 14 41 46</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>Maxime : 06 16 13 39 41</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>Nicole : 06 34 10 06 88</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>Maël : 06 10 31 87 30</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 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>Félix : 06 38 30 68 67</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 
Jonas 06 69 74 79 04</span>
      </div>
    </div>  
  </div>
</div> 

<div>
  <div class="agenda-creneau-header">
    <span class="agenda-creneau-time">15h00-16h00 </span>
    <span class="agenda-creneau-title">Bar  : samedi aprem</span>
  </div>
  <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
    <div class="agenda-creneau-details--content">Bah tu tiens un bar !</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>Adrien : 06 71 80 48 30</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>Theo : 06 51 13 60 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>Nicole : 06 34 10 06 88</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 
Jonas 06 69 74 79 04</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>Julien : 06 34 54 45 41</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>David : 06 20 63 29 57</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>Mathilde : 07 71 14 41 46</span>
  </div>
</div>
  </div>
</div> 

<div>
  <div class="agenda-creneau-header">
    <span class="agenda-creneau-time">16h00-17h00 </span>
    <span class="agenda-creneau-title">Chasse au trésor</span>
  </div>
  <div class="agenda-creneau-details">   
  </div>
</div> 

<div>
  <div class="agenda-creneau-header">
    <span class="agenda-creneau-time">18h00-19h30 </span>
    <span class="agenda-creneau-title">Bar  : samedi aprem</span>
  </div>
  <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
    <div class="agenda-creneau-details--content">Bah tu tiens un bar !</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>Adrien : 06 71 80 48 30</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 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>Mathilde : 07 71 14 41 46</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 
Jonas 06 69 74 79 04</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>Laurie : 07 77 23 11 34</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>Maxime : 06 16 13 39 41</span>
  </div>
</div> 
  </div>
</div> 

<div>
  <div class="agenda-creneau-header">
    <span class="agenda-creneau-time">20h30-22h00 </span>
    <span class="agenda-creneau-title">Bar : samedi soirée</span>
  </div>
  <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
    <div class="agenda-creneau-details--content">Bah tu tiens un bar !</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>Adrien : 06 71 80 48 30</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>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>Nicole : 06 34 10 06 88</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 
Jonas 06 69 74 79 04</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>Julien : 06 34 54 45 41</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>David : 06 20 63 29 57</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 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>Julien : 06 34 54 45 41</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>David : 06 20 63 29 57</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 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>
</div> 

<div>
  <div class="agenda-creneau-header">
    <span class="agenda-creneau-time">23h00-00h00 </span>
    <span class="agenda-creneau-title">Bar : samedi soirée</span>
  </div>
  <div class="agenda-creneau-details"><div class="agenda-creneau-details--title">Description</div>
    <div class="agenda-creneau-details--content">Bah tu tiens un bar !</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>Adrien : 06 71 80 48 30</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 
Jonas 06 69 74 79 04</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>Theo : 06 51 13 60 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>Mathilde : 07 71 14 41 46</span>
  </div>
</div> 
  </div>
</div> 
        </div>
      </div>
    </div>
  </body>
</html>