/* purement proportionnel */


@font-face {
  font-family: 'Poppins-Variable';
  src: url('res/fonts/Poppins-Variable.woff2') format('woff2'),
       url('res/fonts/Poppins-Variable.woff') format('woff'),
       url('res/fonts/Poppins-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "ChantalMedium";
  src: url('res/fonts/font.woff2') format('woff2'), 
  url('res/fonts/ChantalMedium/font.woff') format('woff');
}


:root {
  --color-bg1: #156434;
  --color-bg2: #0B5128;
  --color-bg3: #143520;
  --color-bg4: #08130F;
  --color-txt: #094624;
  --color-txt2: #0fea58;
  --color-txt3: var(--color-txt);
  --color-a: #1600cc;
  --color-bg-intro-start: #1d8046;
  --color-bg-intro-end: #17ba58;
}

/* thème hiver (marron), activé via ?alt dans l'URL - voir head de chaque page */
:root[data-theme="hiver"] {
  --color-bg1: #6D2A15;
  --color-bg2: #592110;
  --color-bg3: #411E13;
  --color-bg4: #130E0C;
  --color-txt: #481F12;
  --color-txt2: #FFAA00;
  --color-txt3: var(--color-txt);
  --color-bg-intro-start: #903315;
  --color-bg-intro-end: #CC690C;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, a, cite,
em, img, small, strong, sub, sup, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, figure, figcaption, footer,
header, hgroup, menu, nav, section, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}

::selection {
  background: #e0e0e0;
}

::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-txt);
}

::-webkit-scrollbar-thumb {
  background: var(--color-txt2);
}

html {
  font-family: "Poppins-Variable", serif;
  font-size: 0.694447vw;
  color: #000000;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
        scrollbar-gutter: stable;
}

body {
  position: relative;
  line-height: 1;
  background: #000;
  overflow-x: hidden;
}

.cta > p {
  display: block;
  font-family: "ChantalMedium";
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--color-a);
}

.cta > a {
  position: relative;
  display: inline-block;
  background: var(--color-a);
  border-radius: 99rem;
  color: white;
  text-decoration: none;
  padding: 0 2rem;
  overflow: hidden;
}

.cta > a:before {
  content: "";
  position: absolute;
  right: 100%;
  top: 0;
  bottom: 0%;
  width: 100%;
  height: 100%;
  background: url(res/imgs/fleche_droite_blanc.svg) no-repeat center center / 2rem auto;
  transition: transform 200ms ease;
}

.cta > a > span {
  display: block;
  padding-right: 3rem;
  margin: 0 auto;
  font-size: 1.4rem;
  line-height: 3rem;
  background: url(res/imgs/fleche_droite_blanc.svg) no-repeat center right  / 2rem auto;
  transition: transform 200ms ease;
}

.cta > a:hover > span {
  transform: translateX(300%)
}

.cta > a:hover:before {
  transform: translateX(100%)
}

.txt  p {
  font-size: 2.5rem;
  line-height: 1.2;
  color: var(--color-txt2);
}

.txt  p.designer, 
.txt  p.big {
  text-transform: uppercase;
  color: var(--color-txt);
}

#projet h1  {

   
    font-size: 4rem;
    text-transform: uppercase;
    line-height: 1;
    font-weight: 700;
    color: var(--color-txt2);
}

.nomenclature {
  position: absolute;
  bottom: 0.25rem;
  right: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
  padding-top: 4rem;
  padding-bottom: 0 !important
}

.nomenclature > p {
  flex: 0 0 calc(50% - 2rem);
}

.txt .nomenclature > p + p {
  margin-top: 0;
}

.nomenclature > p > strong {
  display: block;
    text-transform: uppercase;
  color: var(--color-txt);
}


#projet img  {

aspect-ratio: 16/9;
object: cover;
}

.txt h1  {

    display: block;
    font-family: "ChantalMedium";
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: var(--color-a);
}

.txt  p + p  {
  margin-top: calc(2.5rem * 1.2);
}



.right   {
  text-align: right;
}

.centered   {
  text-align: center;
}

.img-1   {
  aspect-ratio: 1;
  object-fit: cover;
}

.img-4   {
  aspect-ratio: 4/5;
  object-fit: cover;
}



