.wrap{
    display: flex;
    flex-direction: column;
    width: var(--wrap-width);
    min-width: var(--wrap-min-width);
}

.full{
    display: flex;
    flex-direction: column;
    width: 90vw; 
    margin-top: 25px;
}

.hero-section-button{
    display: flex;
    flex-direction: var(--flex-direction-hero-section-button);
    gap: 30px;
    margin-block: 30px;
}

button.hero{
    width: 400px;
    max-width: 90vw;
}

.grid-bequille {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    width: 100%;
    height: auto;
}

.bequille {
    display: block;
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: 0.2s;
    z-index: 1;
}

.bequille--blue1  { color: var(--blue1); }
.bequille--orange { color: var(--orange); }
.bequille--blue2  { color: var(--blue2); }
.bequille--jaune  { color: var(--jaune); }
.bequille--vert   { color: var(--vert); }

.bequille:hover{
     transform: rotate(35deg);
}

/*.grid-bequille:has(.bequille:hover) .bequille:not(:hover) {
    transform: scale(0.9);
}*/



.title-h4{
    display: grid;
    grid-template-columns: var(--width-bequille) auto;
    align-items: center;
    margin-top: 60px;
    overflow: visible;
}




/* -- LA METHODE -- */

.methode {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;            /* Firefox */
}
.methode::-webkit-scrollbar { display: none; }

.methode-piste {
    display: flex;
    align-items: flex-start;
    width: max-content;               /* la piste prend la largeur de tout son contenu */
}

.etape {
    flex: none;
    display: flex;
    flex-direction: column;
}

/* Barre de titre : zone de drag */
.etape-tete {
    display: flex;
    align-items: center;
    height: var(--width-bequille);
    flex: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.etape h4 {
    margin-inline: 20px;
    white-space: nowrap;
}

.etape p,
.etape ul {
    width: 40rem;
    max-width: 80vw;
}
.etape a {text-decoration: underline;}
.etape p  { margin: 40px 20px 0; }
.etape ul { margin: 20px 20px 0; padding-left: 20px; }

/* Béquilles */
.barres {
    display: flex;
}
.barres svg {
    display: block;
    width: var(--width-bequille);
    height: var(--width-bequille);
    flex: none;
}

/* Cycle de couleurs : blue1, orange, blue2, jaune, vert */
.barres svg:nth-child(5n+1) { color: var(--blue1); }
.barres svg:nth-child(5n+2) { color: var(--orange); }
.barres svg:nth-child(5n+3) { color: var(--blue2); }
.barres svg:nth-child(5n+4) { color: var(--jaune); }
.barres svg:nth-child(5n+5) { color: var(--vert); }

/* Intro : jaune puis vert (doit rester après les règles ci-dessus) */
.barres--intro svg:nth-child(1) { color: var(--jaune); }
.barres--intro svg:nth-child(2) { color: var(--vert); }

/* Fondu de fin : dernière étape uniquement */
.etape:last-child .barres {
    -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 100%);
            mask-image: linear-gradient(to right, #000 0%, transparent 100%);
}

/* Curseur pendant le drag */
.methode.is-dragging,
.methode.is-dragging * { cursor: grabbing; }


.methode-points {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

/* Le bouton est la zone cliquable (fixe), le point est dessiné dans ::before */
.methode-points button {
    all: unset;                 /* neutralise ton style global de button */
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    cursor: pointer;
}

.methode-points button::before {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--black);
    opacity: 0.2;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.methode-points button.is-active::before {
    opacity: 1;
    transform: scale(1.4);
}

.methode-points button:focus-visible {
    outline: 2px solid var(--black);
    outline-offset: -4px;
    border-radius: 50%;
}


/* -- TST DE TITRE -- */
/*
section.title{
    padding-inline: 0;
    width: fit-content;
    height: auto;
    font-family: "BOURRASQUE EST";
    font-size: calc(var(--font-size) * 2);
    color: var(--black);
    transform: rotate(45deg);
}
    */


/* -- GRID COLONNE -- */

.col2{
    display: grid;
    grid-template-columns: var(--grid-template-column-col2);
    grid-template-rows: var(--grid-template-rows-col2);
    gap: var(--main-padding);
}

.col3{
    display: grid;
    grid-template-columns: var(--grid-template-column-col3);
    grid-template-rows: var(--grid-template-rows-col3);
    gap: var(--main-padding);
}


/* -- LOCALISATION -- */

.carte {
    width: 100%;
    border: var(--border) solid var(--black);
    z-index: 2;
}

.carte iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    /* Optionnel : carte en noir et blanc pour s'accorder à ta charte */
    /* filter: grayscale(1) contrast(1.1); */
}


/* -- LOGO SPIN -- */

        @keyframes logo-rotate {
            from { transform: translateX(30%) rotate(0deg); }
            to   { transform: translateX(30%) rotate(360deg); }
        }


.hero-logo{
    position: absolute;
    height: 130vh;
    width: 100vw;
    top: var(--top-hero-logo);
    padding-top: 50px;
    padding-bottom: 200px;
    overflow: hidden;
    display: var(--display-screen);
}

.hero-logo-spin {
  position: absolute;
  right: var(--right-hero-logo);
  width: var(--width-hero-logo);
  height: auto;
  transform: var(--transform-hero-spin-logo);
  animation: logo-rotate 30s linear infinite;
}

.localisation-logo{
    position: absolute;
    height: 130vh;
    width: 100vw;
    padding-bottom: 200px;
    margin-top: -30%;
    overflow: hidden;
    display: var(--display-screen);
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.localisation-logo-spin {
  position: relative;
  width: var(--width-hero-logo);
  height: auto;
  transform: var(--transform-hero-spin-logo);
  animation: logo-rotate 30s linear infinite;
}


/* -- QUI ? -- */

.PP {
    width: 100%;
    aspect-ratio: 4 / 5;
    border: var(--border) solid var(--black);
    z-index: 2;
}



/* -- FAQ -- */

.faq {
    width: 100%;
}

.faq-item {
    border-bottom: var(--border) solid var(--black);
}

.faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    cursor: pointer;
    list-style: none;                 /* retire la flèche native (Firefox) */
    font-family: "BOURRASQUE REG";
}
.faq-item summary::-webkit-details-marker { display: none; }  /* retire la flèche native (Safari/Chrome) */

/* Béquille qui remplace la flèche : "+" quand fermé, tourne à l'ouverture */
.faq-item summary::after {
    content: "";
    flex: none;
    width: 1em;
    height: 1em;
    background: currentColor;
    clip-path: polygon(0 0, 100% 100%, 100% 100%, 0 0, 0 0); /* fallback */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 314.1 314.1'%3E%3Cpath fill-rule='evenodd' d='M314.1,284.93l-29.39,29.18L0,29.39,29.18,0l284.93,284.93Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 314.1 314.1'%3E%3Cpath fill-rule='evenodd' d='M314.1,284.93l-29.39,29.18L0,29.39,29.18,0l284.93,284.93Z'/%3E%3C/svg%3E") center / contain no-repeat;
    clip-path: none;
    transition: transform 0.2s ease-in-out;
}

.faq-item[open] summary::after {
    transform: rotate(45deg);
}

.faq-item summary:hover { font-family: "BOURRASQUE EST"; }

.faq-item summary:focus-visible {
    outline: 2px solid var(--black);
    outline-offset: 4px;
}

.faq-contenu {
    padding: 0 0 20px;
    max-width: 40rem;
}
.faq-contenu p { margin: 0 0 12px; }
.faq-contenu p:last-child { margin-bottom: 0; }

/* Animation d'ouverture */
@keyframes faq-ouvre {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}