@charset "utf-8";

@viewport {
  width: device-width;
  zoom: 1;
}

/*[of]:html elements*/
/*[of]:a*/
a:link, /* Defined with pseudo class to not style anchors */
a:visited,
a:active,
a:focus {
   font: inherit;
   text-decoration: none;
   border-bottom-style: solid;
      /* Nicer, I mean, turns into more readable text, than underline */
   border-width: 1px;
   padding-top: 0.1ex;
   padding-bottom: 0.2ex;
   margin-left: 0.4ex;
   margin-right: 0.4ex;
      /* Avoid padding, otherwise the bottom border would be  */
      /* wider than the text. */
}

a:focus {
   outline-color: invert; /* Default to be redefined */
   outline-width: 2px !important;
   outline-style: dashed !important;
   border-color: transparent !important;
}
/*[cf]*/
/*[of]:a img*/
a img {
   border-style: none;
   /* Surtout pour IE qui sinon ajoute une bordure */
   /* aux images dans les liens. */
}
/*[cf]*/
/*[of]:body*/
body {
   background-color: #CCFFCC;
   color: #800000; /* couleur du texte valable pour le couleur du fond - dépendence de li.icon-with-link img */

   font-family: "Verdana", sans-serif; /* ne devrait jamais être utilisée */
   margin: 0; /* la plupart des navigateurs donne une marge par défaut à body */
   padding-left: 5px;
   padding-right: 5px;
   padding-top: 0.3rem;
   background-image: url("");

   max-width: 1000px;
   margin-left: auto;
   margin-right: auto;
}
/*[cf]*/
/*[of]:blockquote*/
blockquote {
   quotes: none; /* Broken in browsers */
}
/*[cf]*/
/*[of]:caption*/
caption {
   color: #B85FE0;

   border-style: none;
   font-family: "Tahoma", "Geneva", sans-serif;
   font-variant: small-caps;
   font-weight: bold;
   padding: 0.7ex;
   text-align: right;
}
/*[cf]*/
/*[of]:em*/
em {
   font-style: normal;
   font-weight: bold;
}
/*[cf]*/
/*[of]:h1*/
h1 {
   color: #B85FE0;

   font-family: "Arial Narrow", "Arial", sans-serif;
   font-size: 2.50rem;
   font-weight: 900;
   margin-left: 0;
   margin-right: 0;
   margin-top: 0.3rem;
   margin-bottom: 0.3rem;
   text-decoration: none;
}
/*[cf]*/
/*[of]:h2*/
h2 {
   color: #B85FE0;

   font-family: "Arial Narrow", "Arial", sans-serif;
   font-weight: 900;
   font-size: 1.15rem;
   margin-bottom: 0;
   margin-top: 2rem;
   margin-left: 0;
   margin-right: 0;
   line-height: 1.50;
   text-decoration: none;
}

.h2:focus {
   outline-color: #B85FE0;
}

li .h2 {
   font-family: "Book Antiqua", serif;
   font-weight: normal;
}
/*[cf]*/
/*[of]:h3*/
h3 {
   color: #C87800;

   font-family: "Tahoma", "Geneva", sans-serif;
   margin-bottom: 0.3rem;
   margin-top: 2rem;
   padding-bottom: 0;
   line-height: 1.40;
}
/*[cf]*/
/*[of]:html*/
html {
   direction: ltr;
}
/*[cf]*/
/*[of]:hr*/
hr {
   display: none;
      /* Only used in no-style mode */
}
/*[cf]*/
/*[of]:label*/
label {
   font-family: "Tahoma", "Geneva", sans-serif;
   display: block;
   padding-bottom: 0.4rem;
}
/*[cf]*/
/*[of]:li*/
li {
   font-family: "Times New Roman", "Times", serif;
   font-size: 1.07rem;
   line-height: 1.80;
   margin-left: 0;
   padding-left: 10px;
   padding-right: 10px;
   margin-right: 14px;
}
/*[cf]*/
/*[of]:li li*/
li li {
   font-family: "Times New Roman", "Times", serif;
}
/*[cf]*/
/*[of]:li li li*/
li li li {
   font-family: "Times New Roman", "Times", serif;
   font-size: smaller;
}
/*[cf]*/
/*[of]:ol*/
ol {
   margin-left: 0;
   padding-left: 50px;
}
/*[cf]*/
/*[of]:p*/
p {
   margin-left: 0;
   margin-right: 0;
   line-height: 1.70;
}

li p {
   font-size: 0.90rem;
}

.chapter > h2 + p:first-letter,
p#abs:first-letter {
   font-size: 1.80rem;
   font-family: "Book Antiqua", serif;
   padding-right: 0.4ex;
   vertical-align: -13%;
}
/*[cf]*/
/*[of]:q*/
q {
   quotes: none;
}

