/* Retouche de contraste et d'échelle, appliquée par-dessus le style de chaque page.

   Pourquoi un fichier séparé plutôt que 20 pages retouchées : le style est écrit en
   ligne dans chaque page (accueil à la main, pages modèles générées). Un calque
   d'ajustement se corrige d'un seul endroit et se retire d'une seule ligne si la
   direction ne plaît pas.

   Deux reproches à corriger : « la page est tellement blanche, on se croirait dans
   une salle d'urgence » et « le logo est encore beaucoup trop petit ».
   Chargé APRÈS le style de la page, donc il gagne à spécificité égale. */

:root {
  /* Le gris des textes secondaires était trop pâle pour être lu confortablement. */
  --gris: #55616f;
  /* Les filets se voyaient à peine : les cadres n'avaient pas de contour. */
  --trait: #c6d1dd;
}

/* Un fond qui n'est pas blanc : c'est lui qui fait exister les blocs blancs. */
body {
  background: #e8edf3;
}

/* La barre du haut se détache du contenu, avec le filet doré de la marque. */
.barre,
header {
  background: #fff;
  border-bottom: 1px solid #c6d1dd;
  box-shadow: 0 2px 0 rgba(242, 183, 5, .9), 0 6px 18px -10px rgba(21, 34, 50, .35);
}

/* Le logo est la signature : il portait 72 px, il en porte 112.
   L'image source fait 240 px de haut, donc elle reste nette à cette taille. */
.marque img {
  height: 112px;
}

/* Les blocs de contenu deviennent des cartes posées sur le fond, au lieu de
   flotter sur du blanc sans limite. */
.carte,
.outil,
.vignette,
.fiche,
.panneau,
.encadre {
  border-color: #c6d1dd;
  box-shadow: 0 2px 8px -3px rgba(21, 34, 50, .18);
}

.carte:hover,
.outil:hover {
  box-shadow: 0 10px 24px -8px rgba(21, 34, 50, .28);
}

/* Le texte courant : un cran plus foncé, sans devenir noir. */
.hero p,
.argument p,
.preuve p,
section p {
  color: #3d4a5a;
}

/* Les champs de saisie doivent se voir : c'est là que le visiteur agit. */
input[type="text"],
input[type="number"],
input:not([type]),
select,
textarea {
  border: 2px solid #8c9db1;
  background: #fff;
  color: #152232;
}

input[type="text"]:focus,
input[type="number"]:focus,
input:not([type]):focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: #152232;
  box-shadow: 0 0 0 3px rgba(242, 183, 5, .45);
}

/* Le pied de page cesse de se fondre dans le fond. */
footer {
  border-top: 1px solid #c6d1dd;
}

@media (max-width: 700px) {
  .marque img {
    height: 76px;
  }
}

/* Les blocs de texte flottaient sur le fond : posés sur du blanc, ils deviennent
   des sections lisibles au lieu d'un long ruban. */
.argument,
.preuve {
  background: #fff;
  border: 1px solid #c6d1dd;
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 2px 8px -3px rgba(21, 34, 50, .16);
}

/* Le titre de section reprend la couleur de la marque : c'est ce qui donne un
   repère visuel en descendant la page. */
section > h2 {
  color: #152232;
  border-left: 4px solid var(--or);
  padding-left: 10px;
}