* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */

  -webkit-font-smoothing: antialiased; /* font anti-crénelage (anti-aliasing) */
  -moz-osx-font-smoothing: grayscale; /* font anti-crénelage (anti-aliasing) */
}

:root {
  --padding: 1rem;
  --color-black: #2B2B2B;
  --color-white: #Ffffff;
  --color-grey: #808080;
  --color-light: #F8F7F8;
  --color-text: var(--color-black);
  --color-text-grey: var(--color-grey);
  --color-background: var(--color-light);
  --color-code-light-grey:  #cacbd1;
  --color-code-comment:     #a9aaad;
  --color-code-white:       #c5c9c6;
  --color-code-red:         #d16464;
  --color-code-orange:      #de935f;
  --color-code-yellow:      #f0c674;
  --color-code-green:       #a7bd68;
  --color-code-aqua:        #8abeb7;
  --color-code-blue:        #00f;
  --color-code-purple:      #F1EBFF;
  --font-family: "DMSans-Regular";
  --font-family-italic: "DMSans-Italic";
  --font-picto-Up: "SmashUp";
  --font-picto-Down: "SmashDown";
  --main-height: 0px;
}

@font-face {
  src: local("DMSans-Regular"),
       url("fonts/DMSans-Regular.ttf") format("truetype"),
       url("fonts/DMSans-Regular.woff") format("woff"),
       url("fonts/DMSans-Regular.woff2") format("woff2");
  font-family: "DMSans-Regular";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  src: local("DMSans-Italic"),
       url("fonts/DMSans-Italic.ttf") format("truetype"),
       url("fonts/DMSans-Italic.woff") format("woff"),
       url("fonts/DMSans-Italic.woff2") format("woff2");
  font-family: "DMSans-Italic";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  src: local("SmashUp-Regular"),
       url("fonts/SmashUp-Regular.otf") format("opentype"),
       url("fonts/SmashUp-Regular.woff") format("woff"),
       url("fonts/SmashUp-Regular.woff2") format("woff2"),
       url('fonts/SmashUp-Regular.svg#SmashUp') format('svg');
  font-family: "SmashUp";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  src: local("SmashDown-Regular"),
       url("fonts/SmashDown-Regular.otf") format("opentype"),
       url("fonts/SmashDown-Regular.woff") format("woff"),
       url("fonts/SmashDown-Regular.woff2") format("woff2"),
       url('fonts/SmashDown-Regular.svg#SmashDown') format('svg');
  font-family: "SmashDown";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
  
html {
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-background);
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}
body {
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  margin: 0 auto;
}
main {
  padding: 24px 32px 52.5px;
}
.mainNote {
  padding: 0 0 128px 0;
}
li {
  list-style: none;
}
a {
  color: currentColor;
  text-decoration: none;
}
a:hover {
  font-family: var(--font-family-70);
}
button {
  font: inherit;
  background: none;
  border: 0;
  color: currentColor;
  cursor: pointer;
}
strong, b {
  font-weight: 600;
}
small {
  font-size: inherit;
  color: var(--color-text-grey);
}
img {
  width: 100%;
}

.bg-light {
  background-color: var(--color-light);
}

.header {
  background-color: var(--color-background);
  position: fixed;
  z-index: 1;
  width: 100%;
  padding: 1rem 1rem 108px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
/*  align-items: center;*/
}

.logo {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 8px;
}
.logoImg {
  width: 74px;
  height: 74px;
  border: 1px dashed var(--color-black);
  margin-right: 1rem;
}

.bandeauBlank {
  position: fixed;
  z-index: 1;
  top: 108px;
  left: 16px;
  height: 74px;
  width: calc(100% - 34px);
  border: 1px dashed var(--color-black);

}

.menu {
  display: flex;
}
.menu a {
  font-size: 2rem;
  line-height: 38px;
  font-family: var(--font-family-20);
  display: block;
  height: fit-content;
  color: var(--color-code-blue);
}
.menu a[aria-current] {
  text-decoration: underline;
}
.menu a:hover {
  font-family: var(--font-family-70);
}

.ghost {
  position: absolute;
  right: 40px;
  color: var(--color-background);
  font-family: var(--font-picto-Up);
  font-size: 1px;
}
.ghost span {
  font-family: var(--font-picto-Down);
}

