Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                base(href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/194946/")
article
  h2 «<em> Êtes-vous bien représentés ? </em>» est une question récurrente posée aux intervenants de ce documentaire…
  |   
  p 
   | Plus précisément : «<em>est-ce que vous vous sentez représentés ? </em>» J’ai pratiquement ouvert toutes les discussions avec cette question un peu brute. C’était une amorce, plus qu’une fin en soi, car au fond la question de la représentation est secondaire. L’idée est d’en arriver, par ce déclencheur, à la question démocratique. En privilégiant l’exploration concrète de l’expérience de mes interlocuteurs. L’un s’est présenté sur une liste municipale, l’autre anime des ateliers de concertation, un autre est président de la Maison de l’Europe, un autre est étudiant, etc. Je les fais tous parler depuis leurs positions singulières.
   | 
  h2 Pendant ces dialogues, vous avez choisi d’être dans le plan.
  p
   | C’est précisément une façon de signifier qu’il ne s’agit pas d’entretiens mais de dialogues. Je me laisse la possibilité de réagir, d’objecter, de prolonger une réflexion du vis-à-vis, comme on le fait dans un dialogue, un logos à deux. C’est beaucoup plus vivant, et surtout, je crois, beaucoup plus conforme à l’humeur démocratique, qui postule l’égalité des interlocuteurs. Chacun est, au pied de la lettre, mis sur le même plan. Il était hors de question pour moi de reconduire ce drôle de dispositif de l’intervieweur invisible, qui parle depuis un non-lieu, voix de personne ou de Dieu qui s’exclut du cercle des égaux, et laisse entendre qu’il occupe un point neutre. La base de la la démocratie, c’est qu’il n’y pas de point neutre, pas de point objectif, pas de point expert. Nous sommes tous embarqués, donc je m’embarque dans le film.
  h2 Comment avez-vous choisi/trouvé les « personnages » ?
  p
   | Ce film est venu d’une idée d’Antoine Glémain, le producteur. Lequel officie en Mayenne. Il y avait donc déjà cette délimitation territoriale, et j’aime assez l’idée, j’aime bien qu’un film, comme chez Rohmer, soit d’abord balisé par un lieu. Ensuite j’ai dit aux gens de l’équipe qui habitent dans le coin : ramenez-moi n’importe qui. Je ne voulais surtout pas entrer dans une logique de panel : un noir, une retraitée, un agriculteur, un homosexuel, etc. Même si cette logique revient au galop au montage, où on se voit créer des équilibres. Mais vraiment l’idée était de parler avec n’importe qui. Avec quiconque le désirerait. Le désir me semble un très bon critère de sélection.
  h2 Y compris avec le premier venu, sur le marché.
  p
   | Oui, on s’est dit qu’on allait tenter la démocratie version JT, c’est à dire le micro-trottoir. Qui a produit ce qu’il produit au JT :  n’importe quoi. On en a fait l’ouverture du film, en le tirant vers la comédie. Le micro-trottoir, c’est pas sérieux. Ca fait quarante ans qu’on le dit, et quarante ans que ça dure.
  h2 Il y a des scènes qui semblent plus écrites.
  p 
    | C’est une hybridation qu’on s’est beaucoup autorisé avec mes amis du collectif Othon, notamment dans <em>Conte de Cergy</em>, après bien d’autres documentaristes. Pour moi l’injection de fiction dans un documentaire est naturelle. Ici c’est parti de l’envie de faire quelque chose avec deux de mes interlocuteurs, qui m’avaient beaucoup amusé, et que je savais capables de tenir un texte. C’est comme ça qu’ont surgi l’idée du cavalier et celle du premier ministre.
  h2 Il ressort de tous ces échanges une certaine perplexité sur l’état de la démocratie. A commencer par la vôtre. 
  p
   | Pour ce qui me concerne, la cause est presque entendue : il y a une antinomie entre le régime représentatif où nous vivons et l’idée démocratique. Et puis un régime pensé pour ne faire jamais advenir au pouvoir des gens des classes populaires, son compte démocratique est réglé. Mes interlocuteurs sont parfois tout aussi radicaux sur le constat, et en même temps la plupart continuent à jouer ce jeu, ce qui ne laisse pas de m’étonner. En gros : le vote est biaisé et ne sert à rien, mais on vote. Cela dit le film essaie de ne pas s’en tenir là, et de prendre le sujet par des angles plus précis, liée à des expériences subjectives :  avec l’un on parlera de la démocratie à l’échelle européenne, avec un chevrier de sa lutte solitaire contre l’usine chimique qui a pollué ses terres, avec un chargé d’affaires de la démocratie en entreprise, avec un élu FN de sa vision du peuple, avec une autre du « collaboratif », etc.
  h2 Et quelques solutions sont abordées…
  p
    | Des solutions, non. Le film n’a pas cette vocation. A la rigueur, en y repensant, je me dis que je cherche plutôt l’aporie, c’est à dire l’impasse intellectuelle. Par exemple avec la sénatrice, je tâche de mettre au jour les contradictions entre ses intentions démocratiques et le système représentatif auquel elle demeure attachée. Une impasse apparaît. Et donc la nécessité d’inventer autre chose. C’est mon coté Socrate de Laval.
  h2 Cet « autre chose » est peut-être figuré par la scène finale, avec ces enfants qui délibèrent entre eux.
  p
    | Mon idée ici n’est pas : l’avenir est entre leurs mains. Mais de filmer une situation proto-démocratique : des gens discutent entre eux, en organisant le dispositif de parole. Il se trouve que ces gens ont entre 5 et 10 ans, ce qui accentue le coté quintessence de démocratie. Mais ce qui m’intéresse c’est le geste premier de la démocratie mis à nu : ça discute. Ça pense à plusieurs voix.
  h2 Et les animaux c’est encore un stade encore plus primitif de la démocratie, non ? 
  p
    | Les animaux sont d’abord mes amis. Et les meilleurs amis du cinéma. Il n’y a pas figure plus charismatique qu’un animal. Donc j’en glisse dès que je peux. Zola disait : jamais un jour sans une ligne. Je dis : jamais un film sans animaux. Ça tombe bien, la Mayenne est un département rural, il y reste quelques bêtes. Plus beaucoup, à vrai dire, comme partout en France. Mais parfois, sur le bord d’une route, on trouve un âne, et c’est une grâce.
  h2 Vous diriez que c’est un film militant ?
  p
    | Un film politique. Pour une part les deux termes s’opposent, en tout cas sur le plan du cinéma. Le cinéma militant sait ce qu’il veut dire, le cinéma politique met en œuvre le questionnement. Mais je crois qu’un documentaire digne de ce nom - celui là en est-il digne ? - est toujours politique, parce qu’il remet au centre le réel. Qui devrait être l’objet exclusif de la réflexion et de l’attention politique. Ça ne devrait être que ça la politique : quelle est la situation et que pouvons-nous faire ? Comment vivent les gens et comment pourraient-ils vivre mieux ? Or, nous remarquons que 90% du commentaire politique n'est pas du tout concerné par le réel. C’est un bien étrange renversement.
  h2 Le film sort en pleine campagne présidentielle, c’est un hasard ?
  p
    | Autant que le hasard existe. La façon dont on se parle dans <em>N’importe qui</em> est tellement à rebours de la rhétorique présidentielle. Ce sont vraiment deux espaces hermétiques l’un à l’autre. A un moment, une mère est avec son bébé devant la télé où sont annoncés les scores du FN aux Régionales de 2015. Elle n’a pas un regard pour l’écran.
  br
  br
  p.note1
   | Entretien avec François Bégaudeau,<br/>réalisateur de <em>N'importe qui</em>, Février 2017
  br
  br
  p.note2
   a(href="http://www.lacor.info/films/auteurs/begaudeau.html", target="_blank") Filmo-biographie de François Bégaudeau
  p.note2
   a(href="http://www.lacor.info/film/nimporte_qui/texte_glemain/index.html", target="_blank") <em>Un démocrate, François Bégaudeau</em>, par Antoine Glémain
   
  br
  br
  br
  br
  br
  br
  br
  br
  br
  
.scrollmore.hide
  button 

              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css?family=Assistant:300,600|Source+Serif+Pro")

$colorsp=indigo
$colorspp=purple

$main-z= 0
$section-z= 0

*
  box-sizing: border-box

body
  background-image url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/194946/white_texture.jpg)
  margin-top: 2rem
  font-family: 'Assistant', sans-serif
  scroll-behavior: smooth
  color:hsl(224, 16%, 12%)
  
