/* Page de la marque : elle présente les trois applications, chacune dans sa couleur. */
.entete{position:absolute;inset:0 0 auto 0;z-index:5;background:transparent;border-bottom:1px solid rgba(255,255,255,.08)}
.logotype{font-size:1.5rem}
.logotype b,.sur,.bouton-or{transition:color .3s var(--courbe),background-color .3s var(--courbe)}
/* L'étape choisie dans le formulaire donne sa couleur d'accent à toute la page. */
body{--accent:var(--accent-portail)}
body[data-choix=licence]{--accent:var(--a-licence)}
body[data-choix=master]{--accent:var(--a-master)}
body[data-choix=crfpa]{--accent:var(--a-crfpa)}
.c-licence{--p:var(--a-licence);--p-fond:var(--c-licence)}.c-master{--p:var(--a-master);--p-fond:var(--c-master)}.c-crfpa{--p:var(--a-crfpa);--p-fond:var(--c-crfpa)}

/* Héros : les trois couleurs des applications se fondent derrière l'éventail de leurs écrans. */
.heros.portail{position:relative;isolation:isolate;overflow:hidden;background:var(--nuit);padding:136px 0 0}
.heros.portail .contenu{grid-template-columns:minmax(0,1fr) 520px;gap:48px}
.aurore{position:absolute;inset:0;z-index:-1;filter:blur(90px);opacity:.85;pointer-events:none}
.aurore i{position:absolute;border-radius:50%}
.aurore i:nth-child(1){right:26%;top:8%;width:520px;height:520px;background:var(--c-licence)}
.aurore i:nth-child(2){right:4%;top:22%;width:480px;height:480px;background:var(--c-master)}
.aurore i:nth-child(3){right:14%;top:46%;width:560px;height:460px;background:#2743B8}
.sur{font:600 .8125rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}
.heros.portail h1{font-size:clamp(2.75rem,5.6vw,4.75rem);line-height:1.02;letter-spacing:-.025em;max-width:11.5em}
.heros.portail .chapo{font-size:1.1875rem;line-height:1.6;max-width:35rem}

/* Formulaire d'invitation : on dit d'abord où l'on en est, puis on laisse son adresse. */
.heros.portail .attente{margin:28px 0 0;max-width:560px}
.attente form.choix-etape{display:grid;gap:12px;background:none;box-shadow:none;padding:0}
.attente form.choix-etape:focus-within{box-shadow:none}
.etapes-choix{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.etapes-choix .legende{margin-right:4px;font-size:.9375rem;color:var(--sur-nuit)}
.etapes-choix label{position:relative;cursor:pointer}
.etapes-choix input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.etapes-choix label span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;font:600 .9375rem var(--sans);color:rgba(255,255,255,.82);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:background-color .2s var(--courbe),box-shadow .2s var(--courbe),color .2s var(--courbe)}
.etapes-choix label span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--p)}
.etapes-choix label:hover span{background:rgba(255,255,255,.12)}
.etapes-choix input:checked+span{background:var(--p-fond);color:#fff;box-shadow:inset 0 0 0 1.5px var(--p)}
.etapes-choix input:focus-visible+span{outline:3px solid var(--or);outline-offset:3px}
.ligne-email{display:flex;gap:8px;background:rgba(255,255,255,.06);padding:4px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:box-shadow .2s var(--courbe)}
.ligne-email:focus-within{box-shadow:inset 0 0 0 1.5px var(--accent)}
.attente small a{color:rgba(255,255,255,.88)}
.final .etapes-choix{justify-content:center}

.eventail{position:relative;height:520px}
.carte-app{position:absolute;width:268px;border-radius:24px;padding:24px 22px 20px;color:#fff;box-shadow:0 40px 80px -30px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.08);transition:transform .5s var(--courbe)}
.carte-app.c-licence{background:var(--c-licence);left:0;top:70px;transform:rotate(-9deg)}
.carte-app.c-master{background:var(--c-master);left:118px;top:24px;transform:rotate(-1deg);z-index:1}
.carte-app.c-crfpa{background:var(--c-crfpa);right:0;top:92px;transform:rotate(8deg);z-index:2}
.eventail:hover .c-licence{transform:rotate(-12deg) translate(-14px,-6px)}
.eventail:hover .c-master{transform:rotate(-1deg) translateY(-14px)}
.eventail:hover .c-crfpa{transform:rotate(11deg) translate(14px,-6px)}
body[data-choix=licence] .carte-app.c-licence{z-index:3;transform:rotate(-5deg) translate(-6px,-14px) scale(1.05)}
body[data-choix=master] .carte-app.c-master{z-index:3;transform:rotate(-1deg) translateY(-16px) scale(1.05)}
body[data-choix=crfpa] .carte-app.c-crfpa{z-index:3;transform:rotate(5deg) translate(6px,-14px) scale(1.05)}
body[data-choix=licence] .carte-app.c-licence,body[data-choix=master] .carte-app.c-master,body[data-choix=crfpa] .carte-app.c-crfpa{box-shadow:0 40px 80px -30px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1.5px var(--p)}
.carte-app .etq{display:inline-block;font:600 .6875rem var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:4px 10px;border-radius:6px;background:rgba(255,255,255,.1)}
.c-licence .etq{color:var(--a-licence)}.c-master .etq{color:var(--a-master)}.c-crfpa .etq{color:var(--a-crfpa)}
.carte-app b{display:block;font:400 1.5rem/1.15 var(--serif);margin:16px 0 14px}
.carte-app ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:.8125rem;color:rgba(255,255,255,.86)}
.carte-app li{display:grid;gap:6px}
.carte-app li i{order:2;display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.14);position:relative;width:100%!important;overflow:hidden}
.carte-app li i::after{content:"";position:absolute;inset:0 auto 0 0;border-radius:3px}
.carte-app li:nth-child(1) i::after{width:86%}.carte-app li:nth-child(2) i::after{width:54%}.carte-app li:nth-child(3) i::after{width:22%}
.c-licence li i::after{background:var(--a-licence)}.c-master li i::after{background:var(--a-master)}.c-crfpa li i::after{background:var(--a-crfpa)}
.carte-app small{display:block;margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);font-size:.8125rem;color:rgba(255,255,255,.7)}
.eventail .lawy{position:absolute;left:150px;bottom:-8px;width:178px;z-index:4;filter:drop-shadow(0 24px 28px rgba(0,0,0,.55))}

