/* POINTS DE RUPTURE CONVOQUÉS : 320px (20rem) et 1200px (75rem) */

@font-face {
    font-family: 'Amiamie Amiamie';
    src: url('fonts/Amiamie-BlackItalic.eot');
    src: local('fonts/Amiamie Black Italic'), local('fonts/Amiamie-BlackItalic'),
        url('fonts/Amiamie-BlackItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Amiamie-BlackItalic.woff2') format('woff2'),
        url('fonts/Amiamie-BlackItalic.woff') format('woff'),
        url('fonts/Amiamie-BlackItalic.ttf') format('truetype'),
        url('fonts/Amiamie-BlackItalic.svg#Amiamie-BlackItalic') format('svg');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Amiamie Amiamie';
    src: url('fonts/Amiamie-Black.eot');
    src: local('fonts/Amiamie Black'), local('fonts/Amiamie-Black'),
        url('fonts/Amiamie-Black.eot?#iefix') format('embedded-opentype'),
        url('fonts/Amiamie-Black.woff2') format('woff2'),
        url('fonts/Amiamie-Black.woff') format('woff'),
        url('vAmiamie-Black.ttf') format('truetype'),
        url('fonts/Amiamie-Black.svg#Amiamie-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Amiamie Amiamie-Round';
    src: url('fonts/Amiamie-BlackItalicRound.eot');
    src: local('fonts/Amiamie Black Italic Round'), local('fonts/Amiamie-BlackItalicRound'),
        url('fonts/Amiamie-BlackItalicRound.eot?#iefix') format('embedded-opentype'),
        url('fonts/Amiamie-BlackItalicRound.woff2') format('woff2'),
        url('fonts/Amiamie-BlackItalicRound.woff') format('woff'),
        url('fonts/Amiamie-BlackItalicRound.ttf') format('truetype'),
        url('fonts/Amiamie-BlackItalicRound.svg#Amiamie-BlackItalicRound') format('svg');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Amiamie Amiamie-Round';
    src: url('fonts/Amiamie-BlackRound.eot');
    src: local('fonts/Amiamie Black Round'), local('fonts/Amiamie-BlackRound'),
        url('fonts/Amiamie-BlackRound.eot?#iefix') format('embedded-opentype'),
        url('fonts/Amiamie-BlackRound.woff2') format('woff2'),
        url('fonts/Amiamie-BlackRound.woff') format('woff'),
        url('vAmiamie-BlackRound.ttf') format('truetype'),
        url('fonts/Amiamie-BlackRound.svg#Amiamie-BlackRound') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Amiamie Amiamie';
    src: url('fonts/Amiamie-Italic.eot');
    src: local('fonts/Amiamie Italic'), local('fonts/Amiamie-Italic'),
        url('fonts/Amiamie-Italic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Amiamie-Italic.woff2') format('woff2'),
        url('fonts/Amiamie-Italic.woff') format('woff'),
        url('fonts/Amiamie-Italic.ttf') format('truetype'),
        url('fonts/Amiamie-Italic.svg#Amiamie-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Amiamie Amiamie-Round';
    src: url('fonts/Amiamie-ItalicRound.eot');
    src: local('fonts/Amiamie Italic Round'), local('fonts/Amiamie-ItalicRound'),
        url('fonts/Amiamie-ItalicRound.eot?#iefix') format('embedded-opentype'),
        url('fonts/Amiamie-ItalicRound.woff2') format('woff2'),
        url('fonts/Amiamie-ItalicRound.woff') format('woff'),
        url('fonts/Amiamie-ItalicRound.ttf') format('truetype'),
        url('fonts/Amiamie-ItalicRound.svg#Amiamie-ItalicRound') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Amiamie';
    src: url('fonts/Amiamie-Light.eot');
    src: local('fonts/Amiamie Light'), local('fonts/Amiamie-Light'),
        url('fonts/Amiamie-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/Amiamie-Light.woff2') format('woff2'),
        url('fonts/Amiamie-Light.woff') format('woff'),
        url('fonts/Amiamie-Light.ttf') format('truetype'),
        url('fonts/Amiamie-Light.svg#Amiamie-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Amiamie Amiamie';
    src: url('fonts/Amiamie-LightItalic.eot');
    src: local('fonts/Amiamie Light Italic'), local('fonts/Amiamie-LightItalic'),
        url('fonts/Amiamie-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Amiamie-LightItalic.woff2') format('woff2'),
        url('fonts/Amiamie-LightItalic.woff') format('woff'),
        url('fonts/Amiamie-LightItalic.ttf') format('truetype'),
        url('vAmiamie-LightItalic.svg#Amiamie-LightItalic') format('svg');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Amiamie';
    src: url('fonts/Amiamie-Regular.eot');
    src: local('fonts/Amiamie Regular'), local('fonts/Amiamie-Regular'),
        url('fonts/Amiamie-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Amiamie-Regular.woff2') format('woff2'),
        url('fonts/Amiamie-Regular.woff') format('woff'),
        url('fonts/Amiamie-Regular.ttf') format('truetype'),
        url('fonts/Amiamie-Regular.svg#Amiamie-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Amiamie Round';
    src: url('fonts/Amiamie-RegularRound.eot');
    src: local('fonts/Amiamie Regular Round'), local('fonts/Amiamie-RegularRound'),
        url('fonts/Amiamie-RegularRound.eot?#iefix') format('embedded-opentype'),
        url('fonts/Amiamie-RegularRound.woff2') format('woff2'),
        url('fonts/Amiamie-RegularRound.woff') format('woff'),
        url('fonts/Amiamie-RegularRound.ttf') format('truetype'),
        url('fonts/Amiamie-RegularRound.svg#Amiamie-RegularRound') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



:root {
    --range: #ff7543;
    --rouge: #c8391b;
    --noircoffee: #412722;
    --blanc: #ffffff;
    --gris: #cbc7c4;
    --gris-colore: #999086;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; font-size: 1em; }

  body {
    background: var(--blanc);
    color: var(--noircoffee);
    font-family: 'Amiamie';
    font-weight: normal;
    font-style: normal;
    overflow-x: hidden;
  }
  
  img { max-width: 100%; }

  /* ── NAV ── */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(194,143,25,0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    height: 56px;
  }

  .nav-logo {
    font-size: 1.1rem;
    letter-spacing: 0.09em;
    color: var(--range);
    white-space: nowrap;
    text-align: center;
  }

  .nav-logo span {
    font-family: 'Amiamie';
    font-weight: normal;
    font-style: normal;
  }

  .nav-links {
    display: flex;
    gap: 0.15rem;
    list-style: none;
  }

  .nav-links a {
    display: block;
    padding: 0.4rem 0.4rem;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    /*text-transform: uppercase;*/
    color: var(--gris-colore);
    text-decoration: none;
    border: 1px solid transparent;
    transition: color 0.2s, border-color 0.2s;
  }

  .nav-links a:hover,
  .nav-links a.active {
    color: var(--rouge);
    /*border-color: rgba(217, 158, 18, 0.4);*/
  }

  .hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
  }
  .hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #ffc9a9;
    transition: all 0.3s;
  }

  /* ── MOBILE NAV ── */
  .mobile-menu {
    display: none;
    position: fixed;
    top: 56px; left: 0; right: 0;
    background: #c8391b;
    z-index: 99;
    padding: 1.5rem 2rem 2rem;
    border-bottom: 1px solid rgba(240,134,169,0.2);
  }
  .mobile-menu.open { display: block; }
  .mobile-menu a {
    display: block;
    padding: 0.8rem 0;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    /*text-transform: uppercase;*/
    color: #ffc9a9;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    transition: color 0.2s;
  }
  .mobile-menu a:hover { color: var(--gris-colore); }

  /* ── SECTIONS ── */
  section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }

  .label, .intention-tag, .objectifs-tag, .pistes-tag, .charte-tag, .affiches-tag, .web-tag, .insitu-tag {
    font-size: clamp(1.3rem, 1.227rem + 0.364vw, 1.5rem);
    letter-spacing: 0.03em;
    color: var(--range);
    margin-bottom: 3rem;
    text-align: center;
  }

  /* ── ENTÊTE ── */
  #entete {
    /*background: var(--blanc);*/
    background-image: url(img/fond.avif);
    background-repeat: no-repeat;
    background-size: 100%;
    object-fit: cover;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 40vh;
  }

  .entete-noms .desktop {
    font-family: 'Amiamie';
    font-weight: 300;
    font-style: normal;
    display: flex;
    gap: 1.5rem;
    margin-bottom: 3rem;
    font-size: clamp(0.9rem, 0.827rem + 0.364vw, 1.1rem);
    color: #ffc9a9;
    text-align: center;
  }
  .entete-noms .mobile{ display: none; }

  .entete-noms span {
    padding: 0px 10px 0px 10px;
  }

  .entete-titre, .concept-titre {
    font-family: 'Amiamie Amiamie';
    font-weight: 900;
    font-style: normal;
    font-size: clamp(3.8rem, 2.455rem + 6.727vw, 7.5rem);
    line-height: 0.88;
    letter-spacing: -0.01em;
    text-align: center;
  }

  .entete-titre .ligne1, .concept-titre .ligne1 { color: #612908; display: block; }
  .entete-titre .ligne2 { color: #d985c7; display: block; }

  .entete-scroll {
    position: absolute;
    bottom: 8rem;
    right: 8vw;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.55rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #ffc9a9;
    cursor: pointer;
    text-decoration: none;
  }
  .entete-scroll::after {
    content: '';
    display: block;
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, #ffc9a9, transparent);
    animation: scrollLine 1.6s ease-in-out infinite;
  }
  @keyframes scrollLine {
    0%,100% { opacity: 1; transform: scaleY(1); }
    50% { opacity: 0.3; transform: scaleY(0.5); }
  }

  /* ── INTENTION ── */
  #intention {
    background: var(--blanc);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .intention-text {
    max-width: 65vw;
    font-family: 'Amiamie';
    font-weight: 300;
    font-style: normal;
    font-size: clamp(0.875rem, 0.757rem + 0.591vw, 1.2rem);
    line-height: 1.35;
    color: var(--noircoffee);
    text-align: left;
  }

  p { padding: 0.5rem 0;}

  /* ── OBJECTIFS ── */
  #objectifs {
    width: 70vw;
    margin: 0 auto;
    background: var(--blanc);
  }

  .objectifs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    margin-top: 2rem;
  }

  .objectifs { display: contents; }
  .objectifs2 { display: none; }

  /* ── PISTES ── */
  #pistes {
    background: var(--blanc);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #pistes2 { height: 150px;}

  .pistes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    margin-top: 3rem;
    margin: 0 14rem;
  }

  .pistes-grid2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    margin-top: 3rem;
    margin: 0 14rem;
  }

  .pistes-card {
    max-width: 100%;
    padding: 2rem 2rem;
    text-align: center;
    transition: border-color 0.3s, transform 0.3s;
  }
  .pistes-card img { display: block; border: 1px dotted var(--gris-colore); }

  .pistes-name {
    font-family: 'Amiamie Amiamie';
    font-weight: normal;
    font-style: italic;
    font-size: clamp(1.05rem, 0.995rem + 0.273vw, 1.2rem);
    color: var(--gris-colore);
    margin-bottom: 0.3rem;
    margin: 0 auto;
  }

  .pistes-name2 {
    font-family: 'Amiamie Amiamie';
    font-weight: normal;
    font-style: italic;
    font-size: clamp(1.05rem, 0.995rem + 0.273vw, 1.2rem);
    color: var(--gris);
    padding-top: 2rem;
    margin-bottom: 0.3rem;
    margin: 0 auto;
  }

  /* ── CHARTE GRAPHIQUE ── */
  #charte {
    background: var(--blanc);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #charte2 { height: 150px;}

  .charte-grid {
    width: 70vw;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-top: 3rem;
    padding: 0 1rem;
    column-gap: 0rem;
    margin: 0 auto;
  }

  .charte-grid2 {
    width: 40vw;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    margin-top: 3rem;
    margin: 0 1rem;
    margin: 0 auto;
  }

  .charte-grid3 {
    width: 60vw;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    margin-top: 3rem;
    margin: 0 1rem;
    margin: 0 auto;
  }

  .charte-grid4 {
    width: 50vw;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    margin-top: 3rem;
    margin: 0 1rem;
    margin: 0 auto;
  }

  .charte-grid5 {
    width: 55vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    column-gap: 0.5rem;
    margin-top: 3rem;
    margin: 0 1rem;
    margin: 0 auto;
  }

  .charte-grid6 {
    width: 55vw;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    column-gap: 0.5rem;
    margin-top: 3rem;
    margin: 0 1rem;
    margin: 0 auto;
     margin-bottom: 7rem;
  }

  .charte-card,.charte-card2, .charte-card3, .charte-card4, .charte-card5, .charte-card6 {
    max-width: 100%;
    padding: 1rem 0rem;
    text-align: center;
    transition: border-color 0.3s, transform 0.3s;
  }

  .charte-name, .charte-name2, .charte-name3 {
    font-family: 'Amiamie Amiamie';
    font-weight: normal;
    font-style: italic;
    font-size: clamp(1.05rem, 0.995rem + 0.273vw, 1.2rem);
    color: var(--gris-colore);
    margin-bottom: 0.2rem;
    margin: 0 auto;
  }
  .charte-name2, .charte-name3 { margin-top: 2rem; }

  .charte-icon, .charte-icon5, .charte-icon6 {
    width: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.2rem;
  }

  .charte-icon2 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.2rem;
  }

  /* ── AFFICHES ── */
  #affiche {
    background: var(--blanc);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .affiches-grid {
    width: 70vw;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-top: 3rem;
    padding: 0 1rem;
    column-gap: 0.5rem;
    margin: 0 auto;
  }
  #affiches2 { height: 50px;}
  #affiches3 { height: 130px;}

  .affiches-desc {
    font-family: 'Amiamie';
    font-weight: normal;
    font-style: normal;
    font-size: 0.8rem;
    line-height: 1.5;
    padding: 0 2px;
    text-align: center;
    color: var(--gris);
  }
  
