@charset "UTF-8";

/* Feuille de style du site public AtikTeam.

   Deux mises en page, selon la largeur de la fenêtre :
     grand écran  @media (min-width: 900px)   colonne centrale de 900px
     petit écran  @media (max-width: 899px)   pleine largeur, menu déroulant
   Les règles propres à l'une ou l'autre suivent celles du composant concerné.

   Sommaire : polices et variables, base, formulaires, structure de la page,
   boutons, titres, accueil, offres, fonctionnalités, références, contact,
   documentation, blog, captures d'écran. */


/* Polices et variables
================================================== */

/* Fichier à graisse variable (400 à 700), déclaré ici en 400 seulement : le
   gras est synthétisé par le navigateur, comme avant l'hébergement local.
   Écrire « font-weight: 400 700 » pour utiliser le vrai gras. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/montserrat-latin.woff2) format('woff2');
}

:root {
  --font-text: 'Montserrat', Verdana, sans-serif;
  --font-title: Verdana, sans-serif;
  --font-serif: Georgia, Times, serif;

  --blue: #3b6ba9;
  --blue-link: #597dab;
  --blue-border: #b5cae6;
  --blue-background: #f2f6fa;
  --orange: #f57900;
  --green: #80be43;

  --text-title: #111;
  --text-soft: #3c3c3c;
  --text-muted: #555;
  --line: #ddd;
  --line-light: #eee;

  /* largeur de la colonne centrale sur grand écran */
  --page-width: 900px;
}


/* Base
================================================== */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, main, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

[hidden] { display: none !important; }

body {
  font-size: 14px;
  line-height: 1.5;
  font-family: var(--font-text);
  background-color: white;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  color: var(--text-title);
  font-family: var(--font-title);
}
h1 { font-size: 3em; margin-bottom: 0.75em; }
h2 { font-size: 2.2em; line-height: 1; margin-bottom: 1em; border-bottom: 2px solid #d9e012; }
h3 { font-size: 1.5em; line-height: 1.25; margin-bottom: 1.25em; border-bottom: 1px solid var(--line); }
h4 { font-size: 1.2em; font-weight: bold; margin-bottom: 1.5em; }
h5, h6 { font-size: 1em; font-weight: bold; }

p {
  margin: 0 0 1.5em;
  font-size: 1.1em;
  font-family: var(--font-text);
}

li { font-size: 1.1em; }

a {
  color: var(--blue-link);
  text-decoration: none;
  border-bottom: 1px dotted #bbb;
}

img.left { float: left; margin: 1.5em 1.5em 1.5em 0; }
img.right { float: right; margin: 1.5em 0 1.5em 1.5em; }
img.center { margin: 0 auto; display: block; }
blockquote { margin: 1.5em; color: #666; font-style: italic; }
strong { font-weight: bold; }
em, dfn { font-style: italic; }
dfn { font-weight: bold; }
sup, sub { line-height: 0; }
abbr { border-bottom: 1px dotted #666; }
address { margin: 0 0 1.5em; font-style: italic; }
del { color: #666; }
pre { margin: 1.5em 0; white-space: pre; }
pre, code { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }
li ul, li ol { margin: 0; }
ul, ol { margin: 0 1.5em 1.5em 0; padding-left: 3.333em; }
ul { list-style-type: square; }
ol { list-style-type: decimal; }
dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
dd { margin-left: 1.5em; }

table { border-collapse: separate; border-spacing: 0; margin-bottom: 1.4em; width: 100%; }
table, td, th { vertical-align: middle; }
caption, th, td { text-align: left; font-weight: normal; padding: 4px 10px 4px 5px; }
th { font-weight: bold; }
thead th { background: #c3d9ff; }
tfoot { font-style: italic; }
caption { background: var(--line-light); }

hr { border: 0; border-bottom: 2px solid var(--line-light); }
hr.page-part { margin: 2em 0 3em 0; clear: both; }

/* messages (retour du formulaire de contact) */
div.error, div.success {
  padding: .8em .8em .8em 3em;
  margin-bottom: 1em;
  border: 2px solid var(--line);
}
div.error { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; }
div.success { background: #e6efc2; color: #3c7505; border-color: #c6d880; }
div.error a { color: #8a1f11; }
div.success a { color: #264409; }

span.text-green { color: var(--green); }
span.text-orange { color: var(--orange); }
span.text-blue { color: var(--blue); }


/* Formulaires
================================================== */

form { margin-bottom: 20px; }
fieldset { margin-bottom: 20px; }

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  border: 1px solid #ccc;
  padding: 6px 4px;
  border-radius: 2px;
  font: 1em "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: black;
  margin: 0 0 20px;
  display: block;
  background: #fff;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
  border: 1px solid #aaa;
  box-shadow: 0 0 3px rgba(0, 0, 0, .2);
}
textarea { min-height: 60px; }
label, legend { display: block; }
legend { font-size: 1.2em; font-weight: bold; }


/* Structure de la page : en-tête, menu, contenu, pied
================================================== */

/* le contenu de la page : contient ses éventuels éléments flottants */
#corpus > .wrapper {
  padding: 15px 30px 30px 30px;
  display: flow-root;
}

#logo-big, #logo-small { display: none; }

#header a,
#languages a { border: 0; }

#languages img {
  border: 1px solid white;
  padding: 3px 2px;
  border-radius: 3px;
}

#login a {
  display: block;
  padding: 5px 6px 5px 5px;
  color: #0169c9;
  line-height: 25px;
  border: 1px solid #cfcfcf;
  border-top: 0;
  border-radius: 0 0 5px 5px;
  box-shadow: 1px 0 0 #fff inset;
  background: linear-gradient(to top, #f4f4f4, #fefefe);
}
#login a:hover {
  box-shadow: 1px 0 0 #fff;
  border: 1px solid #f44800;
  border-top: 0;
  background: linear-gradient(to top, #fff, #fafafa);
}
#login > a > span {
  background: url(../images/login.png) no-repeat 5px 40%;
  padding: 0 0 0 40px;
}

#menu {
  padding: 0;
  border: 0;
  position: relative;
}

#mainmenu {
  background-color: var(--blue);
  height: 46px;
  position: relative;
}
#mainmenu ul {
  list-style: none;
  padding: 0;
}
#mainmenu a {
  display: block;
  font-weight: bold;
  color: white;
  text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.25);
  font-family: var(--font-title);
  border-bottom: 0;
}
#mainmenu a.small-screen { display: none; }

