@foreach($works as $work)
<article class="article {{ $work->ref }} row">
  <div class="col-xs-12">



  <!-- CARROUSSEL _______________________________________________________________ -->
  <div class="row">
    <div class="col-xs-12 nopadding">
      @mobile<h1 class="titre-work">{{ $work->titre }}</h1>@endmobile
      <div id="carousel-{{ $work->ref }}" class="carousel slide lazy" data-interval="false" data-ride="carousel">


        <div class="carousel-inner">

              @for ($n = 0; $n <  $work->nb_img; $n++)

                <div class="item @if ($n == 0) active @endif">
                  <div class="image-work">
                      <img class="image-chargement {{ $work->ref }}-{{ $n }}" src="/images/{{ $work->ref }}/{{ $work->ref }}-{{ $n }}-charge.jpg"/>
                      @desktop
                      <img class="image-ok {{ $work->ref }}-{{ $n }}" {{ $n != 0 ? "data-" : "" }}src="/images/{{ $work->ref }}/{{ $work->ref }}-{{ $n }}-md.png"/>
                      @enddesktop
                      @tablet
                      <img class="image-ok {{ $work->ref }}-{{ $n }}" {{ $n != 0 ? "data-" : "" }}src="/images/{{ $work->ref }}/{{ $work->ref }}-{{ $n }}-sm.png"/>
                      @endtablet
                      @mobile
                      <img class="image-ok {{ $work->ref }}-{{ $n }}" {{ $n != 0 ? "data-" : "" }}src="/images/{{ $work->ref }}/{{ $work->ref }}-{{ $n }}-xs.png"/>
                      @endmobile

                    <!--<div class="image-ok {{ $work->ref }}-{{ $n }}" data-dossier="{{ $work->ref }}" data-image="{{ $work->ref }}-{{ $n }}">
                    </div>    -->
                  </div>
                </div>

              @endfor

        </div>






        <a class="left carousel-control" href="#carousel-{{ $work->ref }}" data-slide="prev">

        </a>
        <a class="right carousel-control" href="#carousel-{{ $work->ref }}" data-slide="next">

        </a>

      </div>
      @tablet
        <a href="#carousel-{{ $work->ref }}" data-slide="prev"><img style="width:15px;margin-top:10px;" src="/images/fleche-gauche.png"/></a>
        <a href="#carousel-{{ $work->ref }}" data-slide="next"><img style="width:15px;margin-top:10px;margin-left:5px;" class="fleche" src="/images/fleche-droite.png"/></a>
      @endtablet
      @mobile
        <a href="#carousel-{{ $work->ref }}" data-slide="prev"><img style="width:15px;margin-top:10px;margin-left:15px;" class="fleche" src="/images/fleche-gauche.png"/></a>
        <a href="#carousel-{{ $work->ref }}" data-slide="next"><img style="width:15px;margin-top:10px;margin-left:5px;" class="fleche" src="/images/fleche-droite.png"/></a>
        <!--<p class="bouton-infos">+ Infos</p>-->
      @endmobile
    </div>
  </div>
  <!-- fin Carroussel _______________________________________________________________ -->



  <!-- INFORMATIONS _______________________________________________________________ -->
  @mobile <div style="display:none;"> @endmobile
    <div class="row">
      <div class="col-xs-12 article-informations">

        <div class="row">
          <div class="description col-xs-12 col-sm-8">
            <h1 class="description-h1">{{ $work->titre }}</h1>
            <p>{!! $work->description !!}</p>
          </div>

          <div class="details col-xs-12 col-sm-offset-1 col-sm-3">
            <p>→ {!! $work->details !!}</p>
          </div>
        </div>

      </div>
    </div>
  @mobile </div> @endmobile
  <!-- fin informations _______________________________________________________________ -->



</div>
</article>

@endforeach