/* Le parcours d'achat. Mêmes couleurs que la vitrine (vitrine.css, selon le style choisi).
   Légèreté avant tout : aucun flou, rien ne bouge en permanence, seulement l'opacité et le déplacement pendant une transition. */
body.parcours { --rc:14px; --ligne:#ffffff1c; --ligne-2:#ffffff33; --t2:#c9c8c1; --t3:#a5a49d; background:var(--t-fond); }
body.parcours[data-theme=futuriste] { --rc:6px; }
body.parcours[data-theme=minimaliste] { --rc:16px; }
body.parcours[data-theme=nature] { --rc:20px; }
body.parcours[data-theme=pixel] { --rc:2px; }
.parcours[data-theme=pixel] .p-fond, .parcours[data-theme=pixel] .p-guide { image-rendering:pixelated; }

/* L'en-tête se pose sur le décor et se réduit à la marque, au fil d'étapes et au compte */
.parcours .d-entete, .parcours .d-entete.v-en-haut { position:absolute; left:0; right:0; z-index:6; background:transparent; border-color:transparent; padding:14px max(20px, calc((100vw - 1320px) / 2 + 48px)); }
.parcours .d-actions { flex:none; }
.p-fil { flex:1; max-width:560px; margin:0 auto; view-transition-name:p-fil; }
.p-fil-etapes { display:grid; grid-template-columns:repeat(4, 1fr); font-size:13px; font-weight:700; color:var(--t3); text-align:center; }
.p-fil-etapes .fait { color:var(--a); }
.p-fil-barre { height:3px; margin-top:7px; background:var(--ligne); overflow:hidden; }
.p-fil-barre i { display:block; height:100%; background:var(--a); transform-origin:0 50%; transition:transform .7s cubic-bezier(.22, 1, .36, 1); }

/* Le décor et le personnage */
.p-scene { position:relative; min-height:100vh; min-height:100svh; overflow:hidden; color:#f4f3ee; isolation:isolate; }
.p-decor { position:absolute; inset:0; z-index:-1; opacity:.34; }
.p-fond { width:100%; height:100%; object-fit:cover; }
.p-voile { position:absolute; inset:0; background:linear-gradient(90deg, #06060bf5 0%, #06060bc9 42%, #06060b4d 72%, #06060b26 100%), linear-gradient(180deg, #06060b99 0%, #06060b00 22%, #06060b00 62%, #06060be6 100%); }
.p-guide { position:absolute; right:3vw; bottom:0; z-index:0; width:auto; height:min(92vh, 830px); max-width:none; object-fit:contain; object-position:bottom; transform-origin:100% 100%; pointer-events:none; view-transition-name:p-guide; }
.g-commencer .p-guide, .g-installation .p-guide { transform:translateX(-6vw) scale(.94); }
.g-serveur .p-guide { transform:translateX(-1vw) scale(.8); }
.g-bienvenue .p-guide { transform:translateX(-1vw); }
.g-assistant .p-guide { transform:translate(-8vw, -41vh) scale(.5); transition:transform .7s cubic-bezier(.22, 1, .36, 1); }
.g-assistant.a-formule .p-guide, .g-recap .p-guide { transform:translate(-6vw, -49vh) scale(.42); }

/* Les transitions entre les pages, faites par le navigateur : le personnage et le fil se déplacent, le reste change vite */
@view-transition { navigation:auto; }
::view-transition-group(p-guide), ::view-transition-group(p-fil) { animation-duration:.6s; animation-timing-function:cubic-bezier(.22, 1, .36, 1); }
::view-transition-old(root) { animation:p-part .18s ease-in both; }
::view-transition-new(root) { animation:none; }
@keyframes p-part { to { opacity:0; transform:translateX(-24px); } }
@keyframes p-arrive { from { opacity:0; transform:translateX(30px); } }
@keyframes p-glisse { from { opacity:0; transform:translateY(24px); } }
@keyframes p-sceau { 0% { opacity:0; transform:scale(.6); } 60% { opacity:1; transform:scale(1.1); } 100% { transform:scale(1); } }
.r { animation:p-arrive .5s cubic-bezier(.22, 1, .36, 1) both; }
.d1 { animation-delay:40ms; } .d2 { animation-delay:90ms; } .d3 { animation-delay:140ms; } .d4 { animation-delay:190ms; } .d5 { animation-delay:240ms; } .d6 { animation-delay:290ms; }
.lateral { animation:p-glisse .55s cubic-bezier(.22, 1, .36, 1) both; }
@media (prefers-reduced-motion:reduce) {
  .r, .lateral, .p-tache i, ::view-transition-old(root), ::view-transition-group(*) { animation:none !important; }
  .p-fil-barre i, .g-assistant .p-guide { transition:none; }
}

/* La page */
.p-page { position:relative; z-index:2; max-width:1320px; margin:0 auto; padding:92px 48px 40px; }
.p-etroit { max-width:620px; padding-top:5vh; } .p-etroit.large { max-width:700px; padding-top:1vh; }
.p-colonnes { display:grid; grid-template-columns:minmax(0, 1fr) 460px; gap:56px; align-items:start; }
.p-colonnes.recap, .a-formule .p-colonnes { grid-template-columns:minmax(0, 1fr) 360px; gap:40px; }
.p-contenu { min-width:0; }
.parcours h1 { margin:0 0 14px; font-size:clamp(30px, 3.5vw, 50px); line-height:1.08; color:#fff; text-wrap:balance; outline:none; }
.parcours h1.p-grand { font-size:clamp(36px, 4.6vw, 66px); }
.parcours h1 em { font-style:normal; color:var(--a); font-family:var(--police-mot); font-size:var(--taille-mot); font-weight:700; letter-spacing:0; line-height:0; }
.parcours h2 { color:#fff; }
.p-chapo { margin:0 0 22px; max-width:640px; font-size:18px; line-height:1.5; color:var(--t2); }
.p-salut { display:inline-flex; align-items:center; gap:10px; margin:0 0 16px; padding:5px 16px 5px 5px; border:1px solid var(--ligne-2); border-radius:999px; background:#0a0a0fb8; font-size:14px; font-weight:600; color:#ecece6; }
.p-salut img { width:30px; height:30px; border-radius:50%; object-fit:cover; background:#ffffff14; } .p-salut b { color:var(--a); }
.p-installe { display:inline-flex; align-items:center; gap:9px; margin:0 0 16px; padding:7px 14px; border:1px solid var(--ligne-2); border-radius:999px; background:#0a0a0f99; font-size:14px; font-weight:700; }
.p-installe i { width:8px; height:8px; border-radius:50%; background:var(--a); }
.p-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.p-pied { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin-top:22px; }
.parcours .d-bouton.grand { min-height:52px; }
.parcours button.d-bouton { border:0; cursor:pointer; font-family:inherit; }
.p-lien { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:8px 4px; border:0; background:none; font:inherit; font-weight:700; color:var(--t2) !important; cursor:pointer; }
.p-lien:hover { color:var(--a) !important; text-decoration:none; }
.p-alerte { margin:0 0 16px; padding:11px 15px; border:1px solid #ff6b6b66; border-radius:10px; background:#3a1518; color:#ffd9d9; font-size:15px; }
.p-note { max-width:700px; margin:12px 0 0; font-size:14px; color:var(--t3); }
.p-tuile input, .p-fonction input, .p-forme input { position:absolute; opacity:0; width:1px; height:1px; }
.p-tuile input:focus-visible + span, .p-fonction input:focus-visible + span, .p-forme input:focus-visible + span, .p-rang:focus-visible, .p-tache:focus-visible, .p-lien:focus-visible { outline:2px solid #fff; outline-offset:2px; }

/* Connexion */
.p-droits { display:grid; gap:12px; margin:0 0 24px; padding:0; list-style:none; }
.p-droits li { display:flex; gap:12px; font-size:15px; color:var(--t2); } .p-droits b { flex:none; color:var(--a); } .p-droits strong { color:#fff; }

/* Serveur */
.p-liste { display:grid; gap:10px; max-height:min(62vh, 560px); overflow-y:auto; padding:2px; }
.p-rang { display:flex; align-items:center; gap:14px; min-height:66px; padding:11px 16px; background:var(--t-carte); border:1px solid var(--ligne); border-radius:var(--rc); color:#f4f3ee !important; transition:transform .18s, border-color .18s; }
.p-rang:hover { transform:translateX(5px); border-color:var(--a); text-decoration:none; }
.p-rang .icone-serveur { flex:none; width:44px; height:44px; border-radius:50%; }
.p-rang-texte { min-width:0; } .p-rang-texte strong { display:block; font-weight:700; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .p-rang-texte small { display:block; font-size:13px; color:var(--t3); }
.p-rang-etat { margin-left:auto; flex:none; font-size:13px; font-weight:700; color:var(--a); } .p-rang.pris .p-rang-etat { color:var(--t3); }

/* Réglages : le style */
.p-tuiles-style { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.p-tuile { position:relative; display:block; cursor:pointer; }
.p-tuile-corps { display:flex; flex-direction:column; gap:3px; height:100%; min-height:104px; padding:12px 14px; background:var(--t-carte); border:1px solid var(--ligne); border-radius:var(--rc); transition:transform .15s, border-color .15s; }
.p-tuile:hover .p-tuile-corps { transform:translateY(-2px); border-color:var(--ligne-2); }
.p-tuile input:checked + .p-tuile-corps { border-color:var(--a); background:var(--t-carte-2); }
.p-tuile img { width:40px; height:40px; border-radius:50%; object-fit:cover; margin-bottom:4px; background:#ffffff14; }
.p-tuile strong { font-size:15px; color:#fff; } .p-tuile small { font-size:13px; color:var(--t3); line-height:1.35; }
.p-champs { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-top:16px; }
.p-champ { display:block; font-size:14px; font-weight:700; color:var(--t2); }
.p-champ input, .p-champ select { display:block; width:100%; min-height:46px; margin-top:5px; padding:10px 13px; background:var(--t-carte); border:1px solid var(--ligne-2); border-radius:8px; color:#fff; font:inherit; font-weight:500; }
.p-champ select option { background:#1b1c21; color:#fff; }
.p-champ input:focus, .p-champ select:focus { outline:2px solid var(--a); outline-offset:1px; }
.p-champ .code { letter-spacing:.1em; text-transform:uppercase; }

/* Réglages : les fonctions */
.p-tuiles-fonctions { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:9px; }
.p-fonction { position:relative; display:block; cursor:pointer; }
.p-fonction-corps { display:flex; align-items:center; gap:12px; min-height:72px; height:100%; padding:10px 14px; background:var(--t-carte); border:1px solid var(--ligne); border-radius:var(--rc); transition:transform .15s, border-color .15s; }
.p-fonction:hover .p-fonction-corps { border-color:var(--ligne-2); transform:translateY(-2px); }
.p-fonction input:checked + .p-fonction-corps { border-color:var(--a); background:var(--t-carte-2); }
.p-fonction-texte strong { display:block; font-size:15px; color:#fff; } .p-fonction-texte small { display:block; font-size:13px; color:var(--t3); line-height:1.35; }
.p-niveau { margin-left:6px; padding:1px 7px; border-radius:999px; background:var(--t-carte-2); border:1px solid var(--ligne-2); font-size:11px; font-weight:800; color:var(--a); }
.p-interrupteur { position:relative; flex:none; width:40px; height:24px; margin-left:auto; border-radius:999px; background:#ffffff24; transition:background-color .2s; }
.p-interrupteur i { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .2s; }
.p-fonction input:checked + .p-fonction-corps .p-interrupteur { background:var(--a); }
.p-fonction input:checked + .p-fonction-corps .p-interrupteur i { transform:translateX(16px); background:var(--encre); }

/* L'aperçu qui suit les choix */
.p-lateral { position:relative; z-index:3; }
.p-apercu { margin-top:calc(30vh - 60px); background:#1e1f24; border:1px solid var(--ligne-2); border-radius:16px; padding:16px; box-shadow:0 30px 60px -22px #000e; view-transition-name:p-apercu; }
.p-apercu-titre { margin:0 0 12px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--t3); }
.p-msg { display:flex; gap:12px; }
.p-msg > img { flex:none; width:40px; height:40px; border-radius:50%; object-fit:cover; background:#ffffff14; }
.p-msg-corps { min-width:0; flex:1; } .p-msg-nom { font-weight:700; color:var(--a); }
.p-tag { margin-left:6px; padding:1px 5px; border-radius:4px; background:#5865f2; color:#fff; font-size:10px; font-weight:800; }
.p-msg p { margin:2px 0 9px; font-size:14px; color:#dbdee1; }
.p-msg-carte { display:block; width:100%; height:auto; border-radius:8px; }
.p-puces { display:flex; flex-wrap:wrap; gap:5px; margin-top:12px; }
.p-puce { padding:2px 9px; border-radius:999px; background:#ffffff12; font-size:12px; font-weight:700; color:#dbdee1; } .p-puce[hidden] { display:none; }
.p-conseil { display:flex; justify-content:space-between; gap:12px; margin:12px 0 0; padding-top:12px; border-top:1px solid var(--ligne); font-size:14px; color:var(--t2); } .p-conseil b { color:var(--a); }

/* La formule */
.p-formes { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; align-items:stretch; }
.p-forme { position:relative; display:block; cursor:pointer; }
.p-forme-corps { position:relative; display:flex; flex-direction:column; height:100%; padding:22px 16px 16px; background:var(--t-carte); border:1px solid var(--ligne); border-radius:var(--rc); transition:transform .28s cubic-bezier(.22, 1, .36, 1), border-color .2s, background-color .2s; }
.p-forme:hover .p-forme-corps { border-color:var(--ligne-2); }
.p-forme input:checked + .p-forme-corps { border-color:var(--a); background:var(--t-carte-2); transform:translateY(-8px); }
.p-forme-badge { display:none; position:absolute; top:-11px; left:14px; padding:2px 10px; border-radius:999px; background:var(--a); color:var(--encre); font-size:12px; font-weight:800; }
.p-forme.conseillee .p-forme-badge { display:block; }
.p-forme-nom { font-family:'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif; font-size:24px; font-weight:800; letter-spacing:-.03em; color:#fff; }
.p-forme-phrase { margin:2px 0 12px; min-height:40px; font-size:14px; color:var(--t2); line-height:1.4; }
.p-prix { margin:0 0 12px; } .p-prix strong { display:block; font-family:'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif; font-size:32px; line-height:1.1; color:#fff; letter-spacing:-.02em; } .p-prix small { font-size:13px; color:var(--t3); }
.p-forme ul { display:grid; gap:7px; margin:0; padding:12px 0 0; list-style:none; border-top:1px solid var(--ligne); font-size:14px; color:var(--t2); line-height:1.35; }
.p-forme li { display:flex; gap:8px; } .p-forme li > b { flex:none; color:var(--a); } .p-forme li em { font-style:normal; color:var(--t3); } .p-forme li.p-plus-tard { color:var(--t3); }
.p-perte { margin:18px 0 0; padding:11px 15px; border:1px solid var(--ligne-2); border-radius:10px; background:var(--t-carte); font-size:14px; color:var(--t2); } .p-perte strong { color:#fff; } .p-perte[hidden] { display:none; }

/* Le récapitulatif */
.p-recap { margin-top:calc(34vh - 60px); padding:22px; background:var(--t-carte); border:1px solid var(--ligne); border-radius:var(--rc); view-transition-name:p-recap; }
.p-recap h2 { margin:0 0 10px; font-size:19px; }
.p-recap-ligne { display:flex; justify-content:space-between; gap:14px; margin:0; padding:7px 0; border-top:1px solid var(--ligne); font-size:14px; color:var(--t2); } .p-recap-ligne b { text-align:right; color:#fff; font-weight:700; }
.p-recap-total { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding-top:10px; border-top:1px solid var(--ligne-2); font-weight:700; color:#fff; }
.p-recap-total strong { font-family:'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif; font-size:27px; color:var(--a); }

/* Le règlement */
.p-case { display:flex; align-items:flex-start; gap:10px; max-width:700px; margin:0 0 16px; font-size:14px; color:var(--t2); cursor:pointer; }
.p-case input { flex:none; width:20px; height:20px; margin:2px 0 0; accent-color:var(--a); }
.p-code { max-width:700px; margin:18px 0 0; padding:12px 16px; background:var(--t-carte); border:1px solid var(--ligne); border-radius:var(--rc); }
.p-code summary { font-weight:700; color:#fff; cursor:pointer; min-height:28px; }
.p-code form { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin-top:12px; } .p-code .p-champ { flex:1 1 240px; } .p-code .p-actions { margin-top:12px; }

/* L'installation */
.p-suite { display:grid; gap:8px; margin:0 0 22px; padding:0; list-style:none; }
.p-suite li { display:flex; align-items:center; gap:12px; min-height:52px; padding:8px 16px; background:var(--t-carte); border:1px solid var(--ligne); border-radius:var(--rc); color:var(--t2); font-weight:600; }
.p-suite li i { display:grid; place-items:center; flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--ligne-2); font-style:normal; font-size:14px; font-weight:800; }

/* La bienvenue */
.p-progres { display:flex; align-items:center; gap:12px; margin-bottom:10px; font-size:14px; font-weight:700; color:var(--t2); } .p-progres b { font-weight:700; }
.p-progres div { flex:1; height:6px; border-radius:999px; background:var(--ligne); overflow:hidden; }
.p-progres i { display:block; height:100%; background:var(--a); transform-origin:0 50%; transition:transform .5s cubic-bezier(.22, 1, .36, 1); }
.p-taches { display:grid; gap:7px; margin-bottom:20px; }
.p-tache { display:flex; align-items:center; gap:12px; width:100%; min-height:54px; padding:7px 14px; text-align:left; background:var(--t-carte); border:1px solid var(--ligne); border-radius:var(--rc); color:#f4f3ee; font:inherit; }
button.p-tache { cursor:pointer; transition:border-color .2s, transform .15s; } button.p-tache:hover { transform:translateX(4px); border-color:var(--ligne-2); }
.p-tache > i { display:grid; place-items:center; flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--ligne-2); font-style:normal; font-size:14px; font-weight:800; }
.p-tache strong { display:block; font-size:15px; font-weight:700; color:#fff; } .p-tache small { display:block; font-size:13px; color:var(--t3); }
.p-tache.fait { border-color:var(--a); } .p-tache.fait > i { background:var(--a); border-color:var(--a); color:var(--encre); animation:p-sceau .35s both; }

.p-accord { margin:16px 0 0; } .p-case a { color:var(--a); text-decoration:underline; }
.p-legal { position:relative; z-index:3; display:flex; flex-wrap:wrap; justify-content:center; gap:4px 18px; padding:14px 16px; background:var(--t-fond); font-size:13px; }
.p-legal a { color:var(--t3); min-height:28px; } .p-legal a:hover { color:var(--a); }

/* Avec le script, un seul temps des réglages à la fois */
.js .p-etape:not(.active) { display:none; }
.js [data-seulement]:not(.active) { display:none; }
.p-etape + .p-etape { margin-top:40px; } .js .p-etape + .p-etape { margin-top:0; }
.p-recap + .p-recap, .p-apercu + .p-recap { margin-top:16px; } .js .p-apercu + .p-recap { margin-top:calc(34vh - 60px); }
.js [data-aller] { visibility:visible; }
html:not(.js) [data-aller] { display:none; }

/* Ordinateur peu haut : le personnage reste derrière le contenu sans le gêner */
@media (max-height:760px) and (min-width:961px) {
  .p-apercu, .p-recap, .js .p-apercu + .p-recap { margin-top:0; }
  .g-assistant .p-guide, .g-assistant.a-formule .p-guide, .g-recap .p-guide { opacity:0; }
}

/* Téléphone et tablette : une colonne, le personnage s'efface, le fil reste */
@media (max-width:960px) {
  .parcours .d-entete, .parcours .d-entete.v-en-haut { padding:10px 16px; gap:12px; }
  .p-fil-etapes { font-size:11px; }
  .p-page { padding:84px 16px 28px; }
  .p-colonnes, .p-colonnes.recap, .a-formule .p-colonnes { grid-template-columns:minmax(0, 1fr); gap:20px; }
  .p-guide { display:none; }
  .p-apercu, .p-recap, .js .p-apercu + .p-recap { margin-top:0; }
  .p-etroit, .p-etroit.large { padding-top:0; }
  .p-liste { max-height:none; overflow:visible; }
  .p-tuiles-style { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .p-tuiles-fonctions, .p-formes, .p-champs { grid-template-columns:minmax(0, 1fr); }
  .p-forme input:checked + .p-forme-corps { transform:none; }
  .p-forme-phrase { min-height:0; }
  .parcours .p-actions .d-bouton, .parcours .p-pied .d-bouton { width:100%; justify-content:center; }
  .p-pied .p-lien { order:2; }
  .p-rang-etat { display:none; }
}