:root {
    --light-pine:#1A3F2E;
    --pine:#1B3A2F;
    --pine-deep:#122720;
    --snow:#FAF9F5;
    --birch:#F1EAD9;
    --berry:#C4432B;
    --berry-dark:#8f2f1e;
    --gold:#C9A15A;
    --ink:#14231C;
    --ink-soft:#4A5B52;
    interpolate-size: allow-keywords;
}

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

html {
    scroll-behavior:smooth;
}

/* =========================================
   BREAKPOINTS RESPONSIVE 
========================================= */

/* Mobile par défaut : 0px à 480px */
/* Pas de media query nécessaire */

body {
    font-family:'Inter', sans-serif;
    background:var(--snow);
    color:var(--ink);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}

h1,h2,h3 {
    font-family:'Fraunces', serif;
    font-weight:500;
    color:var(--pine-deep);
}

a {
    color:inherit; 
    text-decoration:none;
}
  
img,svg{display:block;}

/* ---------- HEADER ---------- */

header {
    display:flex; 
    justify-content:space-between; 
    align-items:center;
    padding:28px 6%; 
    position:relative; 
    z-index:20;
}

.logo {
    font-family:'Fraunces', serif; 
    font-weight:600; 
    font-size:24px;
    letter-spacing:-0.01em; 
    color:var(--pine-deep);
}

.logo span{color:var(--berry);}

nav a {
    font-size:15px; 
    color:var(--ink-soft); 
    margin-left:32px;
    position:relative; 
    padding-bottom:4px;
}
  
nav a::after {
    content:""; 
    position:absolute; 
    left:0; 
    bottom:0; 
    width:100%;
    height:1px;
    background:var(--berry); 
    transform:scaleX(0); 
    transform-origin:left;
    transition:transform .5s ease;
}
  
nav a:hover::after{transform:scaleX(1);}

nav a:hover{color:var(--pine-deep);}

.burger {
    display:none;
    width:40px; 
    height:40px; 
    border-radius:100px;
    border:1px solid #E3DFD4; 
    background:var(--snow);
    align-items:center; 
    justify-content:center; 
    cursor:pointer;
}

.burger .bar {
    width:16px; 
    height:1.5px; 
    background:var(--pine-deep);
    position:relative; 
    transition:transform .2s ease, opacity .2s ease;
}

.burger .bar::before,.burger .bar::after {
    content:""; 
    position:absolute; 
    left:0; 
    width:16px; 
    height:1.5px;
    background:var(--pine-deep); 
    transition:transform .2s ease;
}

.burger .bar::before {top:-5px;}

.burger .bar::after {top:5px;}

header.open .burger .bar {background:transparent;}

header.open .burger .bar::before {transform:translateY(5px) rotate(45deg);}

header.open .burger .bar::after {transform:translateY(-5px) rotate(-45deg);}

nav {
    display:none;
}

.burger {
    display:flex;
}

.burger:focus-visible {
    outline: 2px solid var(--berry);
    outline-offset: 2px;
}

.mobile-nav {
    position: absolute; 
    top: 100%; 
    left: 0; 
    right: 0;
    background: var(--snow); 
    border-radius: 0 0 20px 20px;
    box-shadow: 0 20px 40px -20px rgba(20,35,28,0.25);
    padding: 8px 6% 20px;
    display: none; /* Par défaut caché */
    flex-direction: column;
}

header.open .mobile-nav {
    display: flex; 
}

body.home-page .mobile-nav {
    display: flex; 
    max-height: 0; 
    overflow: hidden; 
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease visibility 0s linear 0.25s;
}

body.home-page header.open .mobile-nav {
    max-height: 260px;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.25s ease, opacity 0.2s ease visibility 0s;
}

.mobile-nav a{
    font-size:15px; 
    color:var(--ink-soft); 
    padding:14px 0;
    border-bottom:1px solid #EFEBE0;
}

.mobile-nav a:last-child{border-bottom:none;}


 /* ---------- HERO ---------- */

.hero {
    height:500px;
    position:relative;
    background:var(--pine);
    color:var(--birch);
    padding:70px 6% 170px;
    overflow:hidden;
}