.img-1080   {
  aspect-ratio: 1080/1350;
  object-fit: cover;
}

.ctas-1  {
  padding-right: 22rem;
  justify-content: space-between;
}

.ctas-1 > div + div {
  text-align: right;
}



main {
  position: relative;
  opacity: 0;
  z-index: 15000;
  width: 100vv;
}

main > section {
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
  padding: 8rem 0;
  min-height: 700px;
  align-content: center;
  overflow: hidden;
}


main > section > div {
  width: calc(100% - 16rem);
  margin: 0 auto;
}

main > section > div > div {
  width: calc(100% - 44rem);
  margin: 0 auto;
}

main > section > div > div.larger {
  width: calc(100% - 34rem);
}

main > section > div > div.smaller {
  width: calc(100% - 64rem);
}


.flex {
  display: flex;
  gap: 4rem;
}

.flex.cols-2 > div {
  flex: 0 0 calc(50% - 2rem);
}

.flex.cols-3 > div {
  flex: 0 0 calc(33.333% - 2.66666rem);
}

.flex.rows-2 {
  flex-direction: column;
  gap: 8rem;
}

.flex.rows-2.gap {
  gap: 12rem;
}

.flex.rows-2.sgap {
  gap: 4rem;
}

.flex.rows-2.xsgap {
  gap: 2rem;
}

.flex.rows-2.infinite {
  gap: 4rem;
}

.flex.rows-2.infinite > div + div {
    height: 50rvh;
    flex: 0 0 50vh;
    overflow: hidden;
}

.img-alone > img {
  display: block;
  width: 100%;
  height: auto;
}

.txt-and-scroll {
  position: relative;
}

.partenaires .txt-and-scroll > div {
  bottom: 2.5rem;
}

.txt-and-scroll > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-right: 2rem;
  overflow: auto;
}

.txt-and-scroll.right >div {
  padding-right: 0;

}

.txt-and-scroll.right .txt {
  padding-right: 0;
  padding-left: 2rem;
  direction: ltr;
}

.txt-and-scroll.right {
  direction: rtl;
}

.txt-and-scroll .txt {
  max-height: 9999rem;
}

.txt-and-scroll .txt > *:last-child {
  padding-bottom: 2rem;
}

.txt-and-link {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}

.txt {
  max-height: 37vw;
  overflow: hidden;
}

.txt p {
  font-size: 2.5rem;
  line-height: 3rem;
  letter-spacing: -0.025em;
}

.text  {
  height: 15rem;
  overflow: auto;
  direction: rtl;
}

.text > div {
  padding: 0 4rem;
  direction: ltr;
}

.vignette {
  position: relative;
  overflow: hidden;
  user-select: none;
}

.vignette img + .txt  {
  margin-top: 2rem;
}

.vignette img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}

.vignette:has(.cta > a:hover) > img {
  transform: scale(1.06);
}

.imgs-scroller > div > div > .flex {
  gap: 2rem;
}


.imgs-scroller-2.auto .vignette,
.imgs-scroller .vignette {
  width: 40rem;
  flex: 0 0 40rem;
}

.imgs-scroller-2.auto .vignette.x2,
.imgs-scroller .vignette.x2 {
  width: 60rem;
  flex: 0 0 60rem;
}

.imgs-scroller-2.auto .vignette.x1,
.imgs-scroller .vignette.x1 {
  width: 30rem;
  flex: 0 0 30rem;
}

.imgs-scroller-2.auto .vignette:last-child,
.imgs-scroller .vignette:last-child {
  margin-right: 4rem;
}

.imgs-scroller-2.auto .vignette > img ,
.imgs-scroller.auto .vignette > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#free > div > div > div > div:first-child {
  height: 50vh;
}

#free .vignette {
  width: initial;
  height: 100%;
  flex: 0 0 auto;
}

#free .vignette > img {
  width: auto;
  object-fit: initial;
}

.imgs-scroller.partenaires .vignette p {
  color: var(--color-a);
}

.imgs-scroller.etapes .vignette p {
  color: var(--color-txt2);
  font-size: 2rem;
}

.imgs-scroller.partenaires .vignette p span {
  display: block;
}


.imgs-scroller-2 .vignette {
  width: 29rem;
  flex: 0 0 29rem;
}