/*[cf]*/
/*[of]:strong*/
strong {
   font-style: normal;
   font-weight: bold;
}
/*[cf]*/
/*[of]:table*/
/* les margin-top sont placés différement par IE, FF et Opera */

table {
   border-color: #D098FF;
   overflow: auto;
   margin-top: 1rem;
   margin-bottom: 2rem;
   border-collapse: collapse;
   border-style: solid;
   border-width: 1px;
}
/*[cf]*/
/*[of]:td*/
td {
   color: #800000;
   border-color: #D098FF;

   font-family: "Times New Roman", "Times", serif;
   font-size: 1.07rem;
   padding-left: 10px;
   padding-right: 10px;
   padding-top: 3px;
   padding-bottom: 3px;
   text-align: center;
   border-width: 1px;
   border-style: dotted;
}
/*[cf]*/
/*[of]:th*/
th {
   border-bottom-color: #D098FF;
   color: #D098FF;

   border-bottom-style: solid;
   border-bottom-width: 1px;
   font-family: "Tahoma", "Geneva", sans-serif;
   font-size: 0.85rem;
   font-weight: normal;
   padding-top: 1ex;
   padding-bottom: 1.5ex;
   padding-left: 10px;
   padding-right: 10px;
   text-align: center;
}
/*[cf]*/
/*[of]:ul*/
ul {
   border-style: dotted;
   border-width: 1px;
   padding-bottom: 1rem;
   padding-top: 1rem;
   text-align: justify;
   margin-left: 0;
   padding-left: 50px;
}
/*[cf]*/

/*[of]:.list-title*/
.list-title {
   color: #C87800;

   font-family: "Times New Roman", "Times", serif;
   font-size: 1.40rem;
   font-weight: 700;
   margin-left: 0;
   margin-right: 0;
   text-decoration: none;
   margin-top: 1rem;
   margin-bottom: 0.5rem;

   margin-left: 0;
   padding-left: 60px;
}
/*[cf]*/
/*[of]:.ads-alt*/
.ads-alt {
   color: #404040;
   text-align: center;
}
/*[cf]*/
/*[cf]*/
/*[of]:links*/
/* IE6 n'applique pas correctement inherit avec les balises ? */

a:link    { color: inherit; }
a:visited { color: inherit; }
a:active  { border: 1px solid white; }
a:focus   { border: 1px solid silver; outline-color: invert; }