.hero-inner {
    display:grid; 
    grid-template-columns:1fr; 
    gap:40px;
    align-items:center;
    max-width:1140px; 
    margin:0 auto;
    position:relative; 
    z-index:2;
}
  
.hero h1 {
    font-size:32px; 
    line-height:1.08; 
    color:var(--snow);
    max-width:560px; 
}
  
.hero h1 em {
    font-style:italic; 
    color:var(--gold);
}
  
.hero p {
    margin-top:20px; 
    font-size:14px; 
    color:#D7DFD9; 
    max-width:440px;
}
  
.hero-ctas {
    margin-top:25px; 
    display:flex; 
    gap:14px;
}
  
.btn {
    display:inline-flex; 
    align-items:center; gap:8px;
    padding:12px 20px; 
    border-radius:100px;
    font-size:15px; 
    font-weight:500;
    cursor:pointer; 
    transition:transform .15s ease;
}
  
.btn:hover {transform:translateY(-1px);}
  
.btn-primary {
    background:var(--berry); 
    color:var(--snow);
}
 
/* HERO SCENE */
  
.scene {
    position:relative; 
    height:220px;
}
  
.hero > svg:first-of-type {
    position:absolute; 
    inset:0; 
    width:100%; 
    height:100%;
    z-index:1; 
    pointer-events:none;
}
  
.hero > svg:first-of-type image.snow {
    width:100%; 
    height:100%;
}
 
  
.scene svg {
    width:100%; 
    height:100%; 
    overflow:visible;
}
  
.moon {fill:var(--gold);}
  
.moon-mask {fill:var(--light-pine);}
  
.star {
    fill:var(--birch); 
    animation:twinkle 3.2s ease-in-out infinite;
}
  
@keyframes twinkle {
    0%,100% {opacity:.25;}
    50%{opacity:.9;}
}

.moon {
    position:absolute;
    left:88%;
    top:-25%;
    width:35px;
    height:35px;
    border-radius:50%;
    background:var(--gold);
    z-index:1;
}
 
.moon-mask {
    position:absolute;
    left:86%;
    top:-26%;
    width:35px;
    height:35px;
    border-radius:50%;
    background:var(--light-pine);
    z-index:1;
}

.santa {
    position:absolute; 
    left:52%;
    top:-40%;
    width:300px;
    max-width:40%;
    height:auto;
    z-index:2; 
    pointer-events:none;
}
 
.snowfall {
    position:absolute; inset:0; z-index:1; pointer-events:none;
}
  
.flake {
    position:absolute; 
    top:-10px; 
    background:rgba(250,249,245,0.7);
    border-radius:50%; 
    animation:fall linear infinite;
}
  
@keyframes fall {
    to {
        transform:translateY(360px);
    }
}

/* ---------- QUATRE ETAPES ---------- */
  
.trail {
    max-width:1240px; 
    margin:96px auto; 
    padding:0 5%;
}
  
.trail-head {
    display:flex; 
    justify-content:space-between; 
    align-items:flex-end;
    margin-bottom:56px; 
    gap:24px; 
    flex-wrap:wrap;
}
  
.trail-head h2 {
    font-size:34px; 
    max-width:650px;
}

.trail-head p {
    color:var(--ink-soft); 
    max-width:340px; 
    font-size:15px;
}

.path {
    position:relative;
    display:grid; 
    grid-template-columns:1fr; 
    gap:40px;
}

.path::before{display:none;}
  
  
  .step {
    position:relative; 
    z-index:1;
}
  
.step-dot {
    width:52px; 
    height:52px; 
    border-radius:50%;
    background:var(--birch); 
    border:2px solid var(--berry);
    display:flex; 
    align-items:center; 
    justify-content:center;
    font-family:'Fraunces', serif; 
    font-weight:600; 
    color:var(--berry);
    margin-bottom:10px;
}
  
.step h3 {
    font-size:19px; 
    margin-bottom:8px;
}

.step p {
    font-size:14.5px; 
    color:var(--ink-soft);
}