.overlay  {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.overlay > div > p  {
  font-size: 2rem;
  line-height: 1.2;
  color: var(--color-a);
  margin-bottom: 2rem;
}

.imgs-scroller > div > div {
  width: 100%;
  padding-left: 22rem;
}

.imgs-scroller .flex.cols-2 > div:first-child {
  flex: 0 0 29rem;
}

.imgs-scroller.etapes .flex.cols-2 > div:first-child {
  flex: 0 0 33rem;
}

.imgs-scroller .flex.cols-2 > div:first-child + div {
  flex: 0 0 81rem;
  width: 81rem;
}

.imgs-scroller.etapes .flex.cols-2 > div:first-child + div {
  flex: 0 0 78rem;
  width: 77rem;
}

.imgs-scroller .flex.cols-2 > div:first-child + div > div {
  display: flex;
  flex-wrap: nowrap;
  gap: 4rem;
  width: 100%;
  overflow: auto;
  padding-bottom: 2rem;
}

.imgs-scroller .flex.cols-2 > div:first-child + div > div > div {
  width: 40rem;
}

.imgs-scroller-2 > div > div {
  width: 100%;
  padding-left: 22rem;
}


.imgs-scroller-2 > div > div > div {
  width: calc(100% + 8rem);
}

.imgs-scroller-2 > div > div > div > div {
  display: flex;
  flex-wrap: nowrap;
  gap: 4rem;
  width: 100%;
  overflow: auto;
  padding-bottom: 2rem;
}


.imgs-scroller-2 > div > div > div > div.righted {
  justify-content: right;
  align-items: right;
}

.drag-scroll {
  cursor: grab;
}

.drag-scroll.dragging {
  cursor: grabbing;
}

.drag-scroll.dragging .vignette {
  pointer-events: none;
}

.imgs-scroller-2 > div > div > div > div > div {
  width: 29rem;
  flex: 0 0 29rem;
}

.chronologie  {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}

.chronologie > button  {
  position: relative;
  flex: 1;
  height: 0.5rem;
  padding: 0;
  border: 0;
  margin: 0;
  cursor: pointer;
  background: var(--color-txt);
}

.chronologie > button.current  {
  background: var(--color-txt2);
}

.chronologie > button > span  {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 2.5rem;
  color: var(--color-txt2);
  padding-bottom: 0.5rem;
  opacity: 0;
}

.chronologie > button.current > span  {
  opacity: 1;
}



  #infinite {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4rem;
    padding: 4rem;
    width: 100%;
  }

  /* Chaque colonne anime à sa propre vitesse / direction */
  .column {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    will-change: transform;
  }

  /* La piste contient les images en double pour une boucle continue */
.track {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  padding-bottom: 4rem;  /* ← simule le gap manquant à la jonction */
}

  .column-1 .track { animation: scrollUp 40s linear infinite; }
  .column-2 .track { animation: scrollUp 55s linear infinite; }
  .column-3 .track { animation: scrollUp 35s linear infinite; }
  .column-4 .track { animation: scrollUp 50s linear infinite; }

  @keyframes scrollUp {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
    /* -50% car le contenu est dupliqué : on remonte exactement d'une copie */
  }

  .item {
    width: 100%;
    overflow: hidden;
  }

  .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Hauteurs variées pour rythmer la grille */
  .h-s  { aspect-ratio: 4 / 5; }
  .h-m  { aspect-ratio: 3 / 4; }
  .h-l  { aspect-ratio: 2 / 3; }
  .h-xl { aspect-ratio: 1 / 2; }
  .h-sq { aspect-ratio: 1 / 1; }

.accordeon {
  height: 50vh;
    overflow: auto;
    padding-right: 4rem;
    scrollbar-gutter: stable;
  }
.accordeon-items { 
  border-top: 1px solid var(--color-txt);;;
  }
.accordeon-item > div:first-child {
  position: relative;
  font-size: 2.5rem;
  line-height: 5rem;
  letter-spacing: -0.025em;
  color: var(--color-txt);
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-txt);;
  padding-right: 3rem;
  cursor: pointer;
}

.ico-plus,
.ico-minus {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  width: 1.2rem;
  height: auto;
  transform: translateY(-50%);
}

.accordeon-item > div:first-child .ico-plus,
.accordeon-item > div:first-child .ico-minus {
  fill: var(--color-txt);
}