a
  color $colorsp
  text-decoration none
  font-style normal !important
  &:hover
     color lighten($colorsp,2)
  
em
  font-style em
  
i
  font-style normal
  
b
  font-style bold
  
sup
  vertical-align:super; 
  font-size .7em
  
.cit,.sign
  line-height 1em

.cit
  text-align justify
  font-size .8em
  color $colorspp
  line-height:1.2em;
  padding 2rem 0 1rem 0
  font-style italic
  @media all and (max-width: 999px) 
    padding  1rem 10vw .5rem 10vw
  @media all and (min-width: 1000px) 
    padding  2rem 10vw .5rem 10vw
  @media all and (min-width: 1400px) 
    padding  4rem 10vw .5rem 10vw

.sign
  font-size .7em
  color gray
  padding 0
  text-align right
  @media all and (max-width: 999px) 
    padding  0 10vw
  @media all and (min-width: 1000px) 
    padding  0 10vw   
  @media all and (min-width: 1500px) 
    padding  0 10vw
  
article
  margin: 0 auto
  font-family: 'Assistant', sans-serif
  
  @media all and (max-width: 999px) 
    margin  0 10%
    width 80% 
    column-width:80%
    font-size: 1.3rem
    line-height 1.8rem   
  
  @media all and (min-width: 1000px) 
    width: 80%
    margin  0 15% 0 auto
    max-width: 950px
    font-size: 1.6rem
    
  @media all and (min-width: 1500px) 
    width: 70%
    margin  0 20%  0 auto
    max-width: 1100px
    font-size: 1.6rem
       
