1119 lines
20 KiB
CSS
1119 lines
20 KiB
CSS
|
@charset "UTF-8";
|
|||
|
|
/* UTF-8 déclaré avant toute chose */
|
|||
|
|
|
|||
|
|
/******************************************************************
|
|||
|
|
* ROCSSTI : une base CSS par Nicolas Hoffmann https://rocssti.net/
|
|||
|
|
* Builder : https://rocssti.net/builder-css
|
|||
|
|
* inspiré par http://www.knacss.com/
|
|||
|
|
*
|
|||
|
|
* Une Röcssti-quote, juste pour le plaisir :
|
|||
|
|
* « Avant Röcssti, les CSS étaient coupées en deux. Maintenant, elles seront pliées en quatre ! » — Coluche
|
|||
|
|
*
|
|||
|
|
* ROCSSTI est sous licence MIT : https://github.com/nico3333fr/ROCSSTI/blob/master/LICENSE
|
|||
|
|
*
|
|||
|
|
* cette CSS est fournie telle quelle, sans aucune garantie d’aucun type,
|
|||
|
|
* l’auteur ne saurait être tenu responsable de quoi que ce soit pour
|
|||
|
|
* l’utilisation de RÖCSSTI.
|
|||
|
|
*
|
|||
|
|
* convention (à adapter si besoin)
|
|||
|
|
* .parent
|
|||
|
|
* .parent__enfant
|
|||
|
|
* .parent--modifieur
|
|||
|
|
*
|
|||
|
|
*
|
|||
|
|
* résumé
|
|||
|
|
* 01 -- reset
|
|||
|
|
* 02 -- ainsi font font font + structure Hx
|
|||
|
|
* 03 -- classes utilitaires + fix typos + styles "balises fixes"
|
|||
|
|
* 04 -- liens + icônes
|
|||
|
|
* 05 -- layout et modules
|
|||
|
|
* 06 -- structure (page / skip links / header / main content / footer)
|
|||
|
|
* 07 -- forms
|
|||
|
|
* 08 -- dans le contenu
|
|||
|
|
* 09 -- breakpoints mineurs entre desktop et tablettes
|
|||
|
|
* 10 -- homo tablettes - breakpoint majeur
|
|||
|
|
* 11 -- breakpoints mineurs entre tablettes et mobile
|
|||
|
|
* 12 -- mobile - breakpoint majeur
|
|||
|
|
* 13 -- breakpoints mineurs tout petit mobile
|
|||
|
|
* 14 -- print
|
|||
|
|
* 15 -- fix viewport
|
|||
|
|
* 16 -- règles d’état
|
|||
|
|
* 17 -- bonus : Fixes IE
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
*****************************************************************
|
|||
|
|
* 1 -- reset
|
|||
|
|
*****************************************************************
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
/* spécial HTML 5 */
|
|||
|
|
article, aside, datagrid, datalist, details, dialog, figure, footer, header, main, menu, nav, section { display: block; }
|
|||
|
|
audio, canvas, progress, video { display: inline-block; }
|
|||
|
|
abbr, eventsource, mark, meter, time, output, bb { display: inline; }
|
|||
|
|
|
|||
|
|
/* à commenter/fallback si vous vous souciez d’IE<8 */
|
|||
|
|
html { box-sizing: border-box; }
|
|||
|
|
*, *:before, *:after {
|
|||
|
|
box-sizing: inherit;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* reset minimum */
|
|||
|
|
html, body, blockquote, ul, ol, form, button { margin: 0; padding: 0; }
|
|||
|
|
button { border: 0; }
|
|||
|
|
p, ul, ol, dl, blockquote, pre, td, th, label, textarea {
|
|||
|
|
font-size: 1em; /* equiv 16px */
|
|||
|
|
line-height: 1.5;
|
|||
|
|
margin: 1.5em 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* fix display img/iframe */
|
|||
|
|
img,
|
|||
|
|
iframe { vertical-align: middle; }
|
|||
|
|
|
|||
|
|
ul, ol { padding-left: 2em; }
|
|||
|
|
|
|||
|
|
.unstyled {
|
|||
|
|
padding-left: 0;
|
|||
|
|
list-style-type: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* la base correspond à 10px */
|
|||
|
|
html {
|
|||
|
|
font-size: 62.5%;
|
|||
|
|
/* IE9-IE11 math fixing. Voir http://bit.ly/1g4X0bX */
|
|||
|
|
/* Merci à @guardian, @victorbritopro, @eQRoeil & Knacss */
|
|||
|
|
font-size: calc(1em * 0.625);
|
|||
|
|
}
|
|||
|
|
body {
|
|||
|
|
background: #fff;
|
|||
|
|
color: rgba(0,0,0,0.6);
|
|||
|
|
font-family: 'merriweatherlight', serif;
|
|||
|
|
font-size: 1.6em; /* taille de base équiv à 16px */
|
|||
|
|
line-height: 1.5; /* à corriger si besoin est */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
*****************************************************************
|
|||
|
|
* 02 -- ainsi font font font + structure Hx
|
|||
|
|
*****************************************************************
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
/*@font-face {
|
|||
|
|
|
|||
|
|
}*/
|
|||
|
|
|
|||
|
|
@import url('../fonts/fonts.css');
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* calculées via http://soqr.fr/vertical-rhythm/ merci @goetter & @eQRoeil */
|
|||
|
|
|
|||
|
|
h1, h2, h3, h4, h5, h6,
|
|||
|
|
.h1, .h2, .h3, .h4, .h5, .h6 {
|
|||
|
|
font-weight: 200;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1,
|
|||
|
|
.h1 {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 1.75em; /* equiv 28px */
|
|||
|
|
line-height: 1.71429;
|
|||
|
|
margin: 0 0 .85714em 0;
|
|||
|
|
}
|
|||
|
|
h2,
|
|||
|
|
.h2 {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 1.625em; /* equiv 26px */
|
|||
|
|
line-height: 1.84615;
|
|||
|
|
margin: 0 0 .92308em 0;
|
|||
|
|
}
|
|||
|
|
h3,
|
|||
|
|
.h3 {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 1.5em; /* equiv 24px */
|
|||
|
|
line-height: 1;
|
|||
|
|
margin: 0 0 .5em 0;
|
|||
|
|
}
|
|||
|
|
h4,
|
|||
|
|
.h4 {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 1.375em; /* equiv 22px */
|
|||
|
|
line-height: 1.09091;
|
|||
|
|
margin: 0 0 1.09091em 0;
|
|||
|
|
}
|
|||
|
|
h5,
|
|||
|
|
.h5 {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 1.25em; /* equiv 20px */
|
|||
|
|
line-height: 1.2;
|
|||
|
|
margin: 0 0 1.2em 0;
|
|||
|
|
}
|
|||
|
|
h6,
|
|||
|
|
.h6 {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 1.125em; /* equiv 18px */
|
|||
|
|
line-height: 1.33333;
|
|||
|
|
margin: 0 0 1.33333em 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uppercase {
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* autres classes utiles */
|
|||
|
|
.smaller {
|
|||
|
|
font-size: .6875em; /* equiv 11px */
|
|||
|
|
line-height: 2.18182;
|
|||
|
|
margin: 2.18182em 0;
|
|||
|
|
}
|
|||
|
|
.small {
|
|||
|
|
font-size: .75em; /* equiv 12px */
|
|||
|
|
line-height: 2;
|
|||
|
|
margin: 2em 0;
|
|||
|
|
}
|
|||
|
|
.big {
|
|||
|
|
font-size: 1.125em; /* equiv 18px */
|
|||
|
|
line-height: 1.33333;
|
|||
|
|
margin: 1.33333em 0;
|
|||
|
|
}
|
|||
|
|
.bigger {
|
|||
|
|
font-size: 1.25em; /* equiv 20px */
|
|||
|
|
line-height: 1.2;
|
|||
|
|
margin: 1.2em 0;
|
|||
|
|
}
|
|||
|
|
.biggest {
|
|||
|
|
font-size: 1.375em; /* equiv 22px */
|
|||
|
|
line-height: 1.09091;
|
|||
|
|
margin: 1.09091em 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
*****************************************************************
|
|||
|
|
* 03 -- classes utilitaires + fix typos + styles "balises fixes"
|
|||
|
|
*****************************************************************
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
.noborder,
|
|||
|
|
iframe { border: 0; }
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
* repris de http://tinytypo.tetue.net/ de @tetue
|
|||
|
|
* tuné avec l’aide de http://www.nicolas-hoffmann.net/utilitaires/codes-hexas-ascii-unicode-utf8-caracteres-usuels.php
|
|||
|
|
*
|
|||
|
|
* voir http://en.wikipedia.org/wiki/International_variation_in_quotation_marks pour les références
|
|||
|
|
*/
|
|||
|
|
q {
|
|||
|
|
quotes: "\201C" "\201D" "\2018" "\2019";
|
|||
|
|
}
|
|||
|
|
:lang(fr) > q {
|
|||
|
|
quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D" "\2018" "\2019";
|
|||
|
|
}
|
|||
|
|
:lang(en) > q {
|
|||
|
|
quotes: "\201C" "\201D" "\2018" "\2019";
|
|||
|
|
}
|
|||
|
|
:lang(es) > q {
|
|||
|
|
quotes: "\00AB" "\00BB" "\201C" "\201D";
|
|||
|
|
}
|
|||
|
|
:lang(it) > q {
|
|||
|
|
quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D";
|
|||
|
|
}
|
|||
|
|
:lang(de) > q {
|
|||
|
|
quotes: "\201e" "\201c" "\201a" "\2018";
|
|||
|
|
}
|
|||
|
|
q:before {
|
|||
|
|
content: open-quote;
|
|||
|
|
}
|
|||
|
|
q:after {
|
|||
|
|
content: close-quote;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* éviter interlignage disgracieux */
|
|||
|
|
sup,
|
|||
|
|
sub {
|
|||
|
|
vertical-align: 0;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
sup {
|
|||
|
|
bottom: 1ex;
|
|||
|
|
}
|
|||
|
|
sub {
|
|||
|
|
top: .5ex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* éviter marges supplémentaires sur éléments imbriqués */
|
|||
|
|
li p,
|
|||
|
|
li ul {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
margin-top: 0;
|
|||
|
|
}
|
|||
|
|
/* Vous ne passerez PAS (Gandalf) */
|
|||
|
|
textarea,
|
|||
|
|
table,
|
|||
|
|
td,
|
|||
|
|
th,
|
|||
|
|
code,
|
|||
|
|
pre,
|
|||
|
|
samp,
|
|||
|
|
div,
|
|||
|
|
p,
|
|||
|
|
.cut {
|
|||
|
|
word-wrap: break-word;
|
|||
|
|
-webkit-hyphens: auto;
|
|||
|
|
-moz-hyphens: auto;
|
|||
|
|
-ms-hyphens: auto;
|
|||
|
|
-o-hyphens: auto;
|
|||
|
|
hyphens: auto;
|
|||
|
|
}
|
|||
|
|
/* pour supprimer la césure si besoin */
|
|||
|
|
.nocut {
|
|||
|
|
word-wrap: normal;
|
|||
|
|
-webkit-hyphens: none;
|
|||
|
|
-moz-hyphens: none;
|
|||
|
|
-ms-hyphens: none;
|
|||
|
|
-o-hyphens: none;
|
|||
|
|
hyphens: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
code,
|
|||
|
|
pre,
|
|||
|
|
samp {
|
|||
|
|
white-space: pre-wrap;
|
|||
|
|
}
|
|||
|
|
code {
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
kbd {
|
|||
|
|
border: solid 1px;
|
|||
|
|
border-top-left-radius: .5em;
|
|||
|
|
border-top-right-radius: .5em;
|
|||
|
|
padding: 0 .25em;
|
|||
|
|
}
|
|||
|
|
table {
|
|||
|
|
margin-bottom: 1.5em;
|
|||
|
|
table-layout: fixed;
|
|||
|
|
}
|
|||
|
|
/* j’y tiens, les abbr c’est bon pour la planète */
|
|||
|
|
/* seuls ceux ayant un title sont signalés */
|
|||
|
|
abbr[title] {
|
|||
|
|
border-bottom: dotted 1px;
|
|||
|
|
cursor: help;
|
|||
|
|
text-decoration: none;
|
|||
|
|
/* couleur héritée du texte */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* alignements de textes */
|
|||
|
|
.alignright { text-align: right; }
|
|||
|
|
.aligncenter { text-align: center; }
|
|||
|
|
.alignleft { text-align: left; }
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
*****************************************************************
|
|||
|
|
* 04 -- liens + icônes
|
|||
|
|
*****************************************************************
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
/* Liens */
|
|||
|
|
a {
|
|||
|
|
color: #1eaedb;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
/* penser au focus */
|
|||
|
|
a:focus,
|
|||
|
|
a:hover,
|
|||
|
|
a:active {
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
/* éviter la bordure sur une image comprise dans un lien + fix bordure image IE */
|
|||
|
|
a:link img,
|
|||
|
|
a:visited img,
|
|||
|
|
img {
|
|||
|
|
border-style: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nodecoration {
|
|||
|
|
text-decoration: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* liens avec icônes, on peut utiliser les DATA-URI */
|
|||
|
|
|
|||
|
|
/* pour signaler liens externes */
|
|||
|
|
/*a[href^="http://"],
|
|||
|
|
a[href^="https://"] {
|
|||
|
|
|
|||
|
|
}*/
|
|||
|
|
/* si URL complète sur un lien interne, virer signalement liens externes */
|
|||
|
|
/*a[href^="http://www.mondomaine.com"] {
|
|||
|
|
|
|||
|
|
}*/
|
|||
|
|
/* contact, liens mailto */
|
|||
|
|
/*.mail,
|
|||
|
|
a[href^="mailto:"] {
|
|||
|
|
|
|||
|
|
}*/
|
|||
|
|
/* dont l’URL se termine par .pdf ou ce que vous voulez comme extension */
|
|||
|
|
/*a[href$=".pdf"] {
|
|||
|
|
|
|||
|
|
}*/
|
|||
|
|
|
|||
|
|
/* facto icons */
|
|||
|
|
/*[class*=icon-30] {
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 30px;
|
|||
|
|
height: 30px;
|
|||
|
|
}*/
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
*****************************************************************
|
|||
|
|
* 05 -- layout et modules
|
|||
|
|
*****************************************************************
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* layout
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* ça dépend, ça dépasse */
|
|||
|
|
img,
|
|||
|
|
table,
|
|||
|
|
td,
|
|||
|
|
blockquote,
|
|||
|
|
code,
|
|||
|
|
pre,
|
|||
|
|
textarea,
|
|||
|
|
input,
|
|||
|
|
svg {
|
|||
|
|
height: auto;
|
|||
|
|
max-width: 100%;
|
|||
|
|
}
|
|||
|
|
/* pas de reset sur embed, object et video, ça fait foirer certains players */
|
|||
|
|
|
|||
|
|
/* utile pour gérer les floattants */
|
|||
|
|
/* contient des floats */
|
|||
|
|
.mod {
|
|||
|
|
overflow: auto;
|
|||
|
|
}
|
|||
|
|
.mod--hidden,
|
|||
|
|
.no-scroll {
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* quelques floattants */
|
|||
|
|
.left {
|
|||
|
|
float: left;
|
|||
|
|
}
|
|||
|
|
.right {
|
|||
|
|
float: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* clearer les floats */
|
|||
|
|
.clear {
|
|||
|
|
clear: both;
|
|||
|
|
}
|
|||
|
|
.clearleft {
|
|||
|
|
clear: left;
|
|||
|
|
}
|
|||
|
|
.clearright {
|
|||
|
|
clear: right;
|
|||
|
|
}
|
|||
|
|
.clearhidden {
|
|||
|
|
clear: both;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
visibility: hidden;
|
|||
|
|
}
|
|||
|
|
.clearfix:after {
|
|||
|
|
content: ".";
|
|||
|
|
display: block;
|
|||
|
|
height: 0;
|
|||
|
|
clear: both;
|
|||
|
|
visibility: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* gouttière */
|
|||
|
|
.gut {
|
|||
|
|
height: 1px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* gestion du table-design en CSS */
|
|||
|
|
.row {
|
|||
|
|
display: table;
|
|||
|
|
table-layout: fixed;
|
|||
|
|
}
|
|||
|
|
.line {
|
|||
|
|
display: table-row;
|
|||
|
|
}
|
|||
|
|
.col {
|
|||
|
|
display: table-cell;
|
|||
|
|
vertical-align: top;
|
|||
|
|
}
|
|||
|
|
.col-noalign {
|
|||
|
|
display: table-cell;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* alignements */
|
|||
|
|
.aligntop { vertical-align: top; }
|
|||
|
|
.alignbottom { vertical-align: bottom; }
|
|||
|
|
.alignmiddle { vertical-align: middle; }
|
|||
|
|
|
|||
|
|
/* block */
|
|||
|
|
.bl {
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* inline-block, utile pour les grilles et pas seulement */
|
|||
|
|
.inbl,
|
|||
|
|
.grid {
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* grid = élément d’une inline-grid */
|
|||
|
|
.grid {
|
|||
|
|
vertical-align: top;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* pour relativiser */
|
|||
|
|
.relative {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* bloc centré */
|
|||
|
|
.center {
|
|||
|
|
margin-left: auto;
|
|||
|
|
margin-right: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* activation de l’accélération matérielle */
|
|||
|
|
.hardware-accelerated {
|
|||
|
|
-webkit-transform: translateZ(0);
|
|||
|
|
-moz-transform: translateZ(0);
|
|||
|
|
-ms-transform: translateZ(0);
|
|||
|
|
-o-transform: translateZ(0);
|
|||
|
|
transform: translateZ(0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* largeurs de blocks */
|
|||
|
|
.w1 { width: 1%; }
|
|||
|
|
.w2 { width: 2%; }
|
|||
|
|
.w3 { width: 3%; }
|
|||
|
|
.w5 { width: 5%; }
|
|||
|
|
.w10 { width: 10%; }
|
|||
|
|
.w20 { width: 20%; }
|
|||
|
|
.w25 { width: 25%; }
|
|||
|
|
.w30 { width: 30%; }
|
|||
|
|
.w33 { width: 33.333%; }
|
|||
|
|
.w40 { width: 40%; }
|
|||
|
|
.w45 { width: 45%; }
|
|||
|
|
.w49 { width: 49%; }
|
|||
|
|
.w50 { width: 50%; }
|
|||
|
|
.w60 { width: 60%; }
|
|||
|
|
.w66 { width: 66.666%; }
|
|||
|
|
.w70 { width: 70%; }
|
|||
|
|
.w75 { width: 75%; }
|
|||
|
|
.w80 { width: 80%; }
|
|||
|
|
.w90 { width: 90%; }
|
|||
|
|
.w100 { width: 100%; }
|
|||
|
|
|
|||
|
|
/* ici ajouter les largeurs en em */
|
|||
|
|
/*.w960e { width: 60em; }*/
|
|||
|
|
|
|||
|
|
/* ici ajouter les largeurs en pixels */
|
|||
|
|
/*.w500p { width: 500px; }*/
|
|||
|
|
|
|||
|
|
/* ici ajouter les largeurs max en em */
|
|||
|
|
/*.mw960e { max-width: 60em; }*/
|
|||
|
|
|
|||
|
|
/* ici ajouter les largeurs max en pixels */
|
|||
|
|
/*.mw960p { max-width: 960px; }*/
|
|||
|
|
|
|||
|
|
/* margins */
|
|||
|
|
.mt0 { margin-top: 0; }
|
|||
|
|
.mt1 { margin-top: 1em; }
|
|||
|
|
.mt2 { margin-top: 2em; }
|
|||
|
|
.mr0 { margin-right: 0; }
|
|||
|
|
.mr1 { margin-right: 1em; }
|
|||
|
|
.mr2 { margin-right: 2em; }
|
|||
|
|
.mb0 { margin-bottom: 0; }
|
|||
|
|
.mb1 { margin-bottom: 1em; }
|
|||
|
|
.mb2 { margin-bottom: 2em; }
|
|||
|
|
.ml0 { margin-left: 0; }
|
|||
|
|
.ml1 { margin-left: 1em; }
|
|||
|
|
.ml2 { margin-left: 2em; }
|
|||
|
|
.m0 { margin: 0; }
|
|||
|
|
.m1 { margin: 1em; }
|
|||
|
|
.m2 { margin: 2em; }
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* paddings */
|
|||
|
|
.pt0 { padding-top: 0; }
|
|||
|
|
.pt1 { padding-top: 1em; }
|
|||
|
|
.pt2 { padding-top: 2em; }
|
|||
|
|
.pr0 { padding-right: 0; }
|
|||
|
|
.pr1 { padding-right: 1em; }
|
|||
|
|
.pr2 { padding-right: 2em; }
|
|||
|
|
.pb0 { padding-bottom: 0; }
|
|||
|
|
.pb1 { padding-bottom: 1em; }
|
|||
|
|
.pb2 { padding-bottom: 2em; }
|
|||
|
|
.pl0 { padding-left: 0; }
|
|||
|
|
.pl1 { padding-left: 1em; }
|
|||
|
|
.pl2 { padding-left: 2em; }
|
|||
|
|
.p0 { padding: 0; }
|
|||
|
|
.p1 { padding: 1em; }
|
|||
|
|
.p2 { padding: 2em; }
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* spécial hr de 1px de haut */
|
|||
|
|
hr {
|
|||
|
|
background-color: #666;
|
|||
|
|
border: 0;
|
|||
|
|
color: #666;
|
|||
|
|
height: 1px;
|
|||
|
|
margin: 0 0 1em;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* pour cacher du texte de manière accessible… toussââââ */
|
|||
|
|
.invisible {
|
|||
|
|
border: 0;
|
|||
|
|
clip: rect(0 0 0 0);
|
|||
|
|
height: 1px;
|
|||
|
|
margin: -1px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
padding: 0;
|
|||
|
|
position: absolute;
|
|||
|
|
width: 1px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hidden { display: none; } /* caché partout */
|
|||
|
|
.nodesktop { display: none; } /* caché sur desktop */
|
|||
|
|
/*.noprint {} /* caché sur print */
|
|||
|
|
/*.notablet {} /* caché sur tablettes */
|
|||
|
|
/*.nomobile {} /* caché sur mobile */
|
|||
|
|
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* modules
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
*****************************************************************
|
|||
|
|
* 06 -- structure globale
|
|||
|
|
* (page / skip links / header / contenu principal / footer)
|
|||
|
|
*****************************************************************
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
/* === page === */
|
|||
|
|
.page {
|
|||
|
|
margin: 0 auto;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* === skip links = liens d’évitement === */
|
|||
|
|
.skip {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
/* skip__link = un lien d’évitement */
|
|||
|
|
/* idéalement mettez-les visibles pas uniquement au focus */
|
|||
|
|
.skip__link {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
/* sinon pensez à les rendre visibles au focus */
|
|||
|
|
.skip__link:focus,
|
|||
|
|
.skip__link:hover,
|
|||
|
|
.skip__link:active {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* === header === */
|
|||
|
|
header {
|
|||
|
|
background-color: rgb(103, 83, 108);
|
|||
|
|
color: rgb(238, 215, 244);
|
|||
|
|
padding-top: 2em;
|
|||
|
|
}
|
|||
|
|
header h1 {
|
|||
|
|
display: inline;
|
|||
|
|
font-size: 5em;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.header {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.logo {
|
|||
|
|
border: 0;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
padding: .5em;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.navigation {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* === contenu principal === */
|
|||
|
|
.main {
|
|||
|
|
max-width: 60em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#contact ul, #online ul {
|
|||
|
|
list-style: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* === footer === */
|
|||
|
|
.footer {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
*****************************************************************
|
|||
|
|
* 07 -- forms
|
|||
|
|
*****************************************************************
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
/* donne envie de cliquer sur un bouton */
|
|||
|
|
label,
|
|||
|
|
button,
|
|||
|
|
input[type="submit"],
|
|||
|
|
input[type="button"],
|
|||
|
|
input[type="reset"] {
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* évite un resize potentiellement foireux */
|
|||
|
|
textarea {
|
|||
|
|
resize: vertical;
|
|||
|
|
}
|
|||
|
|
/* supprime un bug Firefox sur button */
|
|||
|
|
button::-moz-focus-inner { border: 0; padding: 0; }
|
|||
|
|
|
|||
|
|
label,
|
|||
|
|
button,
|
|||
|
|
input,
|
|||
|
|
select {
|
|||
|
|
vertical-align: middle;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** fix typo inputs **/
|
|||
|
|
input,
|
|||
|
|
select,
|
|||
|
|
textarea,
|
|||
|
|
optgroup,
|
|||
|
|
button {
|
|||
|
|
font: inherit;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* à adapter selon le design voulu */
|
|||
|
|
input,
|
|||
|
|
select,
|
|||
|
|
textarea {
|
|||
|
|
border: 1px solid #686971;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
padding: .5em;
|
|||
|
|
width: 250px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* pour les textes des champs */
|
|||
|
|
.label {
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* à adapter selon le design voulu */
|
|||
|
|
.button {
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
-webkit-box-shadow: 1px 1px 1px #ddd;
|
|||
|
|
box-shadow: 1px 1px 1px #ddd;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
* évite dimensionnement des radios, checkboxes et images
|
|||
|
|
* et un affichage différent sous IE
|
|||
|
|
*/
|
|||
|
|
input[type="radio"],
|
|||
|
|
input[type="checkbox"],
|
|||
|
|
input[type="image"] {
|
|||
|
|
background-color: transparent;
|
|||
|
|
border: 0;
|
|||
|
|
width: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* pour annuler la taille des inputs ou autres */
|
|||
|
|
.auto {
|
|||
|
|
width: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* messages d’erreur ou de confirmation */
|
|||
|
|
.alert,
|
|||
|
|
.alert input,
|
|||
|
|
.alert textarea,
|
|||
|
|
.alert select {
|
|||
|
|
color: #d01b3d;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
/* .redborder sert à débugger uniquement */
|
|||
|
|
.alert input,
|
|||
|
|
.alert textarea,
|
|||
|
|
.alert select,
|
|||
|
|
.redborder {
|
|||
|
|
border: 1px solid #d01b3d;
|
|||
|
|
}
|
|||
|
|
.alert img {
|
|||
|
|
border: 0;
|
|||
|
|
}
|
|||
|
|
/*.ok {
|
|||
|
|
|
|||
|
|
}*/
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
* peut être complété par les attributs HTML5 required
|
|||
|
|
* exemple avec une couleur, penser à ne pas uniquement transmettre l’info ainsi
|
|||
|
|
*/
|
|||
|
|
/*select:required:invalid,
|
|||
|
|
input:required:invalid,
|
|||
|
|
input:focus:invalid,
|
|||
|
|
textarea:required:invalid,
|
|||
|
|
textarea:focus:invalid {
|
|||
|
|
background: #fef6f6;
|
|||
|
|
-moz-box-shadow: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
input:focus:required:valid,
|
|||
|
|
textarea:focus:required:valid,
|
|||
|
|
select:focus:required:valid {
|
|||
|
|
background: #efe;
|
|||
|
|
-moz-box-shadow: none;
|
|||
|
|
}*/
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
*****************************************************************
|
|||
|
|
* 08 -- dans le contenu (contenus spécifiques aux pages)
|
|||
|
|
*****************************************************************
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
/* home */
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
*****************************************************************
|
|||
|
|
* 09 -- breakpoints mineurs entre desktop et tablettes
|
|||
|
|
*****************************************************************
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
*****************************************************************
|
|||
|
|
* 10 -- homo tablettes - breakpoint majeur
|
|||
|
|
*****************************************************************
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
@media (max-width: 47.9375em) { /* equiv 767px */
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* layout/modules
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
/* affichage des éléments */
|
|||
|
|
.nodesktop { display: block; }
|
|||
|
|
|
|||
|
|
/* cachage des éléments inutiles, chabitte ! */
|
|||
|
|
.notablet { display: none; }
|
|||
|
|
|
|||
|
|
/* linéarisation contenus flottants/table-layout */
|
|||
|
|
.autotablet {
|
|||
|
|
float: none;
|
|||
|
|
display: block;
|
|||
|
|
width: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* adaptation structure globale (page / skip links / header / contenu principal / footer)
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* dans le contenu (contenus spécifiques aux pages)
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
*****************************************************************
|
|||
|
|
* 11 -- breakpoints mineurs entre tablettes et mobile
|
|||
|
|
*****************************************************************
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
*****************************************************************
|
|||
|
|
* 12 -- mobile - breakpoint majeur
|
|||
|
|
*****************************************************************
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
@media (max-width: 40em) { /* equiv 640px */
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* layout/modules
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
/* affichage des éléments */
|
|||
|
|
.notablet { display: block; }
|
|||
|
|
|
|||
|
|
/* cachage des éléments inutiles, chabitte ! */
|
|||
|
|
.nomobile { display: none; }
|
|||
|
|
|
|||
|
|
/* linéarisation contenus flottants/table-layout */
|
|||
|
|
.automobile {
|
|||
|
|
float: none;
|
|||
|
|
display: block;
|
|||
|
|
width: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* adaptation structure globale (page / skip links / header / contenu principal / footer)
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* dans le contenu (contenus spécifiques aux pages)
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
*****************************************************************
|
|||
|
|
* 13 -- breakpoints mineurs tout petit mobile
|
|||
|
|
*****************************************************************
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
*****************************************************************
|
|||
|
|
* 14 -- print
|
|||
|
|
*****************************************************************
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
@media print {
|
|||
|
|
/**
|
|||
|
|
* ajouter là-dedans les éléments qui ont besoin d’être
|
|||
|
|
* resetés de manière très bourrine pour le print
|
|||
|
|
*/
|
|||
|
|
body,
|
|||
|
|
html,
|
|||
|
|
.page,
|
|||
|
|
.reset4print {
|
|||
|
|
background-color: #fff;
|
|||
|
|
background-image: none;
|
|||
|
|
border: 0;
|
|||
|
|
box-shadow: none;
|
|||
|
|
color: #000;
|
|||
|
|
float: none;
|
|||
|
|
height: auto;
|
|||
|
|
margin: 0;
|
|||
|
|
max-width: 100%;
|
|||
|
|
min-height: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
position: static;
|
|||
|
|
width: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
padding: .5em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* cachage des éléments inutiles, chabitte ! */
|
|||
|
|
.noprint {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* affichage éléments spécifiques au print */
|
|||
|
|
.onprint {
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* éviter saut de page hasardeux */
|
|||
|
|
blockquote, ul, ol {
|
|||
|
|
page-break-inside: avoid;
|
|||
|
|
}
|
|||
|
|
h1, h2, h3, caption {
|
|||
|
|
page-break-after: avoid;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* affichage des liens, sauf pour image contenue */
|
|||
|
|
/* attention, penser à vérifier le résultat et penser
|
|||
|
|
* à limiter cette possibilité aux liens dans le contenu */
|
|||
|
|
/*a:after {
|
|||
|
|
content: " (" attr(href) ") ";
|
|||
|
|
}
|
|||
|
|
a:after img {
|
|||
|
|
content: "";
|
|||
|
|
}*/
|
|||
|
|
|
|||
|
|
/* ici fix propriétés particulières */
|
|||
|
|
|
|||
|
|
|
|||
|
|
} /* end print */
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
*****************************************************************
|
|||
|
|
* 15 -- fix viewport
|
|||
|
|
*****************************************************************
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
/* fix viewport pour Win8 (snap mode) et préparer le jour
|
|||
|
|
* où le viewport sera supporté par tous les moteurs
|
|||
|
|
*
|
|||
|
|
* Exemples : http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
|
|||
|
|
* width=device-width => width: device-width;
|
|||
|
|
* height=device-height => height: device-height;
|
|||
|
|
* initial-scale=2 => zoom: 2;
|
|||
|
|
* maximum-scale=2 => max-zoom: 2;
|
|||
|
|
* minimum-scale=0.5 => min-zoom: 0.5;
|
|||
|
|
* user-scalable=no => user-zoom: fixed;
|
|||
|
|
*
|
|||
|
|
* pour le snap mode de Win8 => seul width: device-width; fonctionne pour l’instant
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
@-webkit-viewport {
|
|||
|
|
width: device-width;
|
|||
|
|
}
|
|||
|
|
@-moz-viewport {
|
|||
|
|
width: device-width;
|
|||
|
|
}
|
|||
|
|
@-ms-viewport {
|
|||
|
|
width: device-width;
|
|||
|
|
}
|
|||
|
|
@-o-viewport {
|
|||
|
|
width: device-width;
|
|||
|
|
}
|
|||
|
|
@viewport {
|
|||
|
|
width: device-width;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
*****************************************************************
|
|||
|
|
* 16 -- règles d’état
|
|||
|
|
*****************************************************************
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
* Règles d’état = mises en bas pour être prioritaires
|
|||
|
|
*
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
.is-hidden,
|
|||
|
|
[aria-hidden=true] {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
*****************************************************************
|
|||
|
|
* 17 -- bonus : Fixes IE
|
|||
|
|
*****************************************************************
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
* basé sur les classes conditionnelles sur l’élément HTML
|
|||
|
|
*
|
|||
|
|
* à utiliser seulement si peu de corrections et
|
|||
|
|
* pas d’impact sur les perfs sur les autres navigateurs
|
|||
|
|
*
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
/* less than IE 9 */
|
|||
|
|
.oldies .nooldies {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ie6 .noie6 {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.ie7 .noie7 {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.ie8 .noie8 {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.ie9 .noie9 {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ie7 .col,
|
|||
|
|
.ie7 .col-noalign,
|
|||
|
|
.ie6 .col,
|
|||
|
|
.ie6 .col-noalign {
|
|||
|
|
float: left;
|
|||
|
|
}
|
|||
|
|
.ie7 .row,
|
|||
|
|
.ie6 .row {
|
|||
|
|
overflow: auto;
|
|||
|
|
}
|