.accordeon-item > div:first-child .ico-plus,
.accordeon-item > div:first-child .ico-minus,
.accordeon-subitem .ico-plus {
  right: 1rem;
}

.accordeon-item .ico-minus {
  display: none;
}

.accordeon-item.active > div:first-child .ico-plus {
  display: none;
}

.accordeon-item.active > div:first-child .ico-minus {
  display: block;
}

.accordeon-subitems   {

  height: 0;
  overflow: hidden;
  transition: height 400ms ease;
}

.accordeon-subitem:first-child {
  padding-top: 2rem;
}

.accordeon-subitem:last-child {
  padding-bottom: 2rem;
}

.accordeon-text {
  padding: 2rem 4rem 2rem 0;
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--color-txt);
}

.accordeon-text p + p {
  margin-top: 1rem;
}

.accordeon-subitem > a {
  position: relative;
  display: block;
  font-size: 2.5rem;
  line-height: 5rem;
  letter-spacing: -0.025em;
  color: var(--color-txt);
  text-decoration: none;
  border-bottom: 1px solid var(--color-txt);
  padding-right: 22rem;
  transition: color 200ms ease;
}

.accordeon-subitem .subitem-voir {
  position: absolute;
  top: 50%;
  right: 3.6rem;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: normal;
  white-space: nowrap;
}

.accordeon-subitem .ico-plus {
  fill: var(--color-txt);
  transition: fill 200ms ease;
}

.accordeon-subitem .subitem-img {
  position: absolute;
  right: 14.5rem;
  top: 50%;
  width: 6rem;
  height: 8rem;
  object-fit: cover;
  transform: translateY(-50%) scale(0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease, transform 250ms ease;
}

.accordeon-subitem > a:hover {
  color: var(--color-a);
}

.accordeon-subitem > a:hover .ico-plus {
  fill: var(--color-a);
}

.accordeon-subitem > a:hover .subitem-img {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}



nav {
  position: fixed;
  z-index: 100000;
  top: 7rem;
  left: 0;
  width: 100%;
  padding: 0 8rem;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  
}

nav > a {
  position: relative;
  width: 7rem;
  height: auto;
  pointer-events: auto;
}

nav > a > svg {
  display: block;
  position: relative;
  width: 7rem;
  height: auto;
}

#nav-mark {
  margin-bottom: 1.3rem;
}

nav > div {
  position: relative  ;
  display: flex;
  justify-content: space-between;
  gap: 4rem;
 
}

nav > div > div > a {
  font-size: 1.1rem;
  text-decoration: none;
  color: var(--color-txt2);
  cursor:   pointer ;
  color: var(--color-txt2);
  background: linear-gradient(to right, var(--color-bg1) 50%, var(--color-txt2) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 150ms ease;
  pointer-events: auto;
}

nav > div > div > a:hover,
nav > div > div > a.actuel {
   background-position: 0 0;
}

#menu {
  position:   absolute     ;
  right:  0;
  top:  0;
  display:  none ;
  width:  11rem;
  height:   5.5rem;  
  text-decoration:  none;    
}

#menu > div {
  width:  11rem;
  height:   5.5rem;
  border-radius:  10rem ;
  padding-left:   2rem;
  background:  var(--color-bg1);
}

#menu  span {
  font-size:  1.4rem;
  line-height:  5.5rem;
  text-transform:   uppercase ;
  color:  white;
}

#menu > i {
position: absolute;
    top: 50%;
    right: 2rem;
    width: 1rem;
    height: 1rem;
    border-radius: 1rem;
    background: var(--color-bg3);
    margin-top: -0.5rem;
}

#menu2 {
  position:   absolute     ;
  right:  8rem;
  top:  7rem;

  width:  11rem;
  height:   5.5rem;
  text-decoration:  none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#mainmenu.open #menu2 {
  opacity: 1;
}

#menu2 > div {
  width:  11rem;
  height:   5.5rem;
  border-radius:  10rem ;
  padding-left:   2rem;
  background:  var(--color-bg1);
}

#menu2  span {
  font-size:  1.4rem;
  line-height:  5.5rem;
  text-transform:   uppercase ;
  color:  white;
}