article h1
  padding-top:2rem
  
article p
  text-align:justify
  line-height 1.2em

article p:first-of-type 
  margin-top: 0
        
article p em
  font-style italic
  
.sign em
  font-style italic
 
p.fb
  &:first-child
    &:before
      content:'François Bégaudeau'
  &:before
    content:"FB"
    font-style:bold
  
      
article p b
  font-weight b !important
 
article p:first-of-type
  margin-top: 0
 
article img
  width: 100%
  display: block
  @media all and (max-width: 1000px)
    padding 1em 0
   
article iframe
  width:100%
  margin:0
  border:none
  display: block
  @media all and (max-width: 999px) 
    min-height 90vh
  @media all and (min-width: 1000px) 
     min-height 80vh   
  @media all and (min-width: 1500px) 
     min-height 75vh
  

article h2
  padding-bottom:1em
  padding-top:5rem
  font-variant: all-small-caps
  letter-spacing: .05em
  color $colorsp
  orphans: 4
  font-size: 1.5rem 
  font-weight: 700
  line-height: .8
  text-align: justify
  &:first-child
    padding-top:0
    margin-top:0
  
article h2 
  column-break-before: always
	break-before: column


article h2, article h2 + p:first-line, article p:first-of-type:first-line
  font-variant: all-small-caps
  font-size: 1.8rem
  letter-spacing: .16rem
  
.note1
  text-align right
  position relative
  z-index 10
  
.note2
  text-align right
  font-size .7em 
  font-style normal
  position relative
  z-index 10
  
.scrollmore
  position: fixed
  top: 0
  right: 0
  height: 100%
  display: flex
  align-items: center
  padding: .5rem
  
.scrollmore button
  color: #eee
  font-size: 1.4rem
  width: 3rem
  height: 3rem
  border-radius: 50%
  background: rgba(200, 200, 200, 0.6)
  transition: .4s
  cursor: pointer
  border: none
  outline: none
  
.scrollmore button:hover
  background: rgba(200, 200, 200, 1)
  
.hide
  opacity: 0
  pointer-events: none
  

article p a
  font-family : 'PT sans narrow', sans-serif
              
            
!

JS

              
                let scrollmore =  document.querySelector(".scrollmore"),
scrollMoreButton = scrollmore.getElementsByTagName("button")[0],
leftMargin = parseInt(window.getComputedStyle(document.body).getPropertyValue('margin-left'));

// show horizontal scroll prompt on right edge of screen at sufficiently large screen sizes

function scrollPrompt() {
  if (window.innerWidth < document.body.scrollWidth && (window.pageXOffset + window.innerWidth) !== document.body.scrollWidth) {
  scrollmore.classList.remove("hide");
  } else {
  scrollmore.classList.add("hide");
  }
}

scrollPrompt();

// scroll the window smoothly sideways

scrollMoreButton.addEventListener("click",  function() {
  if (window.scrollTo) {
      window.scrollTo({"behavior": "smooth", "left": window.scrollX + window.innerWidth - leftMargin});
  }
    scrollPrompt();
})

window.addEventListener("resize", scrollPrompt);

              
            
!
999px

Console