#footer {
  font-size: 1.1em;
  border-top: 2px solid #bcbcbc;
  padding: 5px 0;
}
#footer a { border: 0; }
#footer > .center-part { text-align: center; }
#footer > .demotera { text-align: center; margin-top: 1em; }

@media (min-width: 900px) {
  #real-content {
    width: var(--page-width);
    margin: 0 auto;
  }

  #menu, #header {
    width: 885px;
    margin: 0 auto;
  }

  #header {
    position: relative;
    height: 70px;
    padding: 5px 0 20px 0;
  }

  #logo-big {
    margin: 12px 0 0 16px;
    display: block;
  }

  #login {
    position: absolute;
    right: 0;
    top: 0;
    text-align: right;
    font-size: 18px;
  }

  #social {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  #social a img { margin-left: 10px; }

  #languages {
    position: absolute;
    right: 10px;
    top: 13px;
    padding-bottom: 4px;
  }

  #dropdown-control { display: none; }

  #mainmenu {
    background-image: url(../images/menuitem_background.png);
    border-radius: 5px;
  }
  #mainmenu ul {
    display: flex;
    margin: 0 0 0 2.5em;
  }
  #mainmenu a {
    font-size: 120%;
    line-height: 26px;
    padding: 9px 16px 11px;
    text-transform: lowercase;
  }
  #mainmenu a.highlight {
    padding-bottom: 6px;
    border-bottom: 5px solid rgba(255, 255, 255, 0.3);
    text-shadow: -1px -1px 2px rgba(30, 30, 30, 0.50);
  }
  #mainmenu a.current,
  #mainmenu a:hover,
  #mainmenu a:active {
    border-bottom: 5px solid var(--orange);
    background-color: rgba(255, 255, 255, 0.1);
    padding-bottom: 6px;
  }
  #mainmenu img { vertical-align: bottom; }
  #mainmenu li + li a { border-left: 1px solid rgba(0, 0, 0, 0.15); }
}

@media (max-width: 899px) {
  #corpus > .wrapper { font-size: 12px; }

  #social, #login { display: none; }

  #logo-small {
    margin: 10px 0 0 10px;
    display: block;
  }

  #dropdown-control {
    position: fixed;
    right: 15px;
    top: 10px;
    z-index: 9;
    font: bold 24px/1.2 var(--font-text);
    color: white;
    background-color: var(--blue);
    border: 1px solid #444;
    padding: 5px;
    cursor: pointer;
  }

  /* le menu n'apparaît que déployé par le bouton */
  #menu {
    display: none;
    z-index: 9;
  }
  #menu.deployed {
    display: block;
    position: fixed;
    top: 50px;
    right: 15px;
    width: 260px;
  }

  #languages {
    position: absolute;
    top: 10px;
    right: 10px;
  }

  #mainmenu {
    height: auto;
    padding: 10px;
    border-radius: 10px;
    box-shadow: -5px 5px 10px 10px rgba(0, 0, 0, 0.2);
  }
  #mainmenu ul { margin: 0; }
  #mainmenu li { text-transform: capitalize; }
  #mainmenu a {
    line-height: 2em;
    padding: 10px;
  }
  #mainmenu a.small-screen { display: block; }
  #mainmenu img { height: 1.5em; width: auto; }
}


/* Boutons
================================================== */