a.download         { font: inherit; }
a.download:link    { color: #FFAB0F; }
a.download:visited { color: #C79A47; }
a.download:focus   { outline-color: #FFAB0F; }

a.note         { font-family: "Times New Roman", "Times", serif; }
a.note:link    { color: #C87800; }
a.note:visited { color: #404040; }
a.note:focus   { outline-color: #C87800; }

a.local         { font: inherit; font-size: 0.90rem; }
a.local:link    { color: #FFAB0F; }
a.local:visited { color: #C79A47; }
a.local:focus   { outline-color: #FFAB0F; }

a.page         { font: inherit; }
a.page:link    { color: #FFAB0F; }
a.page:visited { color: #C79A47; }
a.page:focus   { outline-color: #FFAB0F; }

a.site         { font: inherit; }
a.site:link    { color: #FFAB0F; }
a.site:visited { color: #C79A47; }
a.site:focus   { outline-color: #FFAB0F; }

a.mail          { font: inherit; }
a.mail:link     { color: #FFAB0F; }
a.mail:visited  { color: #C79A47; }
a.mail:focus    { outline-color: #FFAB0F; }

a.web          { font: inherit; }
a.web:link     { color: #800000; }
a.web:visited  { color: #404040; }
a.web:focus    { outline-color: #800000; }

li.fav a {
   line-height: 4ex;
   padding-left: 1ex;
}

#index a:link,
#index a:visited,
#index a,
#toc a:link,
#toc a:visited,
#toc a {
   /* Import of H2 styles */
   color: #B85FE0;

   font-family: "Arial Narrow", "Arial", sans-serif;
   font-weight: 900;
   font-size: 1.15rem;
   margin-bottom: 0;
   margin-top: 1rem;
   margin-left: 0;
   margin-right: 0;
   line-height: 1.50;
}
/*[cf]*/
/*[of]:semantic elements*/
/*[of]:ar*/
.ar-break {
   /* Pour empêcher les mélanges de direction */
   /* quand un élément .ar est entouré par des caractères */
   /* dont la direction est neutre. Example avec */
   /* قِط  ( 9iT - chat ) dans la page */
   /* declinaison-grammaire-arabe.html */
   unicode-bidi: bidi-override;
   direction: ltr;
}

.ar {
   font-family: "Arabic Transparent", "Georgia", sans-serif;
   font-size: 2.00rem;
   direction: rtl;
/* Use to be:
   display: block;
   border-style: solid;
   border-width: 1px;
   padding-left: 0.7ex;
   padding-right: 0.7ex;
   padding-top: 0.1rem;
   padding-bottom: 0.2rem;
   margin-top: 0.2rem;
   margin-bottom: 0.2rem;
*/
}

li .ar {
   font-size: 1.50rem;
   line-height: 1.00;
}

.key .ar {
   font-size: 2.00rem;
   line-height: 1.00;
}

table .ar {
   font-size: 2.00rem;
   line-height: 1.00;
}
/*[cf]*/
/*[of]:arb*/
.arb {
   font-size: 0.95rem;
   font-style: italic;
}
/*[cf]*/
/*[of]:code*/
div.code {
   font-family: "Consolas", "Courier New", "Courier", monospace;
   line-height: 1.00;

   border-style: solid;
   border-width: 2px;
   padding: 2px;

   margin-left: auto;
   margin-right: auto;
   margin-top: 1rem;
   margin-bottom: 2rem;
   overflow: auto;
}

pre {
   width: 125ex;
      /* About what is needed to display 80 characters */
   text-align: left;
   text-decoration: none;
   padding-bottom: 0.7rem;
   padding-left: 2ex;
   padding-right: 2ex;
   padding-top: 0.7rem;
}

div.code.after-title {
   /* IE6 ne supporte pas les selecteur d'adjacence */
   /* (l'adjacence est detectée par XSLT, qui génère une classe had-oc) */
   margin-top: 0;
}
/*[cf]*/
/*[of]:css-icon.xxx-link*/
.content a .css-icon {
   display: inline-block;
   height: 16px;
   width: 16px;
   vertical-align: middle;
   margin-left: 2px;
   margin-right: 2px;
   background-repeat: no-repeat;
   background-image: url(../style04/sprites.png);

   /* No way to give a bottom margin when it behaves like an inline, */
   /* So shift it with a position relative instead. This is OK as long */
   /* as the shift is small enough. */
   position: relative;
   top: -4px;
}

.css-icon.download-link {
   background-position: -48px -232px;
}

.css-icon.email-link {
   background-position: -0px -232px;
}

.css-icon.page-link {
   background-position: -16px -232px;
}

.css-icon.web-link {
   background-position: -64px -232px;
}

.css-icon.succ-link {
   background-position: -32px -232px;
}
/*[cf]*/
/*[of]:fav*/
li.fav {
   list-style-type: none;
   font-family: "Times New Roman", "Times", serif;
}
/*[cf]*/
/*[of]:favicon*/
img.favicon {
   font-weight: bold;
   height: 16px;
   margin-left: 1ex;
   margin-right: 1ex;
   vertical-align: middle;
   width: 16px;
}
/*[cf]*/
/*[of]:gender icons*/
img.gender-icon {
   height: 16px;
   width: 16px;
}
/*[cf]*/
/*[of]:hs*/
.hs {
   font-size: 0.95rem;
   font-style: italic;
}
/*[cf]*/
/*[of]:icon*/
.icon {
   margin-bottom: 0.5ex;
   margin-left: 1ex;
   margin-right: 1ex;
   margin-top: 0.5ex;
}
/*[cf]*/
/*[of]:marks\: abbr, exo, lit, mark*/
.abbr,
.exo,
.lit,
.mark {
   font-family: "Georgia", serif;
   font-style: italic;
   font-size: 1.05rem;
   letter-spacing: 2px;
   /* Italic is not enough visible with most fonts */
   text-decoration: none;
   border-bottom-style: none;
}

.abbr {
   font-variant: small-caps;
   border-bottom-style: dotted;
   border-bottom-width: 1px;
   white-space: nowrap;
}

.mark {
   white-space: nowrap;
}

.abbr,
.lit {
}
/*[cf]*/
/*[of]:paren*/
.paren {
   color: #404040;

   font-size: 0.85rem;
}
/*[cf]*/
/*[of]:token*/
.token {
   white-space: nowrap;
}
/*[cf]*/
/*[cf]*/
/*[of]:semantic blocks*/
/*[of]:para*/
p.para {
   font-family: "Verdana", sans-serif;
   text-align: justify;
   text-decoration: none;
   margin-top: 1.7rem;
   margin-bottom: 0.7rem;
}

p.after-title {
   /* IE6 ne supporte pas les selecteur d'adjacence */
   /* (l'adjacence est detectée par XSLT qui génère une classe had-oc) */
   margin-top: 0.2rem;
}
/*[cf]*/
/*[of]:subtitle*/
#subtitle {
   color: #C87800;

   font-family: "Times New Roman", "Times", serif;
   font-size: 1.70rem;
   font-weight: 700;
   margin-left: 0;
   margin-right: 0;
   margin-top: 0.3rem;
   margin-bottom: 0.5rem;
}
/*[cf]*/
/*[of]:table*/
.content table {
   display: table;
   margin-left: auto;
   margin-right: auto;
}
/*[cf]*/

/*[of]:dictionaries*/
/*[of]:table*/
table.simple-ar-dictionnary {
}

table.simple-fr-dictionnary {
}
/*[cf]*/
/*[of]:caption*/
.simple-ar-dictionnary caption,
.simple-fr-dictionnary caption {
   border-color: #D098FF;

   border-bottom-style: none;
   border-left-style: solid;
   border-right-style: solid;
   border-top-style: solid;
   border-width: 1px;
}

.simple-ar-dictionnary caption {
   font-size: 1.20rem;
}
/*[cf]*/
/*[of]:term*/
.term-text-box dfn {
   font-style: normal;
}

.ar-term img.gender-icon {
   float: right;
   padding-right: 14px;
   padding-left: 11px;
   margin-left: -41px; /* -(11+14+16) */
   margin-top: 10px;
}

.ar-term .term-text-box {
   float: right;
   margin-right: 41px; /* 11+14+16 */
   text-align: right;
}

.fr-term img.gender-icon {
   float: left;
   padding-right: 7px;
   padding-left: 10px;
   margin-right: -33px; /* -(10+7+16) */
   margin-top: 2px;
}

.fr-term .term-text-box {
   float: left;
   margin-left: 33px; /* 10+7+16 */
   text-align: left;
}
/*[cf]*/
/*[of]:ar term and def*/
td.ar-def,
td.ar-term {
   color: #F080F0;

   font-family: "Arabic Transparent", "Georgia", sans-serif;
   font-size: 2.00rem;
   font-weight: normal;
   text-align: right;
   padding-right: 0.5ex;
   padding-left: 1ex;
   border-style: none;
   padding-bottom: 0;
   padding-top: 0;
}

td.ar-def .paren {
   font-size: 0.60rem;
}
/*[cf]*/
/*[of]:fr term and def*/
td.fr-def, td.fr-term {
   color: #800080;

   font-family: "Tahoma", "Geneva", sans-serif;
   font-size: 1.00rem;
   font-weight: bold;
   text-align: left;
   padding-left: 0.5ex;
   padding-right: 1ex;
   border-style: none;
   padding-bottom: 0.5rem;
   /* Doit être considéré en fonction de la taille de la police */
   padding-top: 0.5rem;
   /* Doit être considéré en fonction de la taille de la police */
}
/*[cf]*/
/*[of]:ar th*/
th.ar-term {
   text-align: right;
}
/*[cf]*/
/*[of]:fr th*/
th.fr-term {
   text-align: left;
}
/*[cf]*/
/*[cf]*/
/*[of]:excerpt*/
.excerpt {
    /* em, even if it is applied to different font size (h3 and p), beceause
       it appears to be nice like that */
    padding-left: 60px;
    padding-right: 60px;
    border-left-style: solid;
    border-left-width: 2px;
    border-right-style: solid;
    border-right-width: 2px;
    font-style: italic;
    background-color: #B85FE0;
}

.excerpt blockquote {
    /* Only for P element, beceause H3 has its own font size */
    font-size: 1.20rem;
    font-family: "Times New Roman", "Times", serif;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    margin-top: 1rem; /* Smaller than default */
    margin-left: 0; /* Clear browser default */
    margin-right: 0; /* Clear browser default */
}

.excerpt h3 {
    font-size: 0.90rem;
    padding-top: 12px;
    font-weight: normal;
}

.excerpt cite {
    font-weight: bold;
}
/*[cf]*/
/*[of]:illu*/
div.illu {
   margin-top: 3rem;  /* placé différement par IE, FF et Opera */
   margin-bottom: 2rem;
   text-align: center;
}

div.illu p {
   color: #C87800;

   max-width: 70%;
   margin-left: 15%;
   font-family: "Times New Roman", "Times", serif;
   font-size: 1.15rem;
}
/*[cf]*/
/*[of]:list*/
ul.list {
   display: table;
}

ul.list li {
   list-style-type: square;
   padding-top: 0.2rem;
}

div.list {
   text-align: center;
}

div.list ul {
   display: inline-table;
}
/*[cf]*/
/*[of]:key*/
.key .inner {
   background-color: #B85FE0;

   padding-bottom: 0.7rem;
   padding-top: 0.7rem;
   border-style: solid;
   border-width: 3px;
   height: 100%;

   margin-left: -1ex;
   padding-left: 1ex;
}
/*[cf]*/
/*[of]:mosaic*/
.mosaic {
   clear: both;
   float: left;
   text-align: center;
}

.mosaic-item {
/*[c]float: left;*/
   margin: 1ex 1em 1ex 1rem;
   padding: 8px;
   display: inline-block;
   vertical-align: middle;
}

.mosaic-item img {
   display: inline-block;
   max-width: 85vw;
   height: auto;
}

.mosaic-item p {
   display: block;
   text-align: center;
   font-weight: bold;
   padding-left: 15%;
   padding-right: 15%;
}
/*[cf]*/
/*[of]:note*/
div.note {
   margin-bottom: 1.7rem;
   margin-top: 1.7rem;
}

.note p {
   color: #C87800;

   font-family: "Tahoma", "Geneva", sans-serif;
   font-size: 0.80rem;
   margin-bottom: 0.3rem;
   margin-top: 1rem;
   text-align: justify;
}

p.note-back-link a:link,
p.note-back-link a:visited,
p.note-back-link {
   color: #C87800;

   font-family: inherit;
   font-size: 0.80rem;
   margin-bottom: 0.3rem;
   margin-top: 0.3rem;
}

p.note-back-link a:link,
p.note-back-link a:visited {
   color: #C87800;
}
/*[cf]*/
/*[of]:scheme-def*/
.scheme-def {
   margin-bottom: 2.5rem;
}

.scheme-def table {
   width: 100%; /* Comme la largeur du struct qui le pécéde */
   margin-top: 2rem;
   margin-bottom: 0;
   border-collapse: collapse;
}

.scheme-def tr {
   height: 2.7rem;
}

.scheme-def td {
   border-style: dotted;
   border-width: 1px;
   text-align: center;
   padding-left: 1ex;
   padding-right: 1ex;
}

.scheme-def ul {
   border-style: none;
   margin-bottom: 0;
   padding-bottom: 0;
}

.scheme-def li {
   list-style-type: square;
   margin-bottom: 0.7rem;
}

.scheme-def span.word {
   color: #800000;

   direction: rtl;
   font-size: 2.00rem;
   font-weight: bold;
   font-family: "Tahoma", "Geneva", sans-serif;
}

.scheme-def span.scheme {
   color: #800000;

   font-size: 2.00rem;
   font-weight: bold;
   font-family: "Tahoma", "Geneva", sans-serif;
   direction: rtl;
}

.scheme-def span.root {
   color: #C87800;

   font-size: 2.00rem;
   font-weight: bold;
   font-family: "Tahoma", "Geneva", sans-serif;
   direction: rtl;
}

.scheme-def span.postfix {
   color: #800000;

   direction: rtl;
   font-size: 2.00rem;
   font-weight: bold;
   font-family: "Tahoma", "Geneva", sans-serif;
}

.scheme-def span.title {
   color: #D098FF;

   text-align: right;
   font-size: 1.10rem;
   font-weight: bold;
}

.scheme-def span.text {
   color: #C87800;

   font-size: 1.10rem;
   font-weight: bold;
   text-align: left;
}

.scheme-def span.op {
   font-family: "Tahoma", "Geneva", sans-serif;
   font-weight: bold;
   font-size: 1.30rem;
   text-align: center;
}

.scheme-def li.scheme {
   margin-left: -1ex;
   list-style-type: none;
}

.scheme-def li.scheme div,
.scheme-def td.scheme {
   background-color: #B85FE0;
   border-color: #D098FF;

   border-style: solid;
   border-width: 2px;
}

.scheme-def li.scheme div {
   padding-left: 1ex;
   height: 100%;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
}

.scheme-def .exemple-recall {
   font-size: 0.80rem;
   margin-top: 0.5ex;
}

.scheme-def .exemple-recall p {
   display: inline;
}

.scheme-def .exemple-recall .index {
   font-size: 0.80rem;
   font-weight: normal;
}
/*[cf]*/
/*[of]:struct*/
ul.struct {
   /* Not display table for these lists */
}

ul.struct li {
   list-style-type: square;
}

ul.struct li.key {
   list-style-type: none;
}

.struct-item {
   border-bottom-style: solid;
   border-bottom-width: 3px;
   padding-bottom: 0.7rem;
   padding-top: 0.7rem;
}
/*[cf]*/
/*[cf]*/

/*[of]:#header*/
/*[of]:#metas in header*/
header > aside:nth-child(1) {
   color: #D098FF;

   font-family: "Tahoma", "Geneva", sans-serif;
   font-size: 0.80rem;
   line-height: 1.00;
   padding-top: 0.2rem;
   margin-bottom: 0.3rem;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
}

header > aside:nth-child(1) span {
   display: inline-block;
   flex: 1 1 min-content;
}

/*[cf]*/
/*[of]:#page-title*/
#page-title {
   border-color: #D098FF;

   margin: 0;
   padding-top: 0.7rem;
   border-bottom-style: solid;
   border-top-style: solid;
   border-right-style: solid;
   border-width: 3px;
   position: relative; /* Referentiel pour .css-image*/
}

#page-title .css-image {
   z-index: -1; /* This is a background image */
   position: absolute;
   width: 240px;
   height: 100%;
   top: 0;
   right: 0;
   background-image: url(../style04/sprites.png);
   background-repeat: no-repeat;
   background-position: -560px -0px;
}

* html #page-title .css-image {
   /* The best which can be done for IE6 */
   /* It doesnt handle the height:100% and has troubles */
   /* with positioning */
   height: 95px;
   top: 3px;
   right: 11px;
}
/*[cf]*/
/*[of]:shortcuts*/
/*[of]:shortcuts*/
header > aside:nth-child(3) {
   background-color: #D098FF;
   border-color: #D098FF;
   color: #C0C0C0;

   border-bottom-style: solid;
   border-right-style: solid;
   border-width: 3px;
   font-family: "Verdana", sans-serif;
   padding-top: 0.1rem;
   padding-bottom: 0.1rem;
   padding-left: 1ex;
   padding-right: 1ex;
   font-variant: small-caps;
}
/*[cf]*/
/*[of]:#shortcuts a*/
header > aside:nth-child(3) a {
   vertical-align: middle;
   display: inline-block;
}

header > aside:nth-child(3) a.local:link,
header > aside:nth-child(3) a.site:link,
header > aside:nth-child(3) a.local:visited,
header > aside:nth-child(3) a.site:visited,
header > aside:nth-child(3) a.local:focus,
header > aside:nth-child(3) a.site:focus {
   color: #C0C0C0;
      /* A kind of menu, so not meaningful to give it a */
      /* visited color */
}
/*[cf]*/
/*[of]:.accessibility-links*/
header > aside:nth-child(3) .accessibility-links {
   display: inline-block;
   padding-right: 1ex;
   border-right: 1px solid;
   border-color: #C0C0C0;
   font-weight: normal;
   vertical-align: middle;
}
/*[cf]*/
/*[cf]*/
/*[cf]*/

/*[of]:contact*/
nav .element.contact .active .css-icon span {
   left: -96px;
   top: -136px;
}

nav .element.contact .inactive .css-icon span {
   left: -96px;
   top: -184px;
}
/*[cf]*/
/*[of]:home*/
nav .element.home .active .css-icon span {
   left: -144px;
   top: -136px;
}

nav .element.home .inactive .css-icon span {
   left: -144px;
   top: -184px;
}
/*[cf]*/
/*[of]:index*/
nav .element.index .active .css-icon span {
   left: -0px;
   top: -136px;
}

nav .element.index .inactive .css-icon span {
   left: -0px;
   top: -184px;
}
/*[cf]*/
/*[of]:info*/
nav .element.info .active .css-icon span {
   left: -48px;
   top: -136px;
}

nav .element.info .inactive .css-icon span {
   left: -48px;
   top: -184px;
}
/*[cf]*/
/*[of]:pred*/
nav .element.pred .active .css-icon span {
   left: -240px;
   top: -136px;
}

nav .element.pred .inactive .css-icon span {
   left: -240px;
   top: -184px;
}
/*[cf]*/
/*[of]:succ*/
nav .element.succ .active .css-icon span {
   left: -192px;
   top: -136px;
}

nav .element.succ .inactive .css-icon span {
   left: -192px;
   top: -184px;
}
/*[cf]*/
/*[of]:accessibility-links*/
nav .element.accessibility-links .css-icon {
   display: none;
}

nav .element.accessibility-links .active .css-icon span {
   display: none;
}

nav .element.accessibility-links .inactive .css-icon span {
   display: none;
}
/*[cf]*/
/*[cf]*/
/*[of]:article*/

/*[of]:.content*/
.content {
      /* Reference for absolute positioning of aff-top */
}

.content.second {
   background-image: url("/aide-abp.png");
   background-repeat: no-repeat;
   min-height: 690px;
}

#ads_fullsize {
   min-height: 690px; /* Height of /aide-abp.png */
}

.content .real {
   background: #CCFFCC;
   border-top: 1px solid #CCFFCC;
      /* Avoid content margins passing through. */
}
/*[cf]*/

/*[of]:.aff-head*/
.aff-head {
   min-height: 2rem;
   margin-bottom: 1ex;
   text-align: center;
   width: 800px;
   max-width: 95vw;
   box-sizing: border-box;
}
/*[cf]*/
/*[of]:.aff-top-area and .aff-top*/
.aff-top,
.aff-top-area {
   padding-top: 1rem;
   height: 60px;
}

.aff-top-area {
   margin-bottom: 0;
}

.aff-top {
   text-align: center;
   position: absolute;
   top: 0;
   left: -40px;
}
/*[cf]*/
/*[of]:#abs*/
#abs {
   color: #666699;

   font-family: "Tahoma", "Geneva", sans-serif;
   font-weight: bold;
   text-align: justify;
   text-decoration: none;
}
/*[cf]*/
/*[of]:#toc*/
#toc-frame {
   border-bottom-color: #D098FF;

   border-bottom-style: dashed;
   border-bottom-width: 3px;
   padding-bottom: 0.7rem;
   margin-bottom: 1.7rem;
}

#toc {
   /* Defaults of OL */
}

#toc li {
   list-style-type: square;
   margin-top: 0.4ex;
      /* To avoid link focus outline to overlap above link underline */
}
/*[cf]*/
/*[of]:.aff-inside*/
.aff-inside {
   float: left;
   min-height: 3rem;
   width: 336px;
   max-width: 85vw;
   margin-right: 20px;
   margin-bottom: 0.5ex;
   padding-left: 5px;
   padding-bottom: 5px;

   position: relative;
   z-index: 1;
      /* Without this, there is a trouble with list whose */
      /* number overlapps the ads area */
}
/*[cf]*/
/*[of]:.chapter*/
/*[c]Rien*/
/*[cf]*/
/*[of]:pages-index*/
.aff-inside + #pages-index  {
}
/*[cf]*/
/*[of]:next*/
#next-page-link {
   /* This is the last title in a content */
}
/*[cf]*/
/*[of]:.aff-top*/
/*[c]See above*/
/*[cf]*/
/*[of]:.aff-bottom*/
.aff-bottom {
   min-height: 2rem;
   text-align: center;
   margin-top: 2rem;
   margin-bottom: 2rem;
   width: 800px;
   max-width: 95vw;
   box-sizing: border-box;
}
/*[cf]*/
/*[of]:#search-box*/
#search-box {
   border-top-color: #D098FF;
   margin-top: 1rem;
   border-top-style: solid;
   border-top-width: 3px;
   padding-top: 1rem;
   padding-bottom: 1rem;
}

.cse-branding-form {
}

.cse-branding-logo {
   display: inline-block;
   position: relative;
   top: -5px;
}

.cse-branding-text {
   display: inline-block;
   position: relative;
   top: -15px;
}
/*[cf]*/
/*[cf]*/
/*[of]:right side bar menu*/
/*[of]:style-form*/
#style-form {
   display: inline-block;
   margin: 0;
   padding: 0;
}

#style-form * {
   vertical-align: middle;
}

#style-form label {
   color: #800080;
}

#style-form select {
   background-color: #B85FE0;
   color: #C87800;

   padding: 0;
   border-style: none;
   margin-right: 3px;
   width: 90px;
}

#style-form input {
   padding: 0;
   width: 27px;
}
/*[cf]*/
/*[of]:.aff-right*/
.aff-right {
   height: 600px;
   float: right;
   width: 120px;
}
/*[cf]*/
/*[cf]*/
/*[of]:#notes*/
#notes {
   border-top-color: #D098FF;

   display: block;
   border-top-style: dashed;
   border-top-width: 3px;
   margin-top: 0.5rem;
   padding-top: 1rem;
}

#notes h2 {
   color: #C87800;
   margin: 0;
   margin-right: 1ex;
}

/* Obligé à cause d'IE qui ne supporte pas le selecteur d'adjacence :
     Comme on ne peut pas donné pour IE, un style à un paragraphe qui suit
     un titre, alors on cré un style de paragraphe avec titre... et on prendra
     soin de toujours attribué la class adéquate aux paragraphes concernés.
*/

#return-from-notes {
   /* Attention : cet élément n'est pas contenu dans une .note */
   color: #C87800;

   font-family: inherit;
   font-size: 0.80rem;
   text-align: justify;
   font-variant: small-caps;
   margin: 0;
}