.chiffres-portail{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:0!important;margin-top:56px;border-top:1px solid rgba(255,255,255,.1)}
.chiffres-portail div{padding:28px 24px 36px;border-left:1px solid rgba(255,255,255,.1)}
.chiffres-portail div:first-child{border-left:0;padding-left:0}
.chiffres-portail strong{display:block;font:400 3rem/1 var(--serif);letter-spacing:-.02em}
.chiffres-portail span{display:block;margin-top:8px;color:var(--sur-nuit);font-size:.9375rem;max-width:15em}

/* Les trois applications : une grande carte par produit, dans sa couleur. */
.applis{display:grid;gap:24px}
.appli{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:40px;align-items:end;border-radius:28px;padding:48px 48px 0;color:#fff;overflow:hidden;isolation:isolate}
.appli.c-crfpa{background:var(--c-crfpa);--a:var(--a-crfpa)}.appli.c-master{background:var(--c-master);--a:var(--a-master)}.appli.c-licence{background:var(--c-licence);--a:var(--a-licence)}
.appli::before{content:"§";position:absolute;right:-20px;top:-90px;font:400 420px/1 var(--serif);color:rgba(255,255,255,.05);z-index:-1}
.appli .texte{padding-bottom:48px}
.appli .etat{color:var(--a);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06);margin-bottom:20px}
.appli h3{font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.08}
.appli .promesse{font-size:1.1875rem;color:rgba(255,255,255,.82);margin:12px 0 24px}
.appli ul{list-style:none;margin:0 0 32px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 32px;max-width:44rem}
.appli li{position:relative;padding-left:22px;color:rgba(255,255,255,.88);font-size:1rem}
.appli li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--a)}
.appli .bouton{background:var(--a);color:#16130C}
.appli .bouton:hover{filter:brightness(1.08)}
.appli img{align-self:end;width:100%;max-width:240px;margin:0 auto -6px;filter:drop-shadow(0 20px 24px rgba(0,0,0,.4))}

/* Le parcours : trois étapes reliées, chacune à la couleur de son application. */
.parcours{background:var(--carte);border-block:1px solid var(--trait)}
.etapes-parcours{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative}
.etapes-parcours li{position:relative;padding:32px 32px 8px 0}
.etapes-parcours li::before{content:"";display:block;height:6px;border-radius:3px;margin-bottom:24px}
.etapes-parcours li.c-licence::before{background:var(--c-licence)}.etapes-parcours li.c-master::before{background:var(--c-master)}.etapes-parcours li.c-crfpa::before{background:var(--c-crfpa)}
.etapes-parcours li+li{padding-left:8px}
.rang{display:block;font:600 .8125rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-bottom:8px}
.etapes-parcours b{display:block;font:400 1.5rem/1.15 var(--serif);color:var(--encre);margin-bottom:8px}
.etapes-parcours p{color:var(--gris);max-width:22em}

.lawy-portail h2{color:var(--encre)}
.lawy-portail .liste{margin-top:24px}
.lawy-portail .liste b{color:var(--encre)}
.titre-section h2,.case h3{color:var(--encre)}
.final{position:relative;isolation:isolate;overflow:hidden}


/* Les constats : la difficulté telle que l'étudiant la dit, puis la réponse. */
.constats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.constat{position:relative;background:var(--carte);border:1px solid var(--trait);border-radius:20px;padding:32px 32px 32px 36px;overflow:hidden}
.constat::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--c-crfpa)}
.constat:nth-child(2)::before{background:var(--c-master)}.constat:nth-child(3)::before{background:var(--c-licence)}.constat:nth-child(4)::before{background:var(--or)}
.constat q{display:block;font:italic 400 1.125rem/1.35 var(--serif);color:var(--gris);quotes:"«\00a0" "\00a0»";margin-bottom:16px}
.constat h3{font-size:1.625rem;color:var(--encre);margin-bottom:8px}
.constat p{color:var(--gris)}