/* ── VIDÉO ── */
  .video-grid {
    width: 40vw;
    display: grid;
    grid-template-columns: 1fr;
    margin: 0 auto;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
  }

  .video-card-pastille {
    padding: 0.2rem 0.8rem;
    transition: background 0.3s, border-color 0.3s;
    position: relative;
    left: 17%;
  }
  .video-card-affiche {
    padding: 0.2rem 0.8rem;
    transition: background 0.3s, border-color 0.3s;
    position: relative;
    left: 12%;
  }

  .video-wrap-pastille {
    width: 50vw;
    overflow: hidden;
    animation: fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) both;
  }
  .video-wrap-affiche {
    width: 50vw;
    overflow: hidden;
    animation: fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) both;
    padding-top: 2rem;
  }

  @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
  }

  .pastille {
    width: 40%;
    display: block;
    aspect-ratio: 6 / 4;
    object-fit: cover;
  }
  .affiche {
    width: 50%;
    display: block;
    aspect-ratio: 7 / 9.8;
    object-fit: cover;
  }

  /* ── BANNIÈRES ── */
  #web {
    background: var(--blanc);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .web-flex {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 3rem;
    margin: 0 14rem;
  }

  .web-card {
    display: flex;
    max-width: 100%;
    padding: 0rem 1rem;
    text-align: center;
    transition: border-color 0.3s, transform 0.3s;
  }

  .web-icon {
    width: 40vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.2rem;
  }

  /* ── MISE EN SITUATION ── */
  #insitu {
    width: 90vw;
    display: grid;
    grid-template-columns: 1fr;
    margin: 0 auto;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
  }
  #insitu2 { height: 130px; }

  .insitu {
    width: 60vw;
    margin: 0 auto;
    margin-bottom: 1em;
  }

  .insitu-block {
    margin-bottom: 1.5rem;
    padding-bottom: 0.8rem;
  }

  /* ── FOOTER ── */
  #footer {
    background-image: url(img/merci.avif);
    background-repeat: no-repeat;
    background-size: cover;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 35vh;
  }

  /* ── SCROLL REVEAL ── */
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal.visible {
    opacity: 1;
    transform: none;
  }


  /* ── RESPONSIVE ── */
  @media (max-width: 768px) {
    section { padding: 1em; }
    nav { padding: 0 1.2rem; }
    .nav-links { display: none; }
    .hamburger { display: flex; }
    #entete { padding-bottom: 53vh; width: 100vw; margin: 0 auto; background-image: url(img/fond2.avif); background-repeat: no-repeat; background-size: 110%; }
    .entete-noms { gap: 0.5rem; flex-direction: column; align-items: center; padding-top: 5px; margin-bottom: 6rem; }
    .entete-noms .desktop { display: none; }
    .entete-noms .mobile{ display: flex; margin-bottom: 2.5rem; font-size: clamp(0.9rem, 0.827rem + 0.364vw, 1.1rem); line-height: 1; text-align: center; color: #ff7543; }
    .entete-titre .ligne1 { position: relative; right: 6px; color: #ffe2d1; padding-top: 40px; }
    .intention-text { max-width: 85vw; line-height: 1.2; }
    .intention-tag { margin-top: 2.5rem; margin-bottom: 1rem; }
    #objectifs { width: 90vw; }
    .objectifs { display: none; }
    .objectifs2 { display: contents; }
    .pistes-grid, .pistes-grid2 { grid-template-columns: 1fr; margin-top: 3rem; margin: 0 0.5rem; margin-bottom: 0.4rem; }
    #pistes2 { height: 112px;}
    .pistes-card { max-width: 80%; padding: 0.2rem 0.2rem; padding-bottom: 1.5rem;  } 
    .pistes-name { margin-bottom: 0.5rem; }
    .pistes-tag { margin-bottom: 1.4rem; }
    .charte-grid { grid-template-columns: 1fr; margin-top: 3rem; margin: 0 0.5rem; margin-bottom: 0.4rem; }
    #charte2 { height: 112px;}
    .charte-card { max-width: 70%; padding: 0.2rem 0.2rem; padding-bottom: 0.5rem; margin: 0 auto; } 
    .charte-name { margin-bottom: 0.5rem; }
    .charte-tag { margin-bottom: 1.4rem; }
    .charte-grid2 { width: 100%; margin-top: 0.2rem; }
    .charte-card2 { max-width: 80%; padding-top: 0.2rem; }
    .charte-grid3 { width: 95%; margin-top: 0.2rem; }
    .charte-card3 { max-width: 95%; padding-top: 0.2rem; }
    .charte-grid4 { width: 100%; margin-top: 0.2rem; }
    .charte-card4 { max-width: 85%; padding-top: 0.2rem; }
    .charte-grid5 { width: 100%; grid-template-columns: 1fr; margin-top: 0.2rem; }
    .charte-card5 { max-width: 100%; padding: 0.5rem 0.2rem; }
    .charte-card5 img { display: block; border: 1px dotted var(--gris-colore)}
    .charte-grid6 { width: 100%; grid-template-columns: 1fr; margin-top: 0.2rem; margin-bottom: 4rem; }
    .charte-card6 { max-width: 100%; padding: 0.5rem 0.2rem; }
    .charte-icon, .charte-icon5, .charte-icon6 { width: 80%; margin: 0 auto; }
    .affiches-grid { width: 90%; grid-template-columns: 1fr; padding-top: 3rem; }
    .affiches-card { max-width: 100%; padding: 0.5rem 0.2rem; }
    .affiches-desc { font-size: 0.85rem; }
    #affiche2 { height: 650px;}
    .video-grid { width: 95%; }
    .video-card-pastille { position: relative; left: 16.5%; }
    .video-card-affiche { position: relative; left: 4.7%; }
    .video-wrap-pastille { width: 95vw; }
    .video-wrap-affiche { width: 80vw; padding-top: 2rem; }
    .pastille { width: 50%; }
    .affiche { width: 91.5%; }
    .web-icon { width: 90vw; }
    .insitu { width: 90vw; margin-bottom: 0.2em; }
    #footer { background-size: contain; padding-bottom: 56vh; }
    .entete-noms { margin-bottom: 0.2rem; }
    
    
    
    
    /*.video-grid { width: 96vw; display: grid; grid-template-columns: 1fr; margin: 0 auto; margin-top: 0.2rem; margin-bottom: 2rem; position: relative; right: 3.2em; }
    .construction { width: 50%; display: block; aspect-ratio: 20 / 7.2; object-fit: cover; position: relative; left: 3em; }
    #triple { width: 100vw; }
    .label, .objectifs-tag, .cible-tag, .notions-tag, .concept-tag { margin-bottom: 4rem; }
    .anniv-tag { margin-top: 1rem; margin-bottom: 2rem; }
    .systeme-tag { margin-bottom: 1.4rem; }
    .triple-tag { margin-top: 4.5rem; margin-bottom: 2rem; }
    #concept3 { height: 60px;}
    
    .systeme-grid { grid-template-columns: 1fr; margin-top: 3rem; margin: 0 2rem; }
    #systeme3 { height: 130px;}
    .systeme-card { padding: 1rem 0rem; }
    .systeme-name { margin-bottom: 0.1rem; }
    .echantillon-box { width: 230px; height: 300px; margin-bottom: 0.4rem; }
    .echantillon-desc { line-height: 1.1; padding: 0 2px; }
    .trichromie { width: 80vw; margin-top: 2em; margin-bottom: 5em; }
    .typo-info { width: 96vw; line-height: 1.1; padding: 0 2px; margin-top: 2em; margin-bottom: 5em; }
    .typographie { width: 90vw; margin-top: 2em; margin-bottom: 2em; }
    .garamond-sentient { width: 80vw; margin-top: 2em; margin-bottom: 2em; }
    .pastille { width: 80vw; margin-bottom: 2em; }
    .tickets-grid { grid-template-columns: 1fr; margin-top: 3rem; margin: 0 2rem; }
    .tickets-card { width: 50vw; display: flex; justify-content: center; margin: 0 auto; padding: 0.3rem 0.5rem; text-align: center; }
    .tickets-mockup { width: 96vw; padding-right: 2.4rem; margin-bottom: 2em; }
    .supports-info { width: 96vw; line-height: 1.1; margin-top: 0.4em; margin-bottom: 3em; }
    .supports-list { grid-template-columns: 1fr; }
    #supports3 { height: 130px;}
    .affiche-grid { grid-template-columns: 1fr; margin-top: 3rem; margin: 0 1.3rem; }
    .affiche-card { width: 80vw; display: flex; justify-content: center; margin: 0 auto; padding: 0.4rem 0.7rem; text-align: center; }
    
    .affiche { width: 80%; display: block; aspect-ratio: 6 / 9; object-fit: cover; position: relative; left: 0.35em; }
    .pastille-mouvement { width: 80%; display: block; aspect-ratio: 5.1 / 3.2; object-fit: cover; margin: 0 auto; }
    #insitu3 { height: 130px; }

    .insitu-showcase { grid-template-columns: 1fr; }
    .colors-row { flex-direction: column; }*/
  }

  /* motif SVG inline */
  .motif-arc {
    width: 100%;
    height: 100%;
  }