/* La charte (typographies, boutons, navigation) vient de site/css/template.css.
   Ces règles ne concernent que la mise en page du parcours et ses illustrations. */
html{scroll-behavior:smooth;scroll-padding-top:24px}
.parcours{--ink:#343a40;--muted:#64503a;--line:#d9cbbb;color:var(--ink)}
.parcours a:focus-visible{outline:3px solid #64503a;outline-offset:5px}
.parcours .wrap{width:min(1120px,calc(100% - 48px));margin:auto}
.parcours .hero{padding:60px 0;text-align:center}
.parcours .hero-logo{width:min(360px,75%);height:auto;margin:0 auto 35px;display:block}
.parcours .eyebrow{text-transform:uppercase;letter-spacing:2px;font-size:12px;font-weight:600}
.parcours .hero h1{margin:24px 0;line-height:1.2}
.parcours .hero h1 em{font-style:normal}
.parcours .intro{max-width:700px;margin:0 auto 20px}
.parcours .pill{display:inline-block;border:1px solid var(--line);padding:7px 13px;font-size:12px;margin:10px 5px 0}
.parcours .phase-nav{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:24px}
.parcours .phase-nav a{padding:20px 10px;text-decoration:none;color:var(--ink);font-size:14px}
.parcours .phase-nav a:hover{background:#e2d0c0}
.parcours .phase-nav span{color:var(--muted);margin-right:10px}
.parcours .notice{font-size:13px;color:var(--muted);max-width:760px;padding-bottom:25px}
.parcours .step:nth-of-type(even){background:#e2d0c0}
.parcours .step-layout{display:grid;grid-template-columns:70px 1fr 1fr;gap:35px;align-items:center;padding-top:70px;padding-bottom:70px}
.parcours .number{align-self:start;font-size:44px;font-weight:300;line-height:1;color:var(--muted);padding-top:7px}
.parcours .copy{grid-column:3;grid-row:1}
.parcours .copy h2{margin:12px 0 20px;line-height:1.25}
.parcours .note{border-left:3px solid #64503a;padding:4px 0 4px 16px;font-size:14px}
.parcours .visual{grid-column:2;grid-row:1;margin:0;min-width:0}
.parcours .screen{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 12px 30px #343a4010}
.parcours .bar{display:flex;gap:5px;align-items:center;padding:13px;background:#f1e9e1;border-bottom:1px solid var(--line)}
.parcours .dot{width:6px;height:6px;background:#a38f7b;border-radius:50%}
.parcours .bar small{font-size:10px;margin-left:9px;letter-spacing:1px}
.parcours .screen-body{padding:25px}
.parcours .screen-title{font-weight:600;font-size:16px;margin-bottom:18px}
.parcours .field{border:1px solid #ded7d0;padding:10px 12px;margin:8px 0;font-size:12px;background:#fdfbf9}
.parcours .fake-button{display:block;margin-top:18px;border:2px solid var(--ink);color:var(--ink);text-align:center;padding:10px;font-size:12px;text-transform:uppercase}
.parcours .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}
.parcours .portrait{aspect-ratio:3/4;border-radius:7px;background:#e2d0c0;position:relative;overflow:hidden}
.parcours .portrait:before{content:'';position:absolute;width:33%;height:28%;background:#c88761;left:34%;top:19%;border-radius:50%}
.parcours .portrait:after{content:'';position:absolute;width:76%;height:55%;background:#64503a;left:12%;top:49%;border-radius:45% 45% 0 0}
.parcours .portrait:nth-child(2n){background:#f1e9e1}
.parcours .portrait:nth-child(2n):after{background:#343a40}
.parcours .portrait:nth-child(3n):before{background:#895940}
.parcours .crop-frame{width:140px;margin:0 auto 18px;border:2px dashed #64503a;padding:7px}
.parcours .crop-frame .portrait{border-radius:0}
.parcours .pack{padding:20px;background:#e2d0c0;text-align:center;font-size:25px;margin-bottom:15px}
.parcours .pack small{font-size:12px}
.parcours .track .field:before{content:'✓';color:#64503a;margin-right:10px}
.parcours figcaption{font-size:11px;color:var(--muted);margin-top:12px}
.parcours .ending{padding:65px 24px;text-align:center}
.parcours .ending h2{margin-bottom:20px}
.parcours .ending .btn{margin:10px 6px}
@media(max-width:850px){.parcours .step-layout{grid-template-columns:48px 1fr;gap:20px;padding-top:45px;padding-bottom:45px}.parcours .copy{grid-column:2;grid-row:1}.parcours .visual{grid-column:2;grid-row:2;max-width:480px;width:100%}.parcours .number{font-size:34px}.parcours .hero{padding-top:35px}.parcours .phase-nav{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.parcours .wrap{width:calc(100% - 32px)}.parcours .step-layout{grid-template-columns:32px 1fr;gap:14px}.parcours .screen-body{padding:18px}.parcours .phase-nav a{font-size:12px;padding:14px 4px}.parcours .ending{padding:40px 16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{#header,#footer,.parcours .phase-nav,.parcours .ending{display:none}.parcours .hero{padding:0}.parcours .hero-logo{width:180px}.parcours .step{break-inside:avoid}.parcours .step-layout{padding-top:25px;padding-bottom:25px;grid-template-columns:40px 1fr 1fr;gap:20px}.parcours .copy{grid-column:3;grid-row:1}.parcours .visual{grid-column:2;grid-row:1}.parcours .screen{box-shadow:none}}

/* Deux origines rejoignent le même parcours après paiement sur Ulule. */
.parcours .entry-layout{display:grid;grid-template-columns:70px minmax(0,1fr);gap:35px;padding-top:70px;padding-bottom:70px}
.parcours .entry-content h2{margin:12px 0 20px}
.parcours .entry-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:30px}
.parcours .entry-path{border:1px solid var(--line);padding:28px;background:#fdfbf9;display:flex;flex-direction:column;align-items:flex-start}
.parcours .entry-path h3{margin:12px 0 18px}
.parcours .entry-path .btn{margin-top:auto}
.parcours .entry-join{text-align:center;font-size:36px;color:var(--muted);line-height:1.5}
.parcours .entry-common{padding:30px;background:#e2d0c0;scroll-margin-top:24px}
.parcours .entry-checklist{padding-left:22px;margin:22px 0;font-size:16px;line-height:1.6}
.parcours .entry-checklist li{padding:5px 0 10px 8px}
.parcours .entry-checklist a{font-size:inherit;color:inherit;overflow-wrap:anywhere}
.parcours .entry-common .note{margin-top:20px}
@media(max-width:850px){.parcours .entry-layout{grid-template-columns:48px minmax(0,1fr);gap:20px;padding-top:45px;padding-bottom:45px}.parcours .entry-paths{grid-template-columns:1fr}}
@media(max-width:480px){.parcours .entry-layout{grid-template-columns:32px minmax(0,1fr);gap:14px}.parcours .entry-path,.parcours .entry-common{padding:20px}.parcours .entry-checklist{font-size:14px}}
@media print{.parcours .entry-layout{padding-top:25px;padding-bottom:25px}.parcours .entry-paths{grid-template-columns:repeat(2,minmax(0,1fr))}.parcours .entry-step{break-inside:auto}}

/* Aperçu des quatre offres dans l’étape de choix du pack. */
.parcours .pack-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:18px}
.parcours .pack-choice{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--line);background:#fdfbf9;min-width:0}
.parcours .pack-choice.is-selected{border:2px solid #64503a;padding:9px;background:#f1e9e1}
.parcours .pack-code{font-size:10px;letter-spacing:1px;color:var(--muted)}
.parcours .pack-choice strong{font-size:13px;line-height:1.3}
.parcours .pack-description{font-size:11px;line-height:1.4}
.parcours .pack-selection{font-size:11px;margin-top:auto;padding-top:5px;color:var(--muted)}
@media(max-width:380px){.parcours .pack-choices{grid-template-columns:1fr}}

/* Import individuel : un fichier, puis les informations de cette photo. */
.parcours .import-label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;line-height:1.5}
.parcours .import-number{display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;height:24px;border:1px solid #64503a;border-radius:50%;color:var(--muted)}
.parcours .import-types{font-size:12px;margin:10px 0;color:var(--muted)}
.parcours .import-file{display:flex;align-items:center;gap:14px;border:1px dashed #a38f7b;padding:12px;background:#fdfbf9}
.parcours .import-file .portrait{width:64px;flex:0 0 64px}
.parcours .import-file strong,.parcours .import-file span{display:block;font-size:11px;line-height:1.5;overflow-wrap:anywhere}
.parcours .import-file strong{font-size:13px}
.parcours .import-browse{border:1px solid var(--line);padding:4px 8px;margin-top:8px;width:fit-content}
.parcours .import-arrow{text-align:center;font-size:24px;color:var(--muted);margin:6px 0}
.parcours .import-next{font-size:11px;margin:12px 0 0;color:var(--muted);text-align:center}

/* Jeux dessinés avec les mêmes formes simples que les portraits. */
.parcours .game-art{position:relative;isolation:isolate;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:6px;background:#ede3d7}
.parcours .game-art:after{content:'';position:absolute;left:12%;right:10%;bottom:12%;height:10%;border-radius:50%;background:#64503a15;z-index:-1}
.parcours .game-box{position:absolute;left:12%;top:19%;width:43%;height:64%;border-radius:5px;background:#64503a;border-right:7px solid #493c2d;transform:rotate(-7deg);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#f1e9e1;gap:6%;box-shadow:0 3px 0 #343a401a}
.parcours .game-box>span:first-child{font-size:clamp(6px,.65vw,10px);letter-spacing:1px}
.parcours .box-emblem{font-size:clamp(23px,3vw,46px);font-weight:300;line-height:1;border:1px solid #e2d0c080;border-radius:50%;width:55%;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.parcours .game-cards{position:absolute;left:46%;top:29%;width:39%;height:58%}
.parcours .game-card{position:absolute;inset:0;border:3px solid white;border-bottom-width:9px;border-radius:5px;background:white;transform-origin:50% 95%;box-shadow:0 2px 3px #343a4020}
.parcours .game-card:nth-child(1){transform:rotate(-21deg);background:#bda58b}
.parcours .game-card:nth-child(2){transform:rotate(17deg)}
.parcours .game-card:nth-child(3){transform:rotate(-2deg)}
.parcours .game-card .portrait{width:100%;height:100%;border-radius:2px}
.parcours .game-card:nth-child(2) .portrait{background:#d1bda6}
.parcours .game-card:nth-child(2) .portrait:after{background:#343a40}
.parcours .game-card:nth-child(3) .portrait:after{background:#a16f50}
.parcours .game-ribbon,.parcours .game-holder,.parcours .game-notebook,.parcours .game-pencil{display:none}
.parcours .game-art--cadeau{background:#f1e5e0}
.parcours .game-art--cadeau .game-ribbon{display:block;position:absolute;left:10%;top:39%;width:44%;height:13%;background:#bd826a;transform:rotate(-7deg);border-top:2px solid #e7bb9f;border-bottom:2px solid #e7bb9f}
.parcours .game-art--confort{background:#e4e1d7}
.parcours .game-art--confort .game-holder{display:block;position:absolute;right:9%;bottom:9%;width:48%;height:18%;border-radius:50% 50% 7px 7px;background:#a89b7b;border:2px solid #817357}
.parcours .game-art--confort .game-holder:after{content:'';position:absolute;left:10%;right:10%;top:35%;height:2px;background:#64503a}
.parcours .game-art--evenement{background:#e7e2dc}
.parcours .game-art--evenement .game-box{background:#faf8f4;color:#64503a;border-right-color:#d1bda6;left:8%}
.parcours .game-art--evenement .box-emblem{border-color:#bda58b}
.parcours .game-art--evenement .game-cards{left:35%;width:33%;height:49%;top:34%}
.parcours .game-art--evenement .game-notebook{display:block;position:absolute;right:7%;top:34%;width:24%;height:48%;border-radius:3px;background:#bda58b;border-left:4px solid #64503a;transform:rotate(10deg)}
.parcours .game-art--evenement .game-pencil{display:block;position:absolute;right:9%;top:43%;width:3%;height:40%;background:#64503a;transform:rotate(20deg);border-radius:3px}
.parcours .received-game .game-art{max-width:310px;margin:0 auto 16px}
.parcours .received-game p{text-align:center;font-size:16px}
.parcours .received-game small{font-size:12px}
.parcours .game-art--complet .game-box>span:first-child{font-size:12px}
.parcours .game-art--complet .box-emblem{font-size:48px}