#return-from-notes a:link,
#return-from-notes a:visited {
   color: #C87800;
}
/*[cf]*/
/*[of]:footer*/
footer {
   border-top-color: #D098FF;
   color: #D098FF;

   border-top-style: solid;
   border-top-width: 3px;
   margin: 0.5em 0 0 0;
   padding: 0.5em 0 0.3em 0;

   font-family: "Tahoma", "Geneva", sans-serif;
   font-size: 0.80rem;

   vertical-align: middle;

   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
}

footer > span {
   flex: 1 1 max-content;
}

footer * {
   display: inline; /* So that vertical-align applies */
   vertical-align: middle;
}

footer a:link,
footer a:visited,
footer a:active,
footer a:focus {
   border-bottom-color: transparent;
}

footer a:link,
footer a:visited {
   color: #D098FF;
}

img.cpr-icon-page,
img.feed-icon {
   margin: 0 1ex 0 1ex;
}

img.feed-icon {
   height: 16px;
   width: 16px;
}

img.cpr-icon-page {
   height: 19px;
   width: 236px;
}
/*[cf]*/

/*[of]:misc*/
/*[of]:langage-menu*/
#langage-menu {
   background-color: #B85FE0;

   display: inline;
   font-family: "Verdana", sans-serif;
   margin-bottom: 4px;
   padding-top: 4px;
   padding-bottom: 6px;
}