#menu2 > i {
position: absolute;
    top: 50%;
    right: 2rem;
    width: 1rem;
    height: 1rem;
    border-radius: 1rem;
    background: var(--color-bg-intro-start);
    margin-top: -0.5rem;
}

#intro {
  position: fixed;
  z-index: 10000001;
  top: 50%;
  left: 50%;
  transform: translateY(100vh);
  text-align: center;
  pointer-events: none;
}

#intro-mark {
  display: block;
  width: 9rem;
  height: auto;
  margin: 0 auto 1.5rem;
}

#intro-nom {
  display: block;
  width: 9rem;
  height: auto;
  margin: 0 auto 2rem;
}

.lg-accent { fill: var(--color-txt2); }
.lg-mark   { fill: var(--color-txt); }
.lg-swirl  { fill: var(--color-txt3); }

#intro .cta-2 > p {
  margin-bottom: 0;
  font-family: "ChantalMedium";
  font-size: 2rem;
  color: var(--color-a);
}

#svg-clair,
#svg-moyen,
#svg-fonce,
#svg-noir {
  position: fixed;
  width: 400%;
  bottom: -10%;
  left: -1%;
  display: block;
  pointer-events: none;
}

#p-clair { fill: var(--color-bg1); }
#p-moyen { fill: var(--color-bg2); }
#p-fonce { fill: var(--color-bg3); }
#p-noir  { fill: var(--color-bg4); }

#svg-noir {
  width: 402%;
}

#svg-clair { z-index: 100;    }
#svg-moyen { z-index: 1000;   }
#svg-fonce { z-index: 10000;  }
#svg-noir  { z-index: 100000; }


form {
  position: relative;
  padding: 2rem 0;
}

form textarea {
  display:  block ;
  width:  100%;
  height:   12rem;
  background: var(--color-txt2);
  border-radius: 0;
  border:0;
  resize: none;
  padding: 0.5rem 3rem 0.5rem 0.5rem;
  box-sizing: border-box;
}

input:not([type="submit"]) {
    display:  block ;
  width:  100%;
  height:   4rem;
  line-height: 4rem;
  font-size: 2rem;
  background: var(--color-txt2);
  border-radius: 0;
  border:0;
  resize: none;
  padding: 0rem 3rem 0 0.5rem;
  box-sizing: border-box;
}

form input:focus,
form textarea:focus {
  outline: none;
}

form textarea::-webkit-scrollbar {

  background: var(--color-txt2);
}

form textarea::-webkit-scrollbar-thumb {
  background: var(--color-bg-intro-start);

}


form label {
  display: block;
  font-size: 2rem;
  height: 2rem;
  color: var(--color-txt2);
}

form > div:first-child {
  overflow: hidden;
  height: 2rem;
  margin-bottom: 0.5rem;
}

form > div > div {

  transition: transform 0.4s ease;
}

form > div + div {
  overflow: hidden;
}

form > div + div > div {
  display: flex;
  flex-wrap: nowrap;
  justify-content: left;
}

form > div + div > div > * {
  flex: 0 0 100%;
}

form input[type=text].erreur  {
    color: red;
}

form input[type=submit] {
  position: absolute;
  bottom: 11rem;
  right: 0.8rem;
  width: 2.1rem;
  height: 1.7rem;
  background: url('res/imgs/fleche_droite_noir.svg') no-repeat center / 100% auto;
  border: 0;
  cursor: pointer;
  transition: bottom 0.4s ease;
}

#down {
    position: fixed;
    z-index: 10000000;
    left: 50%;
    bottom: 0.5rem;
    display: block;
    text-align: center;
    text-decoration: none;
    transform: translateX(-50%);
}
#down > i {
    display: block;
    margin: 0 auto;
    width: 2.1rem;
    height: 1.7rem;
    vertical-align: middle;
    background: url(res/imgs/fleche_droite_bleu.svg) no-repeat;
    transform: rotate(90deg);
}

@keyframes down-arrow-bounce {
  0%   { transform: rotate(90deg) translateX(0); }
  30%  { transform: rotate(90deg) translateX(-0.4rem); }
  65%  { transform: rotate(90deg) translateX(0.2rem); }
  100% { transform: rotate(90deg) translateX(0); }
}

#down:hover > i {
  animation: down-arrow-bounce 0.45s ease;
}