/* ---------- FORM  ---------- */
  
.radio-switch {
    position: relative;
    display: flex;
    margin: 0 auto 40px;
    max-width: 450px;
    width: 100%;
    height: 60px;
    background: var(--berry);
    border-radius: 100px;
    padding: 5px 15px;
    box-sizing: border-box;
}

.radio-switch input {
  display: none;
}

.radio-switch label {
  position: relative;
  z-index: 2; /* Positionné au-dessus du slider blanc */
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  border-radius: 100px;
  color: white;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.4s ease;
}

/* Changement de couleur du texte actif */
.radio-switch input:checked + label {
  color: var(--berry);
  animation: radio-toggle-bounce 0.4s ease-out;
}

@keyframes radio-toggle-bounce {
    0%, 100% { transform:scale(1); }
    45% { transform:scale(1.20); }
    75% { transform:scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
    .radio-switch input:checked + label {
        transition:none;
        animation:none;
    }
}

/* L'élément slider blanc qui glisse */
.radio-switch .slider {
    position: absolute;
    top: 7px;
    left: 12px;
    /* Largeur exacte d'une option = (100% - padding_gauche - padding_droite) / 2 */
    width: calc((100% - 24px) / 2);
    height: calc(100% - 14px);
    background: #ffffff;
    border-radius: 100px;
    z-index: 1; /* Derrière les labels */
    box-shadow: 0 8px 20px rgba(37, 37, 37, 0.12);
    /* Animation fluide */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

 /* Déplacement du slider selon le bouton sélectionné */
#tirageDistanciel:checked ~ .slider {
    transform: translateX(0%);
}

#tirageLive:checked ~ .slider {
    transform: translateX(100%);
}

.radio-switch.is-disabled {
    filter:grayscale(1);
    opacity:0.5;
}

.radio-switch.is-disabled label {
    cursor:not-allowed;
}
  
.form-section {
    background:var(--birch);
    border-radius:32px;
    max-width:1320px; 
    margin:0 6% 96px; 
    padding:64px 6%;
}
  
@media(min-width:1400px) {
    .form-section{margin:0 auto 96px;}
}
  
.form-wrap {
    display:flex; 
    flex-direction:column; 
    align-items:center;
    gap:36px; 
    text-align:center;
    max-width:1000px; 
    margin:0 auto;
    grid-template-columns:1fr;
}
  
.form-copy h2 {
    font-size:30px; 
    margin-bottom:16px;
}

.form-copy p {
    color:var(--ink-soft); 
    font-size:15px; 
    max-width:380px; 
    margin:0 auto;
}

.card {
    width:100%; 
    max-width:840px; 
    text-align:left;
}

.progress-track {
    display:flex; 
    gap:6px; 
    margin:28px auto 0; 
    max-width:280px;
}
  
.progress-track span {
    height:4px; 
    flex:1; 
    border-radius:4px; 
    background:#E2D6BC;
}
  
.progress-track span.done {background:var(--berry);}

.card {
    background:var(--snow); 
    border-radius:20px; 
    padding:44px 48px;
    box-shadow:0 24px 48px -24px rgba(20,35,28,0.25);
    position:relative;
}
  
.etape {
    font-size:13px; 
    color:var(--berry); 
    font-weight:500; 
    margin-bottom:6px;
}

.card h3 {
    font-size:22px; 
    margin-bottom:28px;
}
  
.participant-row {
    display:grid; 
    grid-template-columns:1fr; 
    gap:15px;
    padding-top:10px;
    padding-bottom:20px; 
    border-bottom:1px solid #E4DDCB;
}

#form-section.live-draw .participant-email-field {
    display:none;
}
  
.participant-list .participant-row:last-child {
    border-bottom:none; 
    margin-bottom:0; 
    padding-bottom:0;
}
  
.field {margin-bottom:0;}

.field.no-label {padding-top:10px;}

.field label {
    font-size:13px; 
    color:var(--ink-soft); 
    display:block; 
    margin-bottom:4px;}

