/* VivaSortie (VSSV 4053, 15/10/2026 ; palette du logo de David, VSSV 4062) — fiche : DESIGN.md. Aucune couleur hors des variables. */
@font-face{font-family:"Nunito";src:url("/fonts/nunito.woff2") format("woff2");font-weight:200 1000;font-display:swap}

:root{
  --nuit:#0E1F4B;      /* bleu nuit du logo : texte, fonds sombres */
  --papier:#F5F1EC;    /* fond clair, celui de la planche */
  --sable:#EDE6DE;     /* fond des tuiles */
  --braise:#C92A45;    /* action : boutons (blanc dessus, contraste 5,4) ; chiffres sur fond clair (4,8) */
  --couchant:#FF6B78;  /* corail du logo : accent sur fond sombre uniquement (5,8 sur nuit) */
  --riviere:#2A4BA8;   /* liens, surtitres sur fond clair (7,0) */
  --ocre:#FF9A1F;      /* orange du logo : filets, étiquettes, numéros sur fond sombre (7,5) */
  --gris:#4A5270;      /* texte secondaire (6,8 sur papier) */
  --degrade:linear-gradient(135deg,#FF6B78,#FF9A1F); /* corail → orange : formes seulement, jamais un fond de texte */
  --titre:"Nunito",ui-sans-serif,system-ui,sans-serif;
  --texte:"Nunito",ui-sans-serif,system-ui,sans-serif;
  --rayon:18px;
  --large:min(1180px,100% - 2.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--papier);color:var(--nuit);font:400 1.0625rem/1.6 var(--texte);-webkit-tap-highlight-color:transparent}
img{max-width:100%;height:auto;display:block}
a{color:var(--riviere);text-underline-offset:.18em}
a:focus-visible,button:focus-visible{outline:3px solid var(--couchant);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--titre);line-height:1.08;letter-spacing:-.01em;text-wrap:balance;margin:0}
p{text-wrap:pretty}
[id]{scroll-margin-top:5rem}
.lien-evitement{position:absolute;left:-999px;top:0;background:var(--nuit);color:var(--papier);padding:.6rem 1rem;z-index:10}
.lien-evitement:focus{left:1rem;top:1rem}
.contenu{width:var(--large);margin-inline:auto}

/* En-tête posé sur le héros */
.entete{position:absolute;inset:0 0 auto;z-index:3}
.entete-in{width:var(--large);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 0}
.marque{display:inline-flex;align-items:center;gap:.55rem;color:var(--papier);text-decoration:none;font:800 1.55rem/1 var(--titre);letter-spacing:-.025em;min-height:44px}
/* Mot-symbole du logo : « viva » corail, « sortie » bleu nuit ; sur fond sombre, « sortie » passe en papier */
.mot .viva{color:var(--couchant)}
.mot .sortie{color:var(--nuit)}
.entete .mot .sortie,.pied .mot .sortie{color:var(--papier)}
.marque-signe{width:38px;height:38px;flex:none;border-radius:50%}
.page-simple .entete{position:static;background:var(--nuit)}
.lien-pro{color:var(--papier);font-weight:600;text-decoration:none;border:1px solid rgb(246 241 231 / .45);border-radius:999px;padding:.6rem 1.05rem;min-height:44px;display:inline-flex;align-items:center;touch-action:manipulation}
.lien-pro:hover{background:rgb(246 241 231 / .12)}
.lien-pro .court{display:none}
@media (max-width:520px){.lien-pro .long{display:none}.lien-pro .court{display:inline}}

