@font-face {
  font-family: 'NHaasGrotesk';
  src: url('/static/fonts/NHaasGroteskTXW01-55Rg.woff2') format('woff2');
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  -webkit-margin-after: 0;
          margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}
/* Constant design tokens */
:root {
  /* Fluid type scale */
  --size-step--2: clamp(0.6944rem, 0.6376rem + 0.284vw, 0.84rem);
  --size-step--1: clamp(0.8333rem, 0.7488rem + 0.4228vw, 1.05rem);
  --size-step-0: clamp(1rem, 0.878rem + 0.6098vw, 1.3125rem);
  --size-step-1: clamp(1.2rem, 1.028rem + 0.8598vw, 1.6406rem);
  --size-step-2: clamp(1.44rem, 1.2016rem + 1.1918vw, 2.0508rem);
  --size-step-3: clamp(1.728rem, 1.402rem + 1.6302vw, 2.5635rem);
  --size-step-4: clamp(2.0736rem, 1.6323rem + 2.2063vw, 3.2043rem);
  --size-step-5: clamp(2.4883rem, 1.8963rem + 2.9602vw, 4.0054rem);
  --size-step-6: clamp(2.986rem, 2.1974rem + 3.943vw, 5.0068rem);
  --size-step-7: clamp(3.5832rem, 2.5392rem + 5.2201vw, 6.2585rem);

  /* Fluid space scale */
  --space-3xs: clamp(0.25rem, 0.2256rem + 0.122vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4268rem + 0.3659vw, 0.6875rem);
  --space-xs: clamp(0.75rem, 0.6524rem + 0.4878vw, 1rem);
  --space-s: clamp(1rem, 0.878rem + 0.6098vw, 1.3125rem);
  --space-m: clamp(1.5rem, 1.3049rem + 0.9756vw, 2rem);
  --space-l: clamp(2rem, 1.7561rem + 1.2195vw, 2.625rem);
  --space-xl: clamp(3rem, 2.6341rem + 1.8293vw, 3.9375rem);
  --space-2xl: clamp(4rem, 3.5122rem + 2.439vw, 5.25rem);
  --space-3xl: clamp(6rem, 5.2683rem + 3.6585vw, 7.875rem);

  /* Colours */
  --color-light: #ffffff;
  --color-light-shade: #f3f5f7;
  --color-dark: #000000;
  --color-mid: #ebebeb;
  --color-mid-shade: #dedede;
  --color-midnight: #4a4e69;
  --color-midnight-shade: #22223b;
  --color-eggshell: #f2e9e4;
  --color-deep-blue: #68b5e9;
  --color-blue: #3b71fe;
  --color-blue-glare: #eef6fd;
  --color-slate: #4f5563;
}

/* Abstracted, global tokens (theme) */
:root {
  --leading: 1.5;
  --leading-short: 1.3;
  --leading-fine: 1.1;
  --leading-flat: 1;
  --leading-loose: 1.7;
  --kerning: normal;
  --kerning-tight: -0.04ch;
  --kerning-loose: 0.1ch;
  --text-size-base: var(--size-step-0);
  --text-size-lede: var(--size-step-1);
  --text-size-meta: var(--size-step--1);
  --text-size-heading-1: var(--size-step-5);
  --text-size-heading-2: var(--size-step-4);
  --text-size-heading-3: var(--size-step-3);
  --text-size-heading-4: var(--size-step-2);
  --text-size-prose: var(--text-size-base);
  --space-gutter: var(--space-m);
  --space-gutter-s: var(--space-s);
  --space-gutter-l: var(--space-l);
  --space-regions: var(--space-xl);
  --size-wrapper-max-width: 1135px;
  --color-global-bg: var(--color-light);
  --color-global-text: var(--color-dark);
  --color-surface-bg: var(--color-mid);
  --color-surface-bg-interact: var(--color-mid-shade);
  --color-surface-text: var(--color-dark);
  --color-surface-text-interact: var(--color-dark);
  --font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
    helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  --font-display: var(--font-base);
  --font-lede: var(--font-base);
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  --focus-ring: 2px solid currentColor;
  --focus-ring-offset: 2px;
}

/* Core styles (shared) */
body {
  font-family: var(--font-base);
  font-size: var(--text-size-base);
  line-height: var(--leading);
  background: var(--color-global-bg);
  color: var(--color-global-text);
}

h1 {
  /* font-size: var(--text-size-heading-1); */
  font-size: var(--size-step-3);
}

h2 {
  font-size: var(--text-size-heading-2);
}

h3 {
  font-size: var(--text-size-heading-3);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  /* letter-spacing: var(--kerning-tight); */
}

h1,
h2,
h3 {
  font-weight: var(--font-weight-regular);
}

h4,
h5,
h6 {
  font-size: var(--text-size-heading-4);
}

/*CR 18/12 : changement de la css des blockquotes :
- suppression de la margin:0
- ajout margin-left 100px + border-left 

:where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) {
  margin: 0;
}
*/
:where(body, h1, h2, h3, h4, p, figure, dl, dd) {
  margin: 0;
}

blockquote {
margin-left: 100px;
border-left: 0.2rem solid black;
padding-left: 20px;
}

ul[class] {
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Core shared layouts */

/*
WRAPPER COMPOSITION 
A common wrapper/container
*/
.wrapper {
  margin-inline: auto;
  max-width: clamp(16rem, var(--size-wrapper-max-width, 100vw), 1200px);
  padding-left: var(--space-gutter);
  padding-right: var(--space-gutter);
  position: relative;
}

/* 
SIDEBAR
More info: https://every-layout.dev/layouts/sidebar/
A layout that allows you to have a flexible main content area
and a "fixed" width sidebar that sits on the left or right.
If there is not enough viewport space to fit both the sidebar
width *and* the main content minimum width, they will stack
on top of each other

CUSTOM PROPERTIES AND CONFIGURATION
--space-gutter: This defines the space
between the sidebar and main content.

--sidebar-target-width (20rem): How large the sidebar should be

--sidebar-content-min-width(50%): The minimum size of the main content area
*/
.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-gutter);
}