.field input, .field select {
    width:100%; 
    padding:13px 16px; 
    border-radius:10px;
    border:1px solid #E3DFD4; 
    font-family:'Inter'; 
    font-size:15px;
    background:#FDFCFA; 
    color:var(--ink);
}

.exclusion-field {
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    border-radius:10px;
}

.exclusion-tags {
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:flex-start;
    gap:6px;
    margin-bottom:8px;
    width:100%;
}
.exclusion-tag {
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:#E4DDCB;
    color:var(--ink);
    font-size:13px;
    padding:4px 8px;
    border-radius:6px;
}

.exclusion-tag button {
    background:none;
    border:none;
    cursor:pointer;
    color:var(--ink-soft);
    font-size:14px;
    line-height:1;
    padding:0;
}

.exclusion-tag button:hover {
    color:var(--berry);
}

.exclusion-picker {
    flex:1;
    min-width:120px;
    border:none;
    background:transparent;
    font-family:'Inter';
    font-size:14px;
    color:var(--ink-soft);
}

.exclusion-picker:focus {
    outline:none;
}
  
.card .btn-primary {
    justify-content:center; 
    margin-top:24px;
}

.card .btn-add {
    display:flex; 
    justify-content:center;
    width:100%; 
    margin-left:auto; 
    margin-right:auto;
}

/* ---------- FORM WIZARD  ---------- */

.step-panel {
    display:none;
}

.step-panel.active {
    display:block;
}

.retour {
    position:absolute;
    top:38px;
    right:32px;
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid #d8d4ca;
    background:var(--snow);
    color:var(--ink-soft);
    font-size:18px;
    line-height:1.1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .15s ease, color .15s ease;
    visibility:hidden;
}

.retour:hover {
    background:var(--birch);
    color:var(--ink);
}

#group-name-title {
    margin-top:1rem;
    font-family:'Fraunces', serif;
    font-weight:500;
    color:var(--gold);
    font-size:28px;
}

#budget-title {
    margin-top:1rem;
    font-family:'Fraunces', serif;
    font-weight:500;
    color:var(--gold);
    font-size:28px;
}

#budget-title:not(:empty) {
    display:inline-flex;
    align-items:center;
    background:var(--birch);
    min-width: 3em;
    height:auto;
    padding:3px 13px;
    border-radius:100px;
    font-size:16px;
    text-align:center;
}

.recap-info  {
    display:flex;
    flex-direction:row;
    gap:0.5rem;
}

.recap-info h3:empty {
    display:none;
}

#budgetSuggestions {
    font-family: inherit;
    display: flex;
    gap: 0.5rem;
    margin: 0.5rem 0 0.75rem;
}

.suggestion-budget {
    border: none;
    background-color: #dfdedd;
    color: #333;
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.remove-participant {
    margin-top:4px;
    background:none;
    border:none;
    cursor:pointer;
    font-size:14px;
    color:var(--berry);
    padding:3px 9px;
    border-radius:8px;
    transition:background .15s ease, color .15s ease;
}

.remove-icon {
    font-size:18px;
    vertical-align:baseline;
}

.remove-participant:hover {
    background:#F3E5E0;
    color:var(--berry);
}

.card .step-next {
    display:flex;
    width:50%;
    justify-content:center;
    margin:24px auto 0;
}

.participant-actions {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;
    margin-top:18px;
}

.import-excel {
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    gap:2px;
    margin-top:16px;
}

.btn-import {
    background:transparent;
    color:var(--pine);
    border:1px solid var(--pine);
    width:100%;
    justify-content:center;
}

.btn-import:hover {
    background:var(--birch);
}

.import-link {
    font-style:italic;
    font-size:14px;
    color:var(--pine);
    text-decoration:underline;
    opacity:0.8;
}

#launch-draw {
    width:100%;
    justify-content:center;
    margin-top:24px;
}

#launch-draw:disabled,
#launch-draw[disabled] {
    opacity:0.6;
    cursor:not-allowed;
    pointer-events:none;
}

#confirm-cancel-btn {
    border: none;
    background:#e5e6e6;
    font-family:'Inter', sans-serif;
}