.appli .pour{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:20px}
.appli .pour .etat{margin:0}
.appli .annees{font:600 .8125rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}

/* Une journée : trois écrans, chacun dans la couleur d'une application. */
.journee{position:relative;isolation:isolate;overflow:hidden;background:var(--nuit);color:#fff}
.journee .titre-section h2{color:#fff}.journee .titre-section p{color:var(--sur-nuit)}
.journee .surtitre,.final .surtitre{color:var(--accent)}
.moments{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.moment .ecran{display:flex;flex-direction:column;gap:14px;min-height:336px;border-radius:24px;padding:24px;margin-bottom:24px;background:var(--p-fond);box-shadow:0 40px 80px -40px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.08);font-size:.875rem}
.moment .etq{align-self:flex-start;font:600 .6875rem var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:4px 10px;border-radius:6px;background:rgba(255,255,255,.1);color:var(--p)}
.moment .heure{font:600 .8125rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--p)}
.moment h3{font-size:1.5rem;margin:8px 0}
.moment>p{color:var(--sur-nuit)}
.bulle-lawy{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;background:#fff;color:#1F1B16;border-radius:14px 14px 14px 4px;padding:12px 14px;line-height:1.45}
.bulle-lawy img{border-radius:8px}
.taches{list-style:none;margin:auto 0 0;padding:0;display:grid;gap:8px;color:rgba(255,255,255,.88)}
.taches li{display:flex;align-items:center;gap:10px}
.taches li::before{content:"";flex:none;width:16px;height:16px;border-radius:5px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.taches li.fait{color:rgba(255,255,255,.6);text-decoration:line-through}
.taches li.fait::before{background:var(--p);box-shadow:none}
.carte-memoire{flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px;background:#fff;color:#1F1B16;border-radius:16px;padding:20px;text-align:center}
.carte-memoire small{color:#5E554A;letter-spacing:.08em;text-transform:uppercase;font-size:.6875rem;font-weight:600}
.carte-memoire b{font:400 1.25rem/1.25 var(--serif)}
.carte-memoire i{font-style:normal;color:#5E554A;font-size:.8125rem}
.notes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.notes span{text-align:center;padding:8px 0;border-radius:8px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.82);font-size:.75rem;font-weight:600}
.notes .choisi{background:var(--p);color:#16130C}
.criteres{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.criteres li{display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(255,255,255,.07);border-radius:10px;padding:10px 12px}
.criteres b{font-weight:500;color:rgba(255,255,255,.92)}
.criteres span{flex:none;font-size:.75rem;font-weight:600;padding:3px 8px;border-radius:6px}
.criteres .ok{background:rgba(127,224,192,.16);color:#9BE8CE}
.criteres .manque{background:rgba(242,162,58,.18);color:#FFC57A}
.moment .mention{margin-top:auto;color:rgba(255,255,255,.6);font-size:.75rem}

/* Lawy en situation : une question, une réponse, ses sources. */
.echange{position:relative;padding-top:136px}
.echange .lawy{position:absolute;right:32px;top:0;width:116px;z-index:1;filter:drop-shadow(0 12px 16px rgba(0,0,0,.2))}
.fil{position:relative;display:grid;gap:12px;background:var(--carte);border:1px solid var(--trait);border-radius:24px;padding:28px 24px 20px;box-shadow:0 30px 60px -40px rgba(31,27,22,.35)}
.bulle{max-width:88%;padding:12px 16px;line-height:1.5;font-size:1rem}
.bulle.moi{justify-self:end;background:var(--c-crfpa);color:#fff;border-radius:16px 16px 4px 16px}
.bulle.lui{justify-self:start;background:var(--fond);border:1px solid var(--trait);color:var(--encre);border-radius:16px 16px 16px 4px}
.bulle.lui p{color:var(--encre)}
.sources{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.sources span{font-size:.8125rem;font-weight:600;color:var(--c-crfpa);background:color-mix(in srgb,var(--c-crfpa) 8%,transparent);border-radius:6px;padding:3px 8px}
.sources span::before{content:"§ ";font-family:var(--serif)}
.fil small{color:var(--gris);font-size:.8125rem}

/* Tarif. */
.offres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1100px){.offres{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;margin-inline:auto}}
.offre .etq{display:inline-block;font:600 .75rem var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:4px 10px;border-radius:6px;color:var(--p-fond);background:color-mix(in srgb,var(--p-fond) 9%,transparent)}
.offre.vedette .etq{color:var(--p,var(--or));background:rgba(255,255,255,.1)}
.offre{position:relative;background:var(--carte);border:1px solid var(--trait);border-radius:24px;padding:36px 32px 32px}
.offre h3{font-size:1.375rem;color:var(--encre)}
.offre .prix{font:400 2.5rem/1 var(--serif);letter-spacing:-.02em;color:var(--encre);margin:20px 0;white-space:nowrap}
.offre .prix small{font:500 1rem var(--sans);letter-spacing:0;color:var(--gris)}
.offre ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;color:var(--gris)}
.offre li::before{content:"✓";margin-right:10px;font-weight:700;color:var(--c-master)}
.offre.vedette{background:var(--nuit);border-color:transparent;color:#fff;box-shadow:0 40px 80px -40px rgba(11,16,32,.6)}
.offre.vedette h3,.offre.vedette .prix{color:#fff}
.offre.vedette .prix small,.offre.vedette ul{color:var(--sur-nuit)}
.offre.vedette li::before{color:var(--or)}
.ruban-offre{position:absolute;top:-12px;left:32px;background:var(--or);color:#16130C;font:600 .75rem var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:6px}
.places{margin-top:16px;min-height:1.5em;font-weight:600;color:#FFD08A}
.apres-prix{text-align:center;margin-top:24px;color:var(--gris)}
.apres-prix strong{color:var(--encre)}
.bouton-nuit{background:var(--nuit);color:#fff}
.bouton-nuit:hover{background:color-mix(in srgb,var(--nuit) 82%,#fff)}

/* Questions fréquentes. */
.faq-liste{max-width:780px;margin-inline:auto;display:grid;gap:8px}
.faq-liste details{background:var(--fond);border:1px solid var(--trait);border-radius:14px;padding:0 24px}
.faq-liste summary{position:relative;list-style:none;cursor:pointer;padding:20px 40px 20px 0;font:400 1.25rem/1.3 var(--serif);color:var(--encre)}
.faq-liste summary::-webkit-details-marker{display:none}
.faq-liste summary::after{content:"+";position:absolute;right:0;top:50%;translate:0 -50%;font:400 1.5rem/1 var(--sans);color:var(--gris);transition:rotate .2s var(--courbe)}
.faq-liste details[open] summary::after{rotate:45deg}
.faq-liste details p{padding-bottom:20px;color:var(--gris);max-width:62ch}

.final .aurore{opacity:.5}
.final .attente{max-width:560px}

/* Sur téléphone, l'invitation reste à portée de pouce. */
.barre-fixe{display:none}

/* Une seule entrée en scène, au chargement : les trois cartes montent l'une après l'autre. */
@media (prefers-reduced-motion:no-preference){
  .carte-app,.eventail .lawy{animation:monte .9s var(--courbe) both}
  .carte-app.c-master{animation-delay:.08s}.carte-app.c-crfpa{animation-delay:.16s}.eventail .lawy{animation-delay:.28s}
  @keyframes monte{from{opacity:0;translate:0 36px}}
  .apparait.attend{opacity:0;translate:0 24px}
  .apparait.attend.vu{opacity:1;translate:none;transition:opacity .7s var(--courbe),translate .7s var(--courbe)}
  .carte-app{transition:transform .5s var(--courbe),box-shadow .3s var(--courbe)}
}

@media (max-width:1100px){
  .heros.portail .contenu{grid-template-columns:1fr}
  .eventail{height:480px;max-width:520px;margin-inline:auto;width:100%}
}
@media (max-width:980px){
  .appli{grid-template-columns:1fr;padding:32px 24px 0}
  .appli img{max-width:180px}
  .appli ul{grid-template-columns:1fr}
  .etapes-parcours{grid-template-columns:1fr}
  .etapes-parcours li,.etapes-parcours li+li{padding:24px 0 0}
  .chiffres-portail{grid-template-columns:1fr 1fr!important}
  .chiffres-portail div{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.1)}
  .lawy-portail .duo{grid-template-columns:1fr}
  .constats,.moments{grid-template-columns:1fr}
  .moment .ecran{min-height:0}
  .offres{grid-template-columns:minmax(0,440px);justify-content:center}
}
@media (max-width:700px){
  .heros.portail{padding-top:112px}
  .heros.portail h1{font-size:2.5rem}
  .eventail{height:400px;transform:scale(.78);transform-origin:top center;margin-bottom:-70px}
  .entete .bouton{display:none}
  .entete nav a.lien.connexion{display:inline}
  .ligne-email{flex-direction:column}
  .constat{padding:24px 24px 24px 28px}
  .etapes-choix .legende{flex-basis:100%}
  .final .etapes-choix .legende{text-align:center}
  .barre-fixe{display:block;position:fixed;inset:auto 0 0 0;z-index:20;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--nuit) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.12);translate:0 110%;transition:translate .3s var(--courbe)}
  .barre-fixe.visible{translate:0}
  .barre-fixe .bouton{width:100%}
  footer{padding-bottom:96px}
}