.sidebar> :first-child {
  flex-basis: var(--sidebar-target-width, 20rem);
  flex-grow: 1;
}

.sidebar> :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min-width, 50%);
}

/* AUTO GRID
Related Every Layout: https://every-layout.dev/layouts/grid/
More info on the flexible nature: https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
A flexible layout that will create an auto-fill grid with
configurable grid item sizes

CUSTOM PROPERTIES AND CONFIGURATION
--space-gutter (var(--space-s-m)): This defines the space
between each item.

--grid-min-item-size (14rem): How large each item should be
ideally, as a minimum.

--grid-placement (auto-fill): Set either auto-fit or auto-fill
to change how empty grid tracks are handled */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-placement, auto-fill),
      minmax(var(--grid-min-item-size, 16rem), 1fr));
  gap: var(--space-gutter, var(--space-s-l));
}

/* 
FLOW COMPOSITION 
Like the Every Layout stack: https://every-layout.dev/layouts/stack/
Info about this implementation: https://piccalil.li/quick-tip/flow-utility/ 
*/
.flow>*+* {
  margin-top: var(--space-flow, 1em);
}

/*
CLUSTER
More info: https://every-layout.dev/layouts/cluster/
A layout that lets you distribute items with consitent
spacing, regardless of their size

CUSTOM PROPERTIES AND CONFIGURATION
--space-gutter (var(--space-s-m)): This defines the space
between each item.

--cluster-horizontal-alignment (flex-start) How items should align
horizontally. Can be any acceptable flexbox aligmnent value.

--cluster-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: var(--cluster-horizontal-alignment, flex-start);
  align-items: var(--cluster-vertical-alignment, center);
}

/* Specific utilities */
.region {
  padding-block: var(--space-regions);
}

/* Configuration powered components */
.button {
  display: inline-flex;
  gap: var(--button-gap, var(--space-gutter));
  padding: var(--button-padding, 0.8em 1.5em);
  background: var(--button-bg, var(--color-surface-bg));
  color: var(--button-text, var(--color-surface-text));
  line-height: var(--button-leading, var(--leading-fine));
  border-radius: var(--button-radius, 0);
  text-decoration: none;
  text-transform: var(--button-text-transform, uppercase);
  font-weight: var(--button-font-weight, var(--font-weight-medium));
  letter-spacing: var(--button-kerning, var(--kerning-loose));
  cursor: pointer;
}

.button:hover {
  background: var(--button-interact-bg, var(--color-surface-bg-interact));
  color: var(--button-interact-text, var(--color-surface-text-interact));
}

/* Standard components */
.lede {
  font-size: var(--text-size-lede);
  line-height: var(--leading-short);
  font-family: var(--font-lede);
}

.intro {
  --sidebar-target-width: 10ch;
}

.intro h1 {
  transform: translateY(-0.2ex);
}

.intro nav ul {
  --cluster-vertical-alignment: stretch;
  /* gap: var(--space-l); */
  gap: 0;
  height: 56px;
  border-top: 1px solid var(--color-global-text);
  border-bottom: 1px solid var(--color-global-text);
}


.intro nav a {
  text-decoration: none;
  font-size: var(--size-step-1);
  height: 100%;
  width: 100%;
  display: inline-block;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  padding-left: 10px;
  padding-top: 4px;
  padding-right: 10px;
}


.intro nav a:hover {
  border-left: 1px solid var(--color-global-text);
  border-right: 1px solid var(--color-global-text);
}

.intro nav li:first-child a:hover {
  border-left: 1px solid transparent;
}

/* Custom property configuration */
:root {
  --color-global-bg: var(--color-light);
  --color-global-text: var(--color-midnight-shade);
  --color-surface-bg: var(--color-blue);
  --color-surface-bg-interact: var(--color-dark);
  --color-surface-text: var(--color-light);
  --color-surface-text-interact: var(--color-light);
  --button-radius: 1.5em;
  --font-lede: 'Antique Olive', sans-serif;
  --font-display: 'Antique Olive', sans-serif;
}

@font-face {
  font-family: "Antique Olive";
  font-stretch: normal;
  font-style: normal;
  font-weight: 400;
  src: url(/static/fonts/ANTIQUEOLIVEPRO-ROMAN.BAUNa9VI.OTF)
}

/* Specific theme styles and settings */
.intro {
  --space-regions: var(--space-m) var(--space-l);
  --sidebar-target-width: 13ch;
  background: var(--color-deep-blue);
}

.intro .sidebar {
  gap: var(--space-s) var(--space-l);
}

.lede {
  font-style: italic;
}

.square{
  display:block;
  position: relative;
  overflow: hidden;
  padding-top:100%;
}

.square img {
  position:absolute;
  left:0px;
  top:0px;
  width: 100%;
  height:0px;
  height:100%;
  object-fit: cover;
}
.quote a{
  text-decoration: none;
}
.quote q {
  quotes: none;
  font-family: var(--font-display);
  padding:0.35em 0em;
  font-size:24px;
  display:block;
}

.grid {
  --space-flow: var(--space-l);
}

table{
  border-collapse: collapse;
}
table tbody tr{
  border:1px solid lightgrey;
  border-left:0px;
  border-right:0px;
}
table th{
  padding:0.5em;
}
table td{
  padding:0.25em;
}