#confirm-send-btn {
    border: none;
    font-family:'Inter', sans-serif;
}

/* ---------- FAQ ---------- */

.faq {
    max-width: 1200px;
    margin: 0 auto 96px;
    padding: 0 7%;
}

.faq h2 {
    font-size: 30px;
    margin-bottom: 35px;
    text-align: center;
}

.faq-item {
    border-bottom: 1px solid #E4DDCB;
    padding: 18px 0;
}

.faq-item summary {
    cursor: pointer;
    font-weight: 500;
    list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: "+";
    float: right;
    color: var(--berry);
    transition: transform 0.3s ease;
}

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

.faq-item[open] p {
    animation: faq-open 0.35s ease;
}

@keyframes faq-open {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.faq-item p {
    margin-top: 12px;
    color: var(--ink-soft);
    font-size: 15px;
}

.faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.35s ease, content-visibility 0.35s ease allow-discrete;
}

.faq-item[open]::details-content {
    block-size: auto;
}

@media (prefers-reduced-motion: reduce) {
    .faq-item[open] p { animation: none; }
    .faq-item summary::after { transition: none; }
    .faq-item::details-content { transition: none; }
}


/* ---------- FOOTER ---------- */
  
footer {
    background:var(--pine-deep); 
    color:#B9C6BE;
    padding:56px 6% 36px; 
    margin:0 auto;
}
  
.footer-top {
    display:flex; 
    justify-content:space-between; 
    align-items:flex-start;
    flex-wrap:wrap; 
    gap:24px; 
    margin-bottom:40px;
}
  
.footer-top .logo {
    color:var(--snow);
}

.footer-links {
    display:flex;
    gap:28px; 
    font-size:14px;
}

.footer-links a:hover {
    color:var(--snow);
}

.footer-rule {
    height:1px; 
    background:rgba(185,198,190,0.15); 
    margin-bottom:20px;
}

.footer-bottom {
    display:flex; 
    justify-content:space-between; 
    font-size:12.5px; 
    color:#7E8F86;
    flex-wrap:wrap; 
    gap:10px;
}

/*----------- POP UP -----------*/

.popUp {
    position:fixed;
    inset:0;
    background:rgba(18, 39, 32, 0.6);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:100;
    padding:20px;
}

.popUp[hidden] {
    display:none;
}

.popUpLive {
    position:fixed;
    inset:0;
    background:rgba(18, 39, 32, 0.6);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:100;
    padding:20px;
}

.popUpLive[hidden] {
    display:none;
}

.modal-card {
    background:var(--snow);
    border-radius:20px;
    padding:36px;
    width:100%;
    max-width:420px;
    max-height:90vh;
    overflow-y:auto;
    text-align:center;
    box-shadow:0 24px 48px -24px rgba(20,35,28,0.35);
}

.modal-card h3 {
    font-size:22px;
    margin-bottom:12px;
}

.modal-card p {
    color:var(--ink-soft);
    font-size:15px;
    margin-bottom:24px;
}

.modal-actions {
    display:flex;
    flex-direction:column;
    gap:12px;
}

.modal-actions .btn {
    justify-content:center;
}

.modal-actions-live {
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:20px;
}

.modal-actions-live .btn {
    justify-content:center;
}

.modal-donate-link {
    font-size:13px;
    color:var(--ink-soft);
    text-decoration:underline;
}

#loading-view,
#live-loading-view {
    text-align:center;
    padding:20px 0;
}

.spinner {
    width:40px;
    height:40px;
    border:4px solid var(--birch);
    border-top-color:var(--berry);
    border-radius:50%;
    margin:0 auto 20px;
    animation:spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform:rotate(360deg); }
}

button {
    font-family:inherit;
}

.close-modal,
.btn-close-modal {
    background:transparent;
    color:var(--ink-soft);
    border:1px solid var(--pine);
    cursor:pointer;
    padding:8px 10px;
    border-radius:100px;
}

.close-modal:hover,
.btn-close-modal:hover {
    background:var(--birch);
}

#live-reveal-controls {
    display:flex;
    flex-direction:column;
    gap:20px;
    text-align:left;
}