nav, footer, main, #down, #mainmenu > svg + div > div  {
    opacity: 0;
}

footer {
  /* absolute (relatif à body, position:relative) plutôt que dans le flux :
     sinon il s'ajoutait en plus des 100vh de la dernière section au lieu
     d'être inclus dedans. Réduire la hauteur de la dernière section pour
     compenser cassait son centrage vertical (align-content:center) - ça
     n'a plus lieu d'être ici puisque le footer ne compte plus dans le flow. */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000000;
}

footer > div {
  width: calc(100% - 16rem);
  margin: 0 auto;
  padding: 4rem 0;
}

footer > div > div {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6rem;
}

footer a,
footer p {
  font-size: 1.1rem;
  color: var(--color-txt2);
  text-decoration: none;
}

/* même remplissage de couleur que les liens de la nav initiale, sauf réseaux sociaux */
footer a:not(.footer-social-link) {
  background: linear-gradient(to right, var(--color-bg1) 50%, var(--color-txt2) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 150ms ease;
}

footer a:not(.footer-social-link):hover {
  background-position: 0 0;
}

.footer-group {
  display: flex;
  align-items: flex-end;
  gap: 6rem;
}

.footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.footer-social-link {
  font-family: "ChantalMedium";
  transition: color 200ms ease;
}

.footer-social-link:hover {
  color: var(--color-a);
}

.footer-brand {
  position: absolute;
  left: 50%;
  bottom: -1rem;
  transform: translateX(-50%);
}

.footer-brand p {
  position: relative;
  display: inline-block;
  font-family: "ChantalMedium";
  font-size: 2rem;
  color: var(--color-a);
  padding-bottom: 1rem;
}

.footer-brand p::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1rem;
  height: 1.4rem;
  border-radius: 50%;
  border-top: 2px solid var(--color-a);
}

.date-bloc .date  {
font-size: 8rem;
    line-height: 1;
    font-weight: 100;
}

.date-bloc {
 margin-top: calc(2.5rem * 1.2);
}

.date-bloc:first-child {
 margin-top: 0
}


@media (min-aspect-ratio: 2 / 1) AND (min-width: 1000px){
  nav { 
    top: 4rem;
  }

  main > section > div > div {
      width: calc(100% - 50rem);
      margin: 0 auto;
  }

}

#mainmenu {
  position: fixed;
  inset: 0;
  /* doit rester au-dessus de TOUT quand ouvert (#down et #intro montent à
     10000000+, footer à 1000000 : on se cale au-dessus de la valeur la plus
     haute du site plutôt que de re-rustiner au cas par cas) */
  z-index: 20000000;
  pointer-events: none;
  overflow: hidden;
}

.menu-mnt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

#menu-mnt-1 { fill: var(--color-bg1); z-index: 1; }
#menu-mnt-2 { fill: var(--color-bg3); z-index: 2; }
#menu-mnt-3 { fill: var(--color-bg-intro-start); z-index: 3; }

#mainmenu > svg + div {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#mainmenu > svg + div > div {
  display: flex;
  flex-direction: column;
  width: calc(100vw - 80rem);
  border-top: 1px solid var(--color-txt);
}

#mainmenu > svg + div > div > div > a {
  position: relative;
  display: block;
  font-size: 2.5rem;
  line-height: 5rem;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-txt);
  border-bottom: 1px solid var(--color-txt);
  padding-right: 4rem;
  transition: color 200ms ease;
}

#mainmenu > svg + div > div > div > a .ico-plus {
  fill: var(--color-txt);
  transition: fill 200ms ease;
}

#mainmenu > svg + div > div > div > a:hover .ico-plus,
#mainmenu > svg + div > div > div > a.actuel .ico-plus {
  fill: var(--color-a);
}

#mainmenu > svg + div > div > div > a:hover,
#mainmenu > svg + div > div > div > a.actuel {
  color: var(--color-a);
}

/* visuel par entrée, révélé au hover comme dans l'accordéon */
.menu-link-img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14rem;
  height: 18rem;
  object-fit: cover;
  transform: translateY(-50%) scale(0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease, transform 250ms ease;
}