.btn {
  display: inline-block;
  padding: 4px 10px 4px;
  font-size: 13px;
  line-height: 18px;
  color: #333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  background-color: #f5f5f5;
  background-image: linear-gradient(to bottom, #fff, #e6e6e6);
  background-repeat: repeat-x;
  border: 1px solid #ccc;
  border-bottom-color: #bbb;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.btn:hover {
  color: #333;
  background-color: #e6e6e6;
  background-position: 0 -15px;
  transition: background-position 0.1s linear;
}
.btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.btn:active {
  background-image: none;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);
  background-color: #d9d9d9;
}

.btn-large {
  padding: 9px 14px;
  font-size: 15px;
  line-height: normal;
  border-radius: 5px;
}

.btn-success,
.btn-success:hover {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  color: #fff;
}
.btn-success {
  background-color: #5bb75b;
  background-image: linear-gradient(to bottom, #62c462, #51a351);
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-success:hover { background-color: #51a351; }
.btn-success:active { background-color: #408140; }

.btn-order {
  background-color: #d1d1cc;
  background-image: linear-gradient(to bottom, #fff, #97978b);
  color: black;
  border: 0;
}
.btn-order:hover {
  background-color: #d0d0d0;
  background-image: none;
  color: black;
}
.btn-order:active { background-color: #d1d1cc; }

/* bouton « découvrir en images » */
.btn.screenshots { margin: 5px 0; }
.btn.screenshots span {
  padding: 0 0 0 50px;
  background: url(../images/slide.png) no-repeat 0 center;
  display: inline-block;
  line-height: 20px;
  font-size: 16px;
  text-align: left;
  color: #fff;
  font-weight: bold;
}


/* Titres de page et slogans
================================================== */

.big-title { margin-bottom: 2.25em; }
.big-title,
.big-title h1 {
  font-family: var(--font-title);
  text-align: center;
}
.big-title h1 {
  font-size: 3em;
  line-height: 1.2em;
  margin-bottom: 0;
}
.big-title.home { padding-top: 2em; }

.medium-title { margin: 1em 0 2em 0; }
.medium-title h1 {
  font-size: 2.4em;
  line-height: 1.2em;
  text-align: left;
}

a.small-link {
  font-size: 15px;
  font-family: var(--font-title);
  white-space: nowrap;
}
a.small-link,
div.slogan a {
  color: var(--green);
  border: 0;
}
div.slogan a:hover { text-decoration: underline; }

p.intro {
  font-size: 1.2em;
  color: var(--text-soft);
}

div.slogan {
  font-family: var(--font-title);
  text-align: center;
  font-size: 2.4em;
  line-height: 1.2em;
}

br.responsive { display: none; }

@media (max-width: 899px) {
  .big-title h1 { font-size: 2.4em; }
  div.slogan { font-size: 2em; }
}


/* Diaporamas en fondu
   Le script du site déplace la classe « current » et fixe --fade.
================================================== */

.slideshow .slides { position: relative; }
.slideshow .slide {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--fade, 500ms), visibility var(--fade, 500ms);
}
.slideshow .slide.current {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}


/* Accueil
================================================== */

.cloud-and-features .cloud a { border: 0; }

.cloud-and-features .features a {
  border: 0 none;
  color: var(--blue);
  display: block;
  font-size: 1.4em;
  line-height: 1.6em;
  text-align: center;
}
.cloud-and-features .features .learn-more a {
  color: var(--green);
  margin-top: 30px;
  border-bottom: 1px solid var(--green);
}

@media (min-width: 900px) {
  .cloud-and-features {
    display: flex;
    align-items: center;
  }
  .cloud-and-features .cloud { flex: 0 0 480px; }
  .slideshow.home {
    height: 325px;
    width: 480px;
  }
  .cloud-and-features .features {
    flex: 1;
    align-self: flex-end;
    padding: 0 0 20px 20px;
  }
}

@media (max-width: 899px) {
  .cloud-and-features .cloud {
    height: 320px;
    text-align: center;
  }
  .cloud-and-features .cloud .slide img {
    max-width: 100%;
    height: auto;
  }
  .cloud-and-features .features .learn-more a { border: 1px solid var(--green); }
}

/* bannière des logos clients : en couleur au survol */
div.references-banner {
  margin: 1em 30px;
  text-align: center;
  line-height: 70px;
}
div.references-banner a { border: 0; }
div.references-banner img {
  vertical-align: middle;
  margin: 0 2px;
  filter: grayscale(1);
}
div.references-banner a:hover img { filter: none; }

@media (max-width: 899px) {
  div.references-banner {
    display: flex;
    flex-wrap: wrap;
    max-width: 90%;
    margin: 1em 2em;
  }
  div.references-banner img {
    margin: 5px;
    display: block;
  }
}

/* citations de clients */
div.quotations {
  margin: 2em 0;
  padding-bottom: 10px;
  font-size: 13pt;
  border-top: 1px solid #f5f5f5;
}
div.quotations div.slides,
div.quotations div.slide {
  width: 840px;
  height: 100px;
}
div.quotations div.content {
  position: relative;
  text-align: right;
  font-size: 1.25em;
  line-height: 1.2em;
}
div.quotations div.author {
  text-align: right;
  color: gray;
  font-size: 0.8em;
}
div.quotations span.quote {
  font-size: 2em;
  color: #aaa;
  font-family: var(--font-text);
}

@media (max-width: 899px) {
  div.quotations div.slides,
  div.quotations div.slide { width: auto; }
  div.quotations div.slides { margin: 20px 0; }
  div.quotations div.content { font-size: 1em; }
  div.quotations div.content br { display: none; }
  div.quotations span.quote {
    font-size: 1.2em;
    font-family: var(--font-serif);
  }
}

/* derniers billets du blog */
h2.blog-title {
  border: 0;
  position: relative;
  text-align: center;
  font-family: var(--font-serif);
}
h2.blog-title::before {
  content: "";
  display: block;
  border-top: solid 1px #777;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
  z-index: 1;
}
h2.blog-title span {
  position: relative;
  background-color: #fff;
  padding: 0 1ex;
  z-index: 1;
}

.blogHeadlines {
  position: relative;
  display: flex;
  gap: 5%;
}
.blogHeadlines .headline {
  flex: 0 0 29%;
  height: 240px;
  overflow: hidden;
  padding: 0 0.5%;
}
.blogHeadlines .headline:hover h3 { text-decoration: underline; }
.blogHeadlines .headline a {
  border: 0;
  color: inherit;
  display: block;
}
.blogHeadlines .headline h3 {
  font-size: 1.2em;
  line-height: 1.25em;
  margin: 0;
  color: var(--blue);
  font-family: var(--font-serif);
  border: 0;
}
.blogHeadlines .headline h3 a { padding: 0 0 0.8em 0; }
.blogHeadlines .headline p {
  color: #353535;
  text-align: justify;
  hyphens: auto;
}
/* fondu vers le blanc en bas des extraits */
.blogHeadlines .shadow {
  height: 3em;
  width: 100%;
  position: absolute;
  bottom: 0;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}


/* Offres et tarifs
================================================== */

header.pricing { position: relative; }
header.pricing h1 { font-size: 2.5em; }
header.pricing h1,
ul.pricing-advantages {
  text-align: left;
  margin: 0 200px 5px 0;
}
header.pricing p.yearly-discount {
  position: absolute;
  right: 0;
  top: 0;
}

ul.pricing-advantages {
  font-family: var(--font-text);
  font-size: 1.6em;
  list-style: none;
  padding-left: 1em;
  margin-bottom: 1em;
}
ul.pricing-advantages li::before {
  content: '✓ ';
  color: #84e527;
  font-weight: bold;
}

p.pricing-slogan {
  font-family: var(--font-text);
  font-size: 34px;
  margin: 1em 0 0 0;
  text-align: center;
}

.tarifs-gamme { margin: 10px -20px; }

.tarifs-gamme .packs {
  margin: 0 0 30px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.tarifs-gamme .pack,
.tarifs-gamme .needs-more {
  padding: 0 20px 10px 20px;
  margin-bottom: 10px;
  background: #282828 linear-gradient(to bottom, #777974, #2c2c2c);
  border-radius: 10px;
  color: white;
  box-shadow: 1px 2px 3px -2px rgba(255, 255, 255, 0.5) inset;
}

.tarifs-gamme .pack h3,
.tarifs-gamme .needs-more h3 {
  font-family: var(--font-title);
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  border: 0;
  font-size: 30px;
}

/* Chaque offre a sa couleur, et son titre dépasse un peu plus que celui de
   la précédente : --rise est ce décalage. */
.tarifs-gamme .pack {
  --rise: 0px;
  --accent: #87e928;
  --title-color: #73d216;
  --title-gradient: linear-gradient(to bottom, #87e928, #559c10);
  flex: 0 0 180px;
  margin-top: calc(25px - var(--rise));
}
.tarifs-gamme .pack:nth-child(2) {
  --rise: 5px;
  --accent: #ff9c3c;
  --title-color: #f57900;
  --title-gradient: linear-gradient(to bottom, #ff9c3c, #d76a00);
}
.tarifs-gamme .pack:nth-child(3) {
  --rise: 10px;
  --accent: #c19fbe;
  --title-color: #ad7fa8;
  --title-gradient: linear-gradient(to bottom, #c19fbe, #9f6999);
}
.tarifs-gamme .pack:nth-child(4) {
  --rise: 15px;
  --accent: #799fd4;
  --title-color: #3465a4;
  --title-gradient: linear-gradient(to bottom, #799fd4, #3567a7);
}
.tarifs-gamme .pack:nth-child(n+2) {
  box-shadow: 1px 2px 3px -2px rgba(255, 255, 255, 0.5) inset, 0 1px 5px rgba(0, 0, 0, 0.8);
}

.tarifs-gamme .pack h3 {
  margin: -10px -5px calc(10px + var(--rise)) -5px;
  padding: 3px 0 5px 0;
  text-align: center;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 4px 1px rgba(0, 0, 0, 0.8);
  background: var(--title-color) var(--title-gradient);
}

.tarifs-gamme .pack .prices {
  text-align: center;
  font-size: 14px;
  margin: 0 0 20px 0;
}
.tarifs-gamme .pack .price .amount { font-weight: bold; }
.tarifs-gamme .pack .price .periodicity { color: #d3d3d3; }

.tarifs-gamme .pack .price.monthly .amount {
  font-size: 45px;
  line-height: 45px;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}
.tarifs-gamme .pack .price.monthly .amount .currency {
  font-size: 25px;
  line-height: 30px;
  vertical-align: top;
}
.tarifs-gamme .pack .price.monthly .periodicity {
  font-size: 10px;
  margin-left: -1.5em;
}

.tarifs-gamme .pack .price.yearly .amount {
  font-size: 18px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}
.tarifs-gamme .pack .price.yearly .amount .currency {
  font-size: 12px;
  vertical-align: top;
}
.tarifs-gamme .pack .price.yearly .periodicity { font-size: 12px; }

.tarifs-gamme .pack .price.per-user {
  font-size: 12px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
  margin-top: 5px;
}

.tarifs-gamme .pack hr {
  border: 0;
  border-bottom: 1px solid #ababab;
  border-top: 1px solid #3e3e3e;
}

.tarifs-gamme .pack .description {
  margin-bottom: 20px;
  font-size: 14px;
  text-align: center;
}
.tarifs-gamme .pack .description p,
.tarifs-gamme .needs-more p {
  margin: 0;
  font-size: 1em;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}
.tarifs-gamme .pack .description .pack-accounts,
.tarifs-gamme .pack .description .pack-storage,
.tarifs-gamme .pack .description .pack-projects { font-weight: bold; }
.tarifs-gamme .pack .description .pack-accounts,
.tarifs-gamme .pack .description .pack-storage,
.tarifs-gamme .pack .description p.free-trial { color: var(--accent); }
.tarifs-gamme .pack .description p.free-trial {
  margin-top: 1em;
  font-weight: bold;
}

.tarifs-gamme .pack .order {
  text-align: center;
  margin: 0 0 10px 0;
}
.tarifs-gamme a.btn-order {
  font-size: 15px;
  padding: 4px 14px 3px;
}
.tarifs-gamme a.btn-order span {
  padding-right: 40px;
  line-height: 25px;
  font-size: 16px;
  display: inline-block;
  padding-bottom: 5px;
  vertical-align: middle;
  background: url(../images/order-pack-1.png) no-repeat right 0;
}
.tarifs-gamme .pack:nth-child(2) a.btn-order span { background-image: url(../images/order-pack-2.png); }
.tarifs-gamme .pack:nth-child(3) a.btn-order span { background-image: url(../images/order-pack-3.png); }
.tarifs-gamme .pack:nth-child(4) a.btn-order span { background-image: url(../images/order-pack-4.png); }
.tarifs-gamme .needs-more a.btn-order span { background-image: url(../images/order-pack-other.png); }

/* encart « besoins plus importants » */
.tarifs-gamme .needs-more {
  position: relative;
  margin-top: 10px;
  padding: 10px 20px 15px 35px;
  overflow: hidden;
}
.tarifs-gamme .needs-more .content {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.tarifs-gamme .needs-more h3 {
  font-size: 1.5em;
  margin: 0 0 0.5em 0;
}
.tarifs-gamme .needs-more .color {
  background: #dcbf22 linear-gradient(to bottom, #fce94f, #c4a000);
  width: 20px;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 10px 0 0 10px;
}

@media (max-width: 899px) {
  p.pricing-slogan,
  header.pricing .yearly-discount { display: none; }

  header.pricing h1,
  ul.pricing-advantages { margin: 0; }

  .tarifs-gamme { margin: 10px 0; }
}


/* Fonctionnalités
================================================== */

/* lien vers un thème : tableau de la page fonctionnalités, menu latéral
   d'un thème, légende des captures d'écran */
a.to-feature-theme {
  display: block;
  overflow: hidden;
  padding: 4px 6px;
  color: var(--blue);
  font-weight: bold;
  position: relative;
  background-color: var(--blue-background);
  border: 1px solid var(--blue-border);
  border-radius: 10px;
  line-height: 32px;
}
/* au survol, le lien grossit par-dessus ses voisins */
a.to-feature-theme:hover {
  margin: -5px;
  padding: 9px 11px;
  z-index: 5;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
  background: #f9fbfd linear-gradient(to bottom, #fff, var(--blue-background));
  transition: padding 0.05s ease, margin 0.05s ease;
}
a.to-feature-theme span.icon {
  display: inline-block;
  width: 40px;
  vertical-align: middle;
}
a.to-feature-theme span.icon img { display: block; }
a.to-feature-theme span.label {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  margin-right: 18px;
}

/* page fonctionnalités : tableau des thèmes, sur deux colonnes */
.themes-table h2 { color: var(--blue); }
.themes-table h2,
.advantages-table h2 {
  text-align: center;
  font-family: var(--font-text);
  font-size: 34px;
  border: 0;
  margin-bottom: 0.4em;
}

.themes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}
.themes a.to-feature-theme {
  min-width: 0;
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 0;
  line-height: 30px;
  padding: 10px 6px 10px 15px;
  height: 60px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.themes a.to-feature-theme:hover {
  padding: 15px 9px 15px 20px;
  border-color: var(--blue-border);
}
.themes a.to-feature-theme .icon {
  display: block;
  float: left;
  width: 60px;
  height: 60px;
  line-height: 60px;
  margin-right: 5px;
}
.themes a.to-feature-theme .icon img {
  vertical-align: middle;
  display: inline;
}
.themes a.to-feature-theme .label,
.themes a.to-feature-theme .intro { margin: 0; }
.themes a.to-feature-theme .label { font-size: 18px; }
.themes a.to-feature-theme .intro { font-weight: normal; }

.screenshots-link { margin-top: 40px; }
.screenshots-link a.btn.screenshots {
  display: block;
  text-align: center;
}
.screenshots-link a.btn.screenshots span { line-height: 40px; }

.advantages-table {
  margin-top: 40px;
  color: var(--text-muted);
}
.advantages-table h2 { color: var(--text-muted); }
.advantages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 30px;
}
.advantage { padding-bottom: 30px; }
.advantage .icon {
  display: block;
  float: left;
  width: 80px;
  height: 100px;
  line-height: 80px;
  margin-right: 10px;
}
.advantage .icon img { vertical-align: middle; }
.advantage .title {
  font-weight: bold;
  margin-right: 1ex;
}

@media (min-width: 900px) {
  /* bordures extérieures et coins arrondis du tableau des thèmes */
  .themes a.to-feature-theme:nth-child(-n+2) { border-top-color: var(--blue-border); }
  .themes a.to-feature-theme:nth-child(odd) { border-left-color: var(--blue-border); }
  .themes a.to-feature-theme:first-child { border-top-left-radius: 10px; }
  .themes a.to-feature-theme:nth-child(2) { border-top-right-radius: 10px; }
  .themes a.to-feature-theme:nth-last-child(2) { border-bottom-left-radius: 10px; }
  .themes a.to-feature-theme:last-child { border-bottom-right-radius: 10px; }
}

@media (max-width: 899px) {
  .themes-table h2 { text-align: left; }
  .themes {
    grid-template-columns: 1fr;
    margin: 10px;
    border-radius: 0;
  }
  .screenshots-link { display: none; }
  .advantage .icon { float: none; }
}

/* page d'un thème : menu latéral, qui reste visible au défilement, et
   liste des fonctionnalités */
.feature-theme {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin: 0 -20px;
}
.feature-theme nav {
  flex: 0 0 200px;
  position: sticky;
  top: 35px;
  margin-top: 20px;
}
.feature-theme .theme {
  flex: 1;
  min-width: 0;
  margin-top: 20px;
}

.feature-theme nav ul {
  list-style: none;
  border-radius: 10px;
  box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.2);
  margin: 0 0 20px 0;
  padding: 0;
}
.feature-theme nav li a {
  border-radius: 0;
  border-bottom-width: 0;
}
.feature-theme nav li:first-child a { border-radius: 10px 10px 0 0; }
.feature-theme nav li:last-child a {
  border-radius: 0 0 10px 10px;
  border-bottom-width: 1px;
}
/* flèche devant le thème affiché */
.feature-theme nav li a.active span.label::after {
  color: var(--orange);
  content: "‣";
  display: block;
  font-size: 30px;
  line-height: 40px;
  height: 40px;
  margin-top: -20px;
  position: absolute;
  right: 2px;
  top: 50%;
}
.feature-theme nav li a.active:hover span.label::after {
  right: 7px;
  transition: right 0.05s ease;
}

.feature-theme .theme .header { margin-bottom: 2em; }
.feature-theme .theme .header h1 {
  margin: 0;
  font-size: 2.2em;
  line-height: 1em;
}
.feature-theme .theme .header p {
  font-size: 1.2em;
  color: var(--text-soft);
  margin: 1em 0 0 0;
  text-align: justify;
}
.feature-theme .theme .bottom p {
  color: var(--text-soft);
  margin-top: 2em;
  padding-top: 1em;
  border-top: 1px solid var(--line);
  text-align: justify;
}

/* une fonctionnalité : texte et image côte à côte, en alternance */
.feature-theme .theme .feature { margin: 0 0 2em 0; }
.feature-theme .theme .feature > .wrapper {
  display: flex;
  align-items: center;
}
.feature-theme .theme .feature .image {
  flex: 0 0 40%;
  text-align: center;
}
.feature-theme .theme .feature .description { flex: 0 0 60%; }
.feature-theme .theme .feature h3 {
  font-family: var(--font-text);
  border: 0;
  margin: 0 0 0.3em 0;
  font-size: 1.5em;
  font-weight: bold;
}
.feature-theme .theme .feature p { margin: 0.5em 0 0 0; }

@media (max-width: 899px) {
  /* menu réduit aux icônes */
  .feature-theme { gap: 19px; }
  .feature-theme nav { flex-basis: 56px; }
  .feature-theme nav a.screenshots,
  .feature-theme nav a.to-feature-theme span.label { display: none; }
  a.to-feature-theme.active {
    margin: -5px;
    padding: 9px 11px;
    z-index: 5;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
    background: #f9fbfd linear-gradient(to bottom, #fff, var(--blue-background));
  }

  /* l'image passe au-dessus du texte */
  .feature-theme .theme .feature > .wrapper { flex-direction: column; }
  .feature-theme .theme .feature .image {
    order: 1;
    flex-basis: auto;
  }
  .feature-theme .theme .feature .description {
    order: 2;
    flex-basis: auto;
  }
}


/* Références clients
================================================== */

div.references-matrix {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
div.references-matrix .reference {
  width: 220px;
  height: 300px;
  margin: auto;
}
div.references-matrix .logo {
  height: 150px;
  display: table-cell;
  vertical-align: middle;
}
div.references-matrix .logo a { border: 0; }
div.references-matrix .description h2 {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  border: 0;
}
div.references-matrix .description h2 a {
  color: black;
  border: 0;
}
div.references-matrix .description p {
  font-size: 12px;
  line-height: 18px;
}


/* Formulaire de contact
================================================== */

fieldset.contact {
  margin: 0 auto;
  border: 1px solid #6e8b3d;
  max-width: 700px;
  width: 100%;
}
fieldset.contact > .wrapper {
  margin: 20px;
  width: 100%;
}
fieldset.contact legend { margin-left: 10px; }
fieldset.contact textarea {
  width: 90%;
  max-width: 90%;
}
fieldset.contact input[type=submit] {
  font-size: 1.2em;
  padding: 4px 6px;
}
/* ligne incomplète à l'envoi (classe posée par le script du site) */
fieldset.contact .row.fail label {
  font-weight: bold;
  color: var(--orange);
}
fieldset.contact .row.fail input { border: 2px solid var(--orange); }


/* Documentation et blog : contenu rédigé en markdown
================================================== */

/* sommaire à gauche, qui reste visible au défilement */
.documentation-page {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 -10px;
  min-height: 600px;
}
.documentation-page nav {
  flex: 0 0 160px;
  position: sticky;
  top: 30px;
  margin-top: 20px;
  font-size: 0.9em;
}
.documentation-page .documentation-content {
  flex: 1;
  min-width: 0;
  margin-top: 20px;
}

.documentation-page nav h2 {
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1.5;
  margin: 0 0 0.75em;
  border-bottom: none;
}
.documentation-page nav h3 {
  font-size: 1.1em;
  line-height: 1;
  margin: 1em 0 0.5em 0;
  border-bottom: none;
}
.documentation-page nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.documentation-page nav ul ul { margin-left: 10px; }
.documentation-page nav p { margin: 0 0 1em 0; }
.documentation-page nav a { border-bottom-width: 0; }
.documentation-page nav li a.current-doc-page::after,
.documentation-page nav li a:hover::after {
  content: " »";
  font-weight: bold;
}

.documentation-content img {
  width: 100%;
  max-width: 680px;
}

@media (max-width: 899px) {
  .documentation-page { gap: 20px; }
  .documentation-page nav { flex-basis: 100px; }
}

.blog-page .blog-header {
  font-family: var(--font-serif);
  color: var(--text-title);
  text-align: center;
  font-size: 2em;
  line-height: 1.2em;
  margin-bottom: 1em;
}

.blog-page-content {
  margin: 0 auto;
  max-width: 680px;
  border: 1px solid var(--line);
  padding: 20px;
}
.blog-page-content h1.blog-page-title {
  text-align: center;
  font-size: 2em;
  line-height: 1.2em;
  margin: 0 0 1em 0;
  border-bottom: 2px solid var(--blue);
}
.blog-page-content blockquote {
  margin: 1em 1em;
  padding-left: 1em;
  border-left: 1px solid var(--blue);
}

/* titres du contenu */
.documentation-content h1 {
  font-size: 2.2em;
  text-align: left;
  line-height: normal;
  padding: 0.2em 0;
  margin: 0 0 1em 0;
  border-bottom: 2px solid var(--blue);
}
.blog-page-content h1 {
  font-size: 1.8em;
  text-align: left;
  line-height: normal;
  padding: 0.2em 0;
  margin: 1em 0;
  border-bottom: 1px solid var(--blue);
}
.documentation-content h2,
.blog-page-content h2 {
  font-size: 1.8em;
  line-height: normal;
  padding: 0 0 0.2em 0;
  margin: 1em 0 0.8em 0;
  border-bottom: 1px solid var(--blue-border);
}
.blog-page-content h2 { font-size: 1.6em; }
.documentation-content h3,
.blog-page-content h3 {
  font-size: 1.4em;
  line-height: normal;
  padding: 0 0 0.2em 0;
  margin: 1em 0 0.5em 0;
  border-bottom: 1px solid var(--line);
}
.documentation-content h4,
.blog-page-content h4 {
  font-size: 1.2em;
  font-weight: normal;
  line-height: normal;
  padding: 0 0 0.2em 0;
  margin: 1em 0 0.4em 0;
}

.documentation-content p,
.blog-page-content p { margin: 0 0 1em 0; }

.documentation-content ul,
.blog-page-content ul {
  list-style-type: "\2192  ";
  margin: 0 0 1em 0;
}

.documentation-content pre,
.blog-page-content pre {
  padding: 1em;
  margin: 1em 0;
  background-color: #f8f9fc;
  border: 1px dashed var(--blue-link);
  overflow: auto;
}

/* images avec légende ; un clic les agrandit */
.documentation-content figure,
.blog-page-content figure {
  margin-top: 1em;
  margin-bottom: 2em;
  text-align: center;
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
}
.documentation-content figure img,
.blog-page-content figure img {
  margin-top: 1em;
  box-shadow: 0 0 10px 5px var(--line);
  max-width: 90%;
  cursor: zoom-in;
}
.documentation-content figcaption,
.blog-page-content figcaption {
  color: var(--text-muted);
  font-size: 1.1em;
  margin: 0 5% 1em;
}

/* liste des autres billets */
.blog-page-links {
  max-width: 620px;
  margin: 100px auto;
  border-left: 1px dashed var(--blue-link);
}
.blog-page-links h2.blog-page-links-header {
  font-size: 1.5em;
  line-height: 1em;
  margin: 0 0 0.5em 50px;
  border: 0;
}
.blog-page-links ul { padding: 20px 0 0 20px; }
.blog-page-links li {
  list-style-type: "\2192  ";
  margin: 0 0 0.5em 50px;
}
.blog-page-links li.hide-link { display: none; }
.blog-page-links button.show-all-links {
  font: inherit;
  font-weight: bold;
  color: var(--blue-link);
  background: none;
  border: 0;
  border-bottom: 1px dotted #bbb;
  padding: 0;
  cursor: pointer;
}

dialog.lightbox {
  padding: 0;
  border: 10px solid #fff;
  max-width: 95vw;
  max-height: 95vh;
  cursor: zoom-out;
}
dialog.lightbox img {
  display: block;
  max-width: calc(95vw - 20px);
  max-height: calc(95vh - 60px);
}
dialog.lightbox figcaption {
  text-align: center;
  color: #949494;
  padding-top: 6px;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.7); }


/* Captures d'écran : carrousel, dans la page ou dans une boîte de dialogue
   Le script du site déplace la classe « active » et pose « first » / « last »
   sur le carrousel.
================================================== */

.carousel {
  position: relative;
  background: #333;
}
.carousel .item {
  display: none;
  position: relative;
}
.carousel .item.active { display: block; }
.carousel .item > img {
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
}

.carousel-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
}
.carousel-caption .description {
  flex: 0 0 70%;
  box-sizing: border-box;
  padding: 10px 0 0 20px;
}
.carousel-caption .more-info {
  flex: 0 0 30%;
  box-sizing: border-box;
  text-align: right;
  padding: 20px 20px 0 0;
}
.carousel-caption .more-info a { display: inline-block; }
.carousel-caption h4 {
  margin-bottom: 0.5em;
  color: gold;
}
.carousel-caption p { margin-bottom: 1em; }

.carousel-control {
  position: absolute;
  bottom: 50%;
  left: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: 40px;
  color: white;
  background: rgba(0, 0, 0, 0.75);
  border: 2px solid #fff;
  border-left-width: 0;
  border-radius: 0 5px 5px 0;
  opacity: 0.7;
  cursor: pointer;
}
.carousel-control:hover { opacity: 0.9; }
.carousel-control.right {
  left: auto;
  right: 0;
  border-left-width: 2px;
  border-right-width: 0;
  border-radius: 5px 0 0 5px;
}
.carousel-control span {
  display: block;
  padding: 20px 10px;
  height: 40px;
  line-height: 40px;
  margin-top: -10px;
}
.carousel-control span.close-label {
  display: none;
  font-weight: bold;
}

/* pas de commande « précédent » sur la première capture, ni « suivant »
   sur la dernière ; dans la boîte de dialogue, « suivant » devient « fermer » */
.carousel.first .carousel-control[data-slide="prev"],
.carousel.last .carousel-control[data-slide="next"] { display: none; }

dialog.screenshots .carousel.last .carousel-control[data-slide="next"] { display: block; }
dialog.screenshots .carousel.last span.next-label { display: none; }
dialog.screenshots .carousel.last span.close-label { display: block; }

/* la boîte garde les proportions des captures (966 x 736) et tient dans
   la fenêtre */
dialog.screenshots {
  padding: 0;
  border: 8px solid #fff;
  border-radius: 6px;
  overflow: hidden;
  max-width: none;
  max-height: none;
  width: min(966px, calc(100vw - 36px), calc((100vh - 36px) * 966 / 736));
}