.bonjour {
  font-size: 38px;
}
.presentation {
  max-width: 1250px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 38px;
  margin: 20px 0 20px;
}

.presentation sup {
  vertical-align: top; 
  font-size: 28px;
}

details {
}
/*details span {
  text-decoration: underline;
  color: var(--color-code-blue);
  cursor: pointer;
}
details span:hover {
  background-color: var(--color-code-blue);
  color: var(--color-background);
  border-radius: 3px;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}*/
summary {
  display: inline;
  list-style: none;
}
details summary::-webkit-details-marker {
  display: none;
}

.welcomeSequence[open] .bonjour {
  text-decoration: none;
  color: inherit;
}
.welcomeSequence[open] .bonjour:hover, .membre[open] span:hover {
  background-color: inherit;
  color: inherit;

}

.membre[open] span {
  text-decoration: none;
  color: inherit;
}

.hidden {
  display: none;
}

.bienvenuSequence {
  max-width: 1600px;
  font-size: 38px;
}
.bienvenuSequence br {
  display: block;
  margin: 12px 0;
}
.gap {
  display: block;
  margin: 22px 0;
}

.progressive {
    width: calc(100vw - 64px);
    opacity: 0; /* Cachée au départ */
    visibility: hidden; /* Masquée mais prend de l'espace */
}
.progressive.visible {
    opacity: 1; /* Visible après activation */
    visibility: visible; /* Réapparaît immédiatement */
    transition: opacity 0.7s ease-in-out; /* Transition ajustée */
}

#linkInitial {
  text-decoration: underline; 
  color: blue; 
  cursor: pointer;
}
#linkInitial:hover {
    color: var(--color-background);
  background-color: var(--color-code-blue);
  border-radius: 3px;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.buttonA, .buttonB {
  pointer-events: auto !important;
  line-height: 0px;
  font-size: 48px;
  margin-left: 10px;
  cursor: pointer;
  font-family: var(--font-picto-Up);
}
.buttonA {
  color: green;
}
.buttonB {
  color: red;
}
.buttonA:hover, .buttonB:hover {
  pointer-events: auto !important;
  font-family: var(--font-picto-Down);
}

.disabled-link {
    pointer-events: none;
    color: var(--color-black) !important; /* Optionnel : change la couleur pour indiquer le désactivé */
    text-decoration: none !important;
}
#texte1 > .disabled-link:hover {
  font-family: var(--font-picto-Down) !important;
}

.grid {
  --columns: 12;
  --gutter: 0;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: 1fr;
  aspect-ratio: 16 / 10;
}
.grid > .column {
  margin-bottom: var(--gutter);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  margin: 32px 0;
}

.tags li {
  margin: 0 12px 16px 0;
}

.tags a {
  padding: 4px 12px 4px 12px;
  background-color: var(--color-white);
  border-radius: 8px;
}
.tags a:hover {
  background: var(--color-black);
  color: var(--color-white);
}

.autogrid {
  --gutter: 3rem;
  --min: 10rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
  grid-auto-flow: dense;
}

.blog {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: max-content;
  column-gap: 0;
  row-gap: 22px;
  grid-template-areas: 
    ". . . . ."; 
  font-size: 24px;
}
/*.note-excerpt:nth-child(5n+1)::before {
  content: "→";
  color: var(--color-code-blue);
  margin: 4px 6px 0px 0px;
}*/
.note-excerpt::before {
  font-family: var(--font-family);
  content: "☞";
  font-size: 48px;
  margin-top: -16px;
  color: var(--color-background);
  opacity: 0%;
  margin-right: 4px;
}
.note-excerpt:hover::before {
  color: var(--color-code-blue);
  opacity: 100%;
}

