/* =========================================================
BASE.CSS (mobile first)
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%}

body {
  font-size: 1rem;/* ~16px */
  line-height: 1.6;
  margin: 0}

a[target="_blank"]::after, a[rel~="external"]::after {
  content: "↗";
  font-size: .8rem;
  vertical-align: -.05em}

/* FONT 1 */
.font-1,
h1, h2, h3, h4, h5, h6,
button, .btn,
input,
select,
textarea {font-family: Arial, sans-serif}


/* FONT 2 (textes) */
body,
.font-2 {font-family: Verdana, sans-serif}

/* FONT 3 (titres, divers...) */
.font-3,
.wp-caption-text {font-family: Georgia, serif}


/* UPPERCASE */
h1,
.txt-upc,
input[type="submit"] {text-transform: uppercase}


/* TEXT-DECORATION */
a,
a:active, a:focus {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px}

a:hover,
a.btn,
a.btn:active,
a.btn:focus,
a.btn:hover {text-decoration: none}


/* SUITE */

h1, .h1 {font-size: 180%; line-height: 1.3}
h2 {font-size: 180%; line-height: 1.3}
h3 {font-size: 165%; line-height: 1.35}
h4 {font-size: 150%; line-height: 1.4}
h5 {font-size: 135%; line-height: 1.45}
h6, .h6 {font-size: 120%; line-height: 1.5}

h1, .h1 {margin-bottom: 3rem}

h1,
p,
ul, ol,
blockquote {margin-top: 0}

h2, h3, h4, h5, h6 {
  margin-bottom: 2rem; margin-top: 3rem}

p,
ul, ol,
blockquote {margin-bottom: 1rem}

small, .small {font-size: 85%}


iframe {
  max-width: 800px;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  margin: 2rem auto}

img {
  display: block;
  height: auto;
  max-width: 100%}

figure {margin: 0}

hr {
  border-width: 1px 0 0;
  height: 0;
  line-height: 0;
  margin: 2rem 0}

ul, ol {padding-left: 1.25rem}

li:not(:last-child) {padding-bottom: .5rem}


/* == FORMS == */
button, .btn,
input[type="button"],
input[type="submit"] {
  cursor: pointer;
  /*display: inline-block; margin: 0*/
  font-size: 1rem;
  line-height: 1rem;
  padding: 12px 12px 10px;
  text-align: center}