#live-reveal-controls label {
    font-size:14px;
    color:var(--pine-deep);
}

#reveal-participant {
    padding:8px;
    font-family:inherit;
    border-radius:8px;
}

#reveal-btn {
    width:100%;
    justify-content:center;
    border:none;
}

#reveal-btn[hidden] {
    display:none;
}

#hide-result-btn {
    font-family:inherit;
    background:var(--berry);
    border:none;
    color:var(--snow);
    padding: 12px 20px;
    font-weight:500;
}

#reveal-btn:disabled {
    opacity:0.5;
    pointer-events:none;
}

#reveal-result {
    text-align:center;
    padding:20px;
    border-radius:12px;
    background:var(--birch);
    margin-bottom:30px;
}

#reveal-result p {
    margin-bottom:4px;
}

#reveal-name {
    font-size:28px;
    color:var(--berry);
    margin-bottom:16px;
}

/* ---------- PAGE GENERIC ---------- */

.pageBanner {
    background:var(--pine);
    color:var(--birch);
    padding:56px 6% 48px;
    text-align:center;
}

.pageBanner h1 {
    color:var(--snow);
    font-size:36px;
}

.pageBanner p {
    color:#D7DFD9;
    margin-top:10px;
    font-size:15px;
}

.pageContent {
    max-width:90%;
    margin:0 auto;
    padding:64px 6% 60px;
}

.pageContent h2 {
    font-size:22px;
    margin-top:40px;
    margin-bottom:14px;
}

.pageContent h2:first-child {
    margin-top:0;
}

.pageContent p {
    color:var(--ink-soft);
    font-size:15px;
    margin-bottom:14px;
}

.pageContent ul {
    color:var(--ink-soft);
    font-size:15px;
    margin:0 0 14px 20px;
}

.pageContent li {
    margin-bottom:8px;
}

.pageContent a {
    color:var(--berry);
    text-decoration:underline;
}

.pageContent strong {
    color:var(--ink);
}

.legal-updated, .policy-updated {
    font-size:13px;
    color:var(--ink-soft);
    margin-top:48px;
    font-style:italic;
}

.page-cta {
    text-align: center;
    padding: 0 6% 60px;
}


/* GRAND MOBILE */
@media (min-width: 481px) {

.moon {
    position:absolute;
    left:88%;
    top:-25%;
    width:35px;
    height:35px;
    border-radius:50%;
    background:var(--gold);
    z-index:1;
}
 
.moon-mask {
    position:absolute;
    left:86%;
    top:-26%;
    width:35px;
    height:35px;
    border-radius:50%;
    background:var(--light-pine);
    z-index:1;
}

.santa {
    position:absolute; 
    left:52%;
    top:-40%;
    width:300px;
    max-width:40%;
    height:auto;
    z-index:2; 
    pointer-events:none;
}

}

/* MOBILE LANDSCAPE / PHABLET */
@media (min-width: 576px) {

.hero{height:560px;}

.moon {
    position:absolute;
    left:88%;
    top:-29%;
    width:35px;
    height:35px;
    border-radius:50%;
    background:var(--gold);
    z-index:1;
}
 
.moon-mask {
    position:absolute;
    left:86%;
    top:-30%;
    width:35px;
    height:35px;
    border-radius:50%;
    background:var(--light-pine);
    z-index:1;
}

.santa {
    position:absolute; 
    left:52%;
    top:-45%;
    width:300px;
    max-width:40%;
    height:auto;
    z-index:2; 
    pointer-events:none;
}

.card .btn-add {
    width: 60%;
}

.import-excel {
    width: 60%;
}

.step-next {
    width: 60%;
}

}