#langage-menu a.site         { margin-left: 4px; margin-right: 1.5ex; }
#langage-menu a.site:link    { color: #C87800; }
#langage-menu a.site:visited { color: #404040; }
/*[cf]*/
/*[cf]*/

/*[of]:.tool*/
.tool table {
   margin-right: 1rem;
}

.tool .info {
   color: silver;
   display: block;
   font-family: "Times New Roman", "Times", serif;
   font-style: italic;
   font-size: 1.20rem;
   text-align: left;
   line-height: 1.00;
   margin-top: 1.5rem;
   padding: 0;
}
/*[cf]*/

#middle {
   margin-top: 1rem;
   background-image: url(../style04/sprites.png);
   background-position: -936px 0px;
   background-repeat: repeat-y;
   padding-left: 70px;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
}

/*[of]:article*/
article {
   padding-bottom: 1.7rem;
   padding-right: 0.5ex;
   margin-top: 1rem;
   box-sizing: border-box;
   flex: 0 1 calc(100% - 125px);
}
/*[cf]*/

/*[of]:nav*/
/*[of]:nav*/
nav {
   color: #D098FF;

   display: block;
   font-family: "Verdana", sans-serif;

   text-align: center;
   font-size: 0.80rem;
   line-height: 1.20;
   flex: 1 0 125px;
}
/*[cf]*/
/*[of]:nav h2*/
nav h2 {
   color: #D098FF;
}
/*[cf]*/