.CTA {
  display: flex;
  justify-content: center;
  align-items: center;
}
.lien {
  display: block;
  padding: 12px 16px;
  background-color: var(--color-white);
  border-radius: 8px;
  max-width: fit-content;
  text-overflow: ellipsis;
}
.lien:hover {
  background: var(--color-black);
  color: var(--color-white);
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.text {
}
.text > * {
}
.text a {
  text-decoration: underline;
}
.text p > a:hover {
  color: var(--color-background);
  background-color: var(--color-text);
  border-radius: 3px;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.text :first-child {
  margin-top: 0;
}
.text :last-child {
  margin-bottom: -2.5px;
}
.text p {
  font-size: 38px;
  margin: 32px 32px !important;
  max-width: 1400px;
}
.text ul,
.text ol {
  justify-content: space-between;
  margin: 0px 32px -48px !important;
  display: flex;
  font-size: 28px;
}
.text ul p,
.text ol p {
  margin-bottom: 0;
}
.text ul > li {
/*  list-style: '⌘ ';*/
}
.text ol > li {
  list-style: decimal;
}
.text ul ol,
.text ul ul,
.text ol ul,
.text ol ol {
  margin-bottom: 0;
}
.text h1,
.h1,
.intro {
  font-size: 2rem;
/*  margin-bottom: 3rem;*/
  line-height: 38px;
}
.text h2,
.h2 {
  font-size: 28px;
  line-height: 34px;
  font-weight: 600;
  margin-bottom: 1rem;
  margin-top: 136px;
}
.text p + h2 {
  margin-top: 24px;
}

.text h3,
.h3 {
  font-weight: 600;
}
.text .codeblock {
  display: grid;
}
.text code {
  font-family: var(--font-family-mono);
  font-size: 1em;
  background: var(--color-light);
  padding: 0 .5rem;
  display: inline-block;
  color: var(--color-black);
}
.text pre {
  margin: 3rem 0;
  background: var(--color-black);
  color: var(--color-white);
  padding: 1.5rem;
  overflow-x: scroll;
  overflow-y: hidden;
  line-height: 1.5rem;
}
.text pre code {
  padding: 0;
  background: none;
  color: inherit;
}
.text hr {
  margin: 6rem 0;
}
.text dt {
  font-weight: 600;
}
.text blockquote {
/*  font-size: 1.25rem;
  line-height: 1.325em;*/
  text-align: center;
  text-align-last: center;
  font-size: 20px;
  line-height: 28px;
  font-style: italic;
  border-left: 1px dashed var(--color-text);
  border-right: 1px dashed var(--color-text);
  padding: 0 4rem;
  margin: 3rem 0;
/*  max-width: 25rem;*/
}

.text blockquote footer {
  font-size: .875rem;
  font-style: italic;
}
.text figure {
  margin: 56px 0 96px;
}
.text figure + figure {
  margin-top: -32px !important;
}

.text figcaption {
/*  font-family: Redaction;
  padding-top: 8px;
  line-height: 19px;
  color: var(--color-text);
  border-bottom: 1px dashed var(--color-text);*/
}
.text figure ul {
  line-height: 0;
  display: grid;
  gap: 8px;
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.text figure ul li {
  list-style: none;
}

.default h1, .default p {
  font-size: 38px;
}
.default p {
  margin: 32px 0 !important;
  max-width: 1000px;
}

#texte2 a, #texte3 a {
  color: var(--color-code-blue);
  text-decoration: underline;
}
#texte2 a:hover, #texte3 a:hover {
  color: var(--color-background);
  background-color: var(--color-code-blue);
  border-radius: 3px;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

hr {
  border: 0;
  background: currentColor;
  height: 2px;
  width: 1.5rem;
  margin: 3rem auto;
}

.align-center {
  text-align: center;
}

.intro {
  max-width: 40rem;
}
.intro *:not(:last-child) {
  margin-bottom: 1em;
}

.cta {
  background: var(--color-black);
  color: var(--color-white);
  display: inline-flex;
  justify-content: center;
  padding: .75rem 1.5rem;
  border: 4px solid var(--color-white);
  outline: 2px solid var(--color-black);
}

.box {
  background: var(--color-light);
  padding: 1.5rem;
  border: 4px solid var(--color-white);
  outline: 2px solid var(--color-light);
}

.video,
.img {
  position: relative;
  display: block;
  --w: 1;
  --h: 1;
  padding-bottom: calc(100% / var(--w) * var(--h));
  background: var(--color-black);
}
.img img,
.video iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.img[data-contain] img {
  object-fit: contain;
}
.img-caption,
.video-caption {
  padding-top: .75rem;
  line-height: 1.5em;
}

.footer {
  display: flex;
  position: fixed;
  z-index: 100;
  bottom: 0;
  width: 100%;
  padding: 8px 32px 8px;
  background-color: #f8f7f8f2;
  justify-content: space-between;
}
.footer > * {
  margin-top: auto;
}
.footer h2 {
  font-weight: 600;
  margin-bottom: .75rem;
}
.footer ul,
.footer p {
/*color: var(--color-text-grey);*/
}
.footer div{
    cursor: default;
}
.footer a, .contact {
  font-size: 28px;
  color: var(--color-text);
}
.footer a:hover, .footer summary:hover {
  color: var(--color-background);
  background-color: var(--color-text);
  border-radius: 3px;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.clickable-list {
  cursor: pointer;
}

.clickable-list li {
  cursor: text; /* Pour indiquer que les <li> sont cliquables pour copier */
  max-width: 970px;
}

.business {
  max-width: 970px;
}

.diode {
color: green;
  font-size: 68px;
  vertical-align: sub;
  line-height: 0;
  margin: 0px -1px;
  animation: blink 1s infinite; /* Animation infinie */
}
@keyframes blink {
  0%, 10% {
      opacity: 0; /* Invisible */
  }
  25%, 90% {
      opacity: 1; /* Visible */
  }
  90%, 100% {
    opacity: 0;
  }
}

/*.logoSMASH {
  height: 37px;
  display: flex;
  align-items: center;
  font-size: 28px;
}
.pictos {
  display: flex;
  align-items: center;
  height: 37px;
  margin-bottom: -17px;
}
.logoB, .logoA {
  font-size: 38px;
  line-height: 0;
  font-family: var(--font-picto-Up);
}
.logoB {
  margin-bottom: 34px;
  margin-right: -4px;
}
.smashB, .smashA {
  background-color: white;
  border: 1px solid black;
  padding: 0px 6px;
  border-radius: 2px;
}
.smashB {
  margin-bottom: 54px;
  margin-right: -6px;
}*/

.contact {
  display: block;
}
.contact summary {
  cursor: pointer;
}
.contact[open] > *:not(summary) {
  position: absolute;
  width: 100%;
  bottom: 100%; /* Place le contenu au-dessus */
  background-color: #f8f7f8f2;
  padding: 100vh calc(100vw - 1002px) 0 32px;
  left: 0;
}
.contact ul {
  font-size: 38px;
}
.contact[open] summary {
  text-decoration: underline;
}
.contact a {
  font-size: 38px;
  color: var(--color-code-blue);
  text-decoration: underline;
}
.contact a:hover {
  background-color: var(--color-code-blue);
}
.colophon summary {
  text-decoration: none !important;
}
.colophon[open] summary {
  text-decoration: underline !important;
}
.listcolophon {
  width: 65vw !important;
  max-width: unset !important;
}

.title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;       
  position: fixed;
  bottom: 1rem;
  z-index: 1;
  color: var(--color-text-grey);
  pointer-events: none;
}

.map {
  --w: 2;
  --h: 1;
  padding-bottom: calc(100% / var(--w) * var(--h));
  position: relative;
  overflow: hidden;
  background: var(--color-black);
}
.map iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.margin-s {
  margin-bottom: .75rem;
}
.margin-m {
  margin-bottom: 1.5rem;
}
.margin-l {
  margin-bottom: 3rem;
}
.margin-xl {
  margin-bottom:0;
}
.margin-xxl {
  margin-bottom: 6rem;
}

section:has(ul) {
  height: 48px;
  width: 100%;
  margin-top: 8px;
}
section:has(h1) {
  position: absolute;
  z-index: 1;
  top: 70vh;
  width: 100%;
  mix-blend-mode: difference;
}
.traces {
  font-size: 20vw !important;
  text-align: center;
  color: white;
  font-weight: bold;
  font-style: italic;
}

.grid {
  grid-template-columns: repeat(12, 1fr);
}
.grid > .column {
  grid-column: span var(--columns);
}

.logoImg {
padding-bottom: 0px;
}

.pagination {
  display: flex;
  padding-top: 6rem;
}
.pagination > span {
  color: var(--color-text-grey);
}
.pagination > * {
  padding: .5rem;
  width: 3rem;
  text-align: center;
  border: 2px solid currentColor;
  margin-right: 1.5rem;
}
.pagination > a:hover {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

.note-excerpt {
  display: flex;
}
.note-excerpt figcaption {
  font-weight: normal;
  display: flex;
  margin-right: 12px;
}
.titre {
  color: var(--color-code-blue);
}
.underline {
  text-decoration: underline;
}

.subheadline {
  font-style: italic;
}
/*.center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  word-break: break-all;
}*/
.data {
  display: inline;
  font-size: 0.7rem;
}
.note-excerpt .bandeau {
  display: none;
  align-items: center;
  justify-content: center;    
  height: 76px;
  position: fixed;
  z-index: 1;
  top: 108px;
  left: 16px;
  width: calc(100% - 32px);
}
.bandeau img {
  object-fit: cover;
  height: 76px;
  position: fixed;
  z-index: 1;
  width: calc(100% - 32px);
}
.bandeau h1 {
  z-index: 1;
  font-size: 2rem;
  color: var(--color-light);
  mix-blend-mode: color-dodge;
/*  color: white;
  mix-blend-mode: difference;*/
  font-family: var(--font-family-20);
}
.note-excerpt .avatar {
  display: none;
  object-fit: cover;
  position: absolute;
  z-index: -1;

  /* img pleine page */
  height: 100dvh;
  width: 100vw;
  bottom:0;
  left: 0;
  opacity: 8%;
  transition: all 1s ease-in-out;
/*  mix-blend-mode:overlay;*/

  /* img dans l'espace vide */
/*  bottom: 53px;
  margin-left: -50px;
  height: calc(100dvh - (var(--main-height) + 24px));
  width: calc(100vw / 5 - 24px);*/

  /* déplacement img avec souris */
/*  width: 400px;
  margin: 10px 0 0 20px;
  transition: transform 0.1s ease;*/
}
.note-excerpt-date {
  text-decoration: none;
  color: var(--color-text-grey);
}
.note-excerpt :hover .bandeau {
  display: flex;
}
.note-excerpt :hover .avatar {
  display: block;
}

.blog-prevnext .note-excerpt {
  max-width: 348px;
}

@media screen and (max-width: 1081px) {

main {
  padding: 24px 16px 104px;
}

.mainNote {
  padding: 0 0 104px 0;
}

.default h1 {
  font-size: 24px;
}
.default .text p{
  font-size: 24px;
  margin: 16px 0 !important;
}

#linkInitial {
  text-decoration: underline; 
  color: blue; 
  cursor: pointer;
}
#linkInitial:hover {
  color: var(--color-code-blue);
  background-color: unset;
  border-radius: 0px;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.bienvenuSequence {
  font-size: 24px;
}
.bienvenuSequence br {
  display: block;
  margin: 12px 0;
}
.gap {
  display: block;
  margin: 24px 0;
}

#texte2 a:hover, #texte3 a:hover {
  color: var(--color-code-blue);
  background-color: unset;
  border-radius: 0px;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.buttonA, .buttonB {
  font-size: 40px;
  margin-left: 8px;
}
.buttonA:hover, .buttonB:hover {
  pointer-events: auto !important;
  font-family: var(--font-picto-Up);
}
#texte1 > .disabled-link {
  font-family: var(--font-picto-Down) !important;
}
#texte1 > .disabled-link:hover {
  font-family: var(--font-picto-Down) !important;
}

.progressive {
  height: 0px;
}
.progressive.visible {
  height: fit-content;
}

.blog {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  font-size: 16px;
  row-gap: 12px;
  grid-template-areas:".";
}
.note-excerpt::before {
  font-size: 32px;
  margin-top: -10px;
}

.footer {
  padding: 8px 16px 8px;
}
.footer a, .contact{
  font-size: 16px;
}
.contact ul {
  font-size: 16px;
}
.contact[open] > *:not(summary) {
  padding: 100dvh 16px 0 16px;
}
.diode {
  font-size: 28px;
}
.listcolophon {
  width: 100% !important;
  max-width: unset !important;
}

.grid {
  grid-template-columns: none;
}
.text p {
  font-size: 18px;
  margin: 24px 16px !important;
  max-width: 1400px;
}
.text ul,
.text ol {
  justify-content: space-between;
  margin: 0 16px 16px !important;
  display: flex;
  font-size: 16px;
  flex-direction: column;
}
section:has(ul) {
  height: fit-content;
  width: 100%;
  aspect-ratio: unset !important;
}
section:has(img) + section:has(ul){
  margin: 32px 0 0 !important;
}
section:has(h1) {
  top: 20vh;
}

}