/* TABLETTE PORTRAIT */
@media (min-width: 768px) {

.hero {height:620px;}

.hero h1{font-size:40px;}

.hero p{font-size:14px;}

.moon {
    position:absolute;
    left:88%;
    top:-40%;
    width:35px;
    height:35px;
    border-radius:50%;
    background:var(--gold);
    z-index:1;
}
 
.moon-mask {
    position:absolute;
    left:87%;
    top:-41%;
    width:35px;
    height:35px;
    border-radius:50%;
    background:var(--light-pine);
    z-index:1;
}

.santa {
    position:absolute; 
    left:52%;
    top:-70%;
    width:300px;
    max-width:40%;
    height:auto;
    z-index:2; 
    pointer-events:none;
}

.card .btn-add {
    width: 50%;
}

.import-excel {
    width: 50%;
}

.step-next {
    width: 50%;
}

}


/* TABLETTE LANDSCAPE */
@media (min-width: 992px) {

nav {display:flex;}

.burger {display:none;}

.mobile-nav {display:none;}

body.home-page .mobile-nav {display:none;}

.hero {height:680px;}

.hero h1{font-size:48px;}

.hero p{font-size:14px;}

.moon {
    position:absolute;
    left:80%;
    top:-10%;
    width:55px;
    height:55px;
    border-radius:50%;
    background:var(--gold);
    z-index:1;
}
 
.moon-mask {
    position:absolute;
    left:79.5%;
    top:-9%;
    width:50px;
    height:50px;
    border-radius:50%;
    background:var(--light-pine);
    z-index:1;
}

.santa {
    position:absolute; 
    left:48%;
    top:-45%;
    width:300px;
    max-width:50%;
    height:auto;
    z-index:2; 
    pointer-events:none;
}

.participant-actions {
    flex-direction:row;
    justify-content:space-between;
    align-items:baseline;
    gap:16px;
}

.card .btn-add {
    width:50%;
}

.import-excel {
    flex-direction:column;
    width:30%;
}

.step-next {
    width:50%;
}

}


/* DESKTOP */
@media (min-width: 1024px) {

.hero {height:720px;}

.hero h1{font-size:48px;}

.hero p{font-size:16px;}

.path{grid-template-columns:repeat(4,1fr); gap:45px;}

.moon {
    position:absolute;
    left:80%;
    top:-15%;
    width:55px;
    height:55px;
    border-radius:50%;
    background:var(--gold);
    z-index:1;
}
 
.moon-mask {
    position:absolute;
    left:79.5%;
    top:-15%;
    width:50px;
    height:50px;
    border-radius:50%;
    background:var(--light-pine);
    z-index:1;
}

.santa {
    position:absolute; 
    left:50%;
    top:-40%;
    width:300px;
    max-width:70%;
    height:auto;
    z-index:2; 
    pointer-events:none;
}



}


/* LARGE DESKTOP */
@media (min-width: 1280px) {

.logo {
    font-size:32px;
}

nav a {
    font-size:16px; 
}

.hero {height:780px;}

.hero h1{font-size:52px;}

.hero p{font-size:18px;}

.moon {
    position:absolute;
    left:80%;
    top:-15%;
    width:55px;
    height:55px;
    border-radius:50%;
    background:var(--gold);
    z-index:1;
}
 
.moon-mask {
    position:absolute;
    left:79.5%;
    top:-16%;
    width:50px;
    height:50px;
    border-radius:50%;
    background:var(--light-pine);
    z-index:1;
}

.santa {
    position:absolute; 
    left:52%;
    top:-40%;
    width:300px;
    max-width:70%;
    height:auto;
    z-index:2; 
    pointer-events:none;
}

.trail {
    padding:2%;
}

}


/* EXTRA LARGE DESKTOP */
@media (min-width: 1920px) {

.hero {height:840px;}

.hero h1{font-size:56px;}

.hero p{font-size:20px;}

.moon {
    position:absolute;
    left:100%;
    top:-40%;
    width:55px;
    height:55px;
    border-radius:50%;
    background:var(--gold);
    z-index:1;
}
 
.moon-mask {
    position:absolute;
    left:99.5%;
    top:-40%;
    width:50px;
    height:50px;
    border-radius:50%;
    background:var(--light-pine);
    z-index:1;
}

.santa {
    position:absolute; 
    left:70%;
    top:-45%;
    width:320px;
    max-width:100%;
    height:auto;
    z-index:2; 
    pointer-events:none;
}

}