/*[of]:nav .element*/
nav .element {
   display: block;
   margin-top: 2rem;
   text-align: center;
}
/*[cf]*/
/*[of]:nav .element a & span.inactive*/
nav .element a,
nav .element span.inactive {
   display: block;
   padding-top: 1ex; /* For nicer border on focus */
   padding-bottom: 1ex; /* Idem */
   border-bottom-color: transparent;
   border-bottom-style: none;
      /* Required for IE6 which does not honnor the above */
      /* border-bottom-color: transparent; There is not trouble to */
      /* do so, as the "underline" of A is never visible is */
      /* nav (labels are underlines instead). */
}

nav .element a:focus {
   outline-color: #800080;
}

nav .element a {
   color: #D098FF;
      /* Required for IE6, otherwise it ignores the color */
      /* defined in #menu. */
}
/*[cf]*/
/*[of]:nav .element a span.title*/
nav .element span.title {
   color: #800080;
}

nav .element a span.title {
   border-bottom-color: transparent;

   border-bottom-style: solid;
   border-bottom-width: 1px;
   padding-bottom: 0.2ex;
}

nav .element a:hover span.title {
   border-bottom-color: #800080;
}
/*[cf]*/
/*[of]:nav .element .css-icon*/
nav .element .css-icon {
   display: block;

   width: 48px;
   height: 48px;

   margin-top: 0;
   margin-right: auto;
   margin-bottom: 0.7rem;
   margin-left: auto;
   padding: 0;

   overflow: hidden;
   position: relative;
      /* Required for IE6/IE7 (IE8 OK), otherwise */
      /* overflow hidden does not apply. */

   border-style: none;
}
/*[cf]*/
/*[of]:nav .element .css-icon span*/
/*[c]The span contained in the .css-icon is the sprite, thus, this is the*/
/*[c]icon source.*/

nav .element .css-icon span {
   display: block;
   margin: 0;
   padding: 0;

   background-image: url(../style04/sprites.png);
   width: 996px;
   height: 320px;

   background-position: 0 0;
   position: relative;
   border-style: none;
}
/*[cf]*/

@media (max-width: 640px) {
   #middle {
      background-image: none;
      padding-left: 0;
   }

   article {
      flex: 0 1 auto;
   }
}

form,
input {
   max-width: 80vw;
}