#mainmenu > svg + div > div > div > a:hover .menu-link-img {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* logo en haut à gauche du menu, repris de la nav.
   pas de pointer-events:auto ici : #mainmenu est pointer-events:none par
   défaut et le JS le repasse à auto seulement à l'ouverture (cf #menu2 qui
   suit déjà ce pattern) - le mettre en dur ici le rendait cliquable/hover-
   actif en permanence, y compris menu fermé, ce qui bloquait le vrai footer
   juste en dessous (#mainmenu fixed couvre tout l'écran en continu) */
.menu-logo {
  position: absolute;
  top: 7rem;
  left: 8rem;
  z-index: 4;
  width: 7rem;
  height: auto;
  opacity: 0;
}

.menu-logo svg {
  display: block;
  width: 7rem;
  height: auto;
}

.menu-logo #menu-logo-mark {
  margin-bottom: 1.3rem;
}

/* footer du menu : exactement le même footer que celui du site (mêmes
   classes, donc même CSS/layout), on masque juste les parties qu'on ne veut
   pas afficher via visibility:hidden (garde leur place dans le flex pour que
   .footer-brand et .footer-social restent exactement à la même position que
   sur le vrai footer). Seuls position/z-index sont ré-ajustés car .menu-footer
   vit dans #mainmenu (overlay fixed) et non dans le flux normal.
   Pas de pointer-events:auto (même raison que .menu-logo ci-dessus) : ça
   bloquait le vrai footer, situé pile dans la même zone bas-d'écran. */
.menu-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4rem;
  z-index: 4;
}

.menu-footer .footer-group:first-child,
.menu-footer .footer-group:last-child > div:last-child {
  visibility: hidden;
}

/* agenceur et suivez-nous apparaissent séparément dans la séquence d'ouverture */
.menu-footer .footer-brand,
.menu-footer .footer-social {
  opacity: 0;
}

#menu2 {
  z-index: 5;
}



@media (min-aspect-ratio: 1.9 / 1) AND (min-width: 1000px){
  #svg-clair,
  #svg-moyen,
  #svg-fonce,
  #svg-noir {
    bottom: -20%;
  }
}

@media (min-aspect-ratio: 2 / 1) AND (min-width: 1000px){
  #svg-clair,
  #svg-moyen,
  #svg-fonce,
  #svg-noir {
    bottom: -25%;
  }
}

@media (min-aspect-ratio: 2.5 / 1) AND (min-width: 1000px){
  #svg-clair,
  #svg-moyen,
  #svg-fonce,
  #svg-noir {
    bottom: -40%;
  }
}

/* =============================================
   MOBILE (<= 1000px)
   ============================================= */