/* Héros */
.heros{position:relative;min-height:min(92svh,820px);display:grid;align-items:end;color:var(--papier);background:var(--nuit);isolation:isolate;overflow:hidden}
.heros-image{position:absolute;inset:0;z-index:-2}
.heros-image img{width:100%;height:100%;object-fit:cover;object-position:60% 55%}
.heros::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgb(14 31 75 / .72) 0%,rgb(14 31 75 / .45) 40%,rgb(14 31 75 / .86) 75%,var(--nuit) 100%)}
.heros-in{width:var(--large);margin:auto;padding:8rem 0 3.5rem;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:3rem;align-items:end}
.etiquette{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--nuit);background:var(--degrade);padding:.4rem .8rem;border-radius:999px;margin-bottom:1.3rem}
.heros h1{font-size:clamp(2.3rem,5.4vw,4.4rem);font-weight:900;text-shadow:0 2px 28px rgb(14 31 75 / .55)}
.heros h1 em{font-style:normal;color:var(--couchant)}
.heros-texte{font-size:clamp(1.05rem,1.6vw,1.22rem);max-width:34rem;margin:1.4rem 0 0;color:rgb(246 241 231 / .92)}
.heros-cote{border-left:2px solid var(--ocre);padding-left:1.4rem}
.heros-cote p{margin:0 0 1.1rem;color:rgb(246 241 231 / .9)}
.boutons{display:flex;flex-wrap:wrap;gap:.75rem}
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.8rem 1.35rem;border-radius:999px;font:700 1rem/1.1 var(--texte);text-decoration:none;touch-action:manipulation;transition:transform .18s ease,background-color .18s ease}
.bouton:hover{transform:translateY(-1px)}
.bouton-plein{background:var(--braise);color:#fff}
.bouton-plein:hover{background:#A81F38}
.bouton-clair{background:var(--papier);color:var(--nuit)}
.bouton-ligne{border:1.5px solid currentColor;color:inherit}

/* Sections */
.section{padding:clamp(4rem,9vw,7rem) 0}
.surtitre{font:700 .82rem/1 var(--texte);letter-spacing:.1em;text-transform:uppercase;color:var(--riviere);margin:0 0 1rem}
.section h2{font-size:clamp(1.8rem,3.6vw,2.9rem);font-weight:700;max-width:22ch}
.chapo{max-width:40rem;color:var(--gris);font-size:1.12rem;margin:1.1rem 0 0}

/* Ce qu'on y trouvera : grille asymétrique */
.univers{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;margin-top:3rem;list-style:none;padding:0}
.univers li{background:var(--sable);border-radius:var(--rayon);padding:1.6rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;min-height:11rem}
.univers li:nth-child(1){grid-column:span 4;background:var(--nuit);color:var(--papier)}
.univers li:nth-child(2){grid-column:span 2}
.univers li:nth-child(3),.univers li:nth-child(4),.univers li:nth-child(5){grid-column:span 2}
.univers li:nth-child(6){grid-column:span 6;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;min-height:auto}
.univers h3{font-size:1.2rem;font-weight:700}
.univers p{margin:0;color:var(--gris)}
.univers li:nth-child(1) p{color:rgb(246 241 231 / .82)}
.univers li:nth-child(1) h3{font-size:clamp(1.4rem,2.6vw,2rem)}
.univers .num{font:700 .85rem/1 var(--titre);color:var(--riviere);margin-top:auto}
.univers li:nth-child(1) .num{color:var(--ocre)}

/* Comment ça marche */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;margin-top:3rem;padding:0;list-style:none;counter-reset:e}
.etapes li{counter-increment:e;border-top:2px solid var(--nuit);padding-top:1.3rem}
.etapes li::before{content:"0" counter(e);display:block;font:900 2.6rem/1 var(--titre);color:var(--braise);margin-bottom:1rem}
.etapes h3{font-size:1.15rem;font-weight:700;margin-bottom:.5rem}
.etapes p{margin:0;color:var(--gris)}

/* Professionnels */
.pros{background:var(--nuit);color:var(--papier)}
.pros .surtitre{color:var(--ocre)}
.pros .chapo{color:rgb(246 241 231 / .85)}
.pros-grille{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.conditions{list-style:none;padding:0;margin:0;display:grid;gap:0;border-top:1px solid rgb(246 241 231 / .2)}
.conditions li{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;padding:1.1rem 0;border-bottom:1px solid rgb(246 241 231 / .2)}
.conditions strong{font:700 1.35rem/1.1 var(--titre);color:var(--couchant)}
.conditions span{color:rgb(246 241 231 / .88)}
.pros .note{font-size:.95rem;color:rgb(246 241 231 / .75);margin:1.4rem 0 1.8rem}
.pros a:not(.bouton){color:var(--papier)}

/* Pied */
.pied{background:#091433;color:rgb(246 241 231 / .8);padding:3.5rem 0 2.5rem;font-size:.95rem}
.pied-in{width:var(--large);margin:auto;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem}
.pied h2{font:700 .8rem/1 var(--texte);letter-spacing:.1em;text-transform:uppercase;color:var(--ocre);margin:0 0 1rem}
.pied ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.pied a{color:var(--papier);display:inline-block;padding:.25rem 0}
.pied .marque{margin-bottom:.8rem}
.pied p{margin:0}

/* Page simple (mentions, 404) */
.page-simple main{padding:3.5rem 0 5rem}
.page-simple h1{font-size:clamp(1.9rem,4vw,2.8rem);margin-bottom:2rem}
.page-simple h2{font-size:1.2rem;margin:2rem 0 .6rem}
.page-simple main p{max-width:44rem}

@media (max-width:900px){
  .heros-in{grid-template-columns:1fr;gap:2rem;padding-top:7rem}
  .univers{grid-template-columns:1fr 1fr}
  .univers li:nth-child(n){grid-column:span 1}
  .univers li:nth-child(1),.univers li:nth-child(6){grid-column:span 2}
  .etapes{grid-template-columns:1fr;gap:2rem}
  .pros-grille{grid-template-columns:1fr}
  .pied-in{grid-template-columns:1fr 1fr}
  .pied-in>div:first-child{grid-column:span 2}
}
@media (max-width:560px){
  .univers{grid-template-columns:1fr}
  .univers li:nth-child(n){grid-column:span 1}
  .univers li{min-height:auto}
  .conditions li{grid-template-columns:1fr;gap:.3rem}
  .pied-in{grid-template-columns:1fr}
  .pied-in>div:first-child{grid-column:span 1}
}
.section-suite{padding-top:0}