@media (max-width: 1000px) {

  html {
    font-size: clamp(6.5px, 1.9vw, 9.5px);
  }

  /* fond fixe : plus de collines/parallax sur mobile (JS d'intro/parallax
     court-circuité, cf main.js), donc une couleur de fond statique, alignée
     sur le vert dominant du menu plein écran (dernière colline, la plus visible) */
  body {
    background: var(--color-bg-intro-start);
  }

  #intro,
  #svg-clair,
  #svg-moyen,
  #svg-fonce,
  #svg-noir,
  #down {
    display: none !important;
  }

  /* anim-x/anim-y (reveal au scroll) inutiles sur mobile : le stylesheet
     !important annule en continu le transform inline posé par le scrub GSAP */
  .anim-x,
  .anim-y {
    transform: none !important;
  }

  main > section {
    height: auto;
    min-height: 0;
    padding: 4rem 0;
    overflow: visible;
  }

  main > section + section {
    margin-top: 8rem;
  }

  main > section > div {
    width: calc(100% - 8rem);
  }

  main > section > div > div,
  main > section > div > div.larger,
  main > section > div > div.smaller {
    width: 100%;
  }

  .flex {
    flex-wrap: wrap;
    gap: 4rem;
    min-width: 0;
  }

  .flex > * {
    min-width: 0;
  }

  /* colonnes empilées : le stretch de align-items ne suffit pas à contraindre
     la largeur quand un descendant (galerie interne) a un contenu très large,
     donc on force une largeur explicite plutôt que de compter sur le stretch */
  .flex.cols-2,
  .flex.cols-3 {
    flex-direction: column;
    width: 100%;
  }

  .flex.cols-2 > div,
  .flex.cols-3 > div {
    width: 100%;
  }

  /* le texte doit toujours passer avant l'image, quel que soit l'ordre DOM
     desktop (certaines sections ont l'image en premier) */
  .flex.cols-2 > .img-alone {
    order: 2;
  }

  .flex.cols-2 > .txt-and-link,
  .flex.cols-2 > .txt-and-scroll {
    order: 1;
  }

  /* les alignements/directions hérités de la colonne desktop de droite n'ont
     plus de sens une fois empilé */
  .right {
    text-align: left;
  }

  .txt-and-scroll,
  .txt-and-scroll.right {
    direction: ltr;
  }

  .txt-and-scroll > div {
    position: static;
    padding: 0;
    overflow: visible;
  }

  .txt-and-scroll.right .txt {
    padding-left: 0;
  }

  .chronologie {
    display: none;
  }

  /* même astuce rtl+scroll interne que .txt-and-scroll, utilisée dans
     .flex.rows-2.infinite : on la libère pareil sur mobile */
  .text {
    height: auto;
    overflow: visible;
    direction: ltr;
  }

  .text > div {
    padding: 0;
    direction: ltr;
  }

  /* height:50vh forcé n'a plus de sens empilé : la liste doit juste occuper
     sa propre hauteur, sans scroll interne */
  .accordeon {
    height: auto;
    overflow: visible;
    padding-right: 0;
  }

  .txt {
    max-height: none;
  }

  /* nav ne reste plus fixed (seul le bouton menu doit l'être) : elle défile
     avec la page, le logo n'est donc plus jamais par-dessus le contenu */
  nav {
    position: static;
    padding: 4rem;
  }

  nav > div > div {
    display: none;
  }

  /* bouton menu fixé indépendamment de nav, aligné sur le même padding.
     z-index repris de l'ancien nav (100000) : assez haut pour rester visible,
     mais sous #mainmenu (900000) pour que Fermer passe bien par-dessus au clic.
     Fond identique à #menu2 (Fermer) ; le fond du site utilise désormais un
     autre vert (--color-bg-intro-start) donc le contraste reste assuré */
  #menu {
    position: fixed;
    display: block;
    top: 4rem;
    right: 4rem;
    z-index: 100000;
    pointer-events: auto;
  }

  #menu > div {
    background: var(--color-bg1);
  }

  #menu2 {
    top: 4rem;
    right: 4rem;
  }

  #mainmenu > svg + div > div {
    width: calc(100% - 8rem);
  }

  /* aligné sur la même position que le logo nav/#menu en mobile */
  .menu-logo {
    top: 4rem;
    left: 4rem;
  }

  /* pas de hover au tactile : l'aperçu image ne sert à rien, comme pour
     l'accordéon */
  .menu-link-img {
    display: none;
  }

  #mainmenu > svg + div > div > div > a {
    padding-right: 3rem;
  }

  .menu-footer {
    bottom: 3rem;
  }

  /* les deux CTA restent sur la même ligne (ex: sous "promouvoir la qualité
     architecturale") */
  .ctas-1 {
    padding-right: 0;
  }

  .imgs-scroller > div > div,
  .imgs-scroller-2 > div > div {
    padding-left: 0;
  }

  .imgs-scroller .flex.cols-2 > div:first-child,
  .imgs-scroller .flex.cols-2 > div:first-child + div,
  .imgs-scroller.etapes .flex.cols-2 > div:first-child,
  .imgs-scroller.etapes .flex.cols-2 > div:first-child + div {
    flex: 0 1 auto;
    width: 100%;
  }

  /* accordéon (metier/contact/projets) : le hover n'existe pas au tactile,
     donc l'aperçu image ne sert plus à rien et n'a plus besoin de sa place
     réservée ; "voir le projet" + le plus suffisent */
  .accordeon-subitem .subitem-img {
    display: none;
  }

  .accordeon-subitem > a {
    padding-right: 9rem;
  }

  .accordeon-subitem .subitem-voir {
    right: 3rem;
  }

  /* mur d'images décoratif (metier.html) : 4 colonnes ne rentrent pas */
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    padding: 2rem;
  }

  footer > div {
    width: calc(100% - 8rem);
  }

  footer > div > div {
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
  }

  .footer-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .footer-brand {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
  }

}