/* ==========================================================================
   Le Singe Music v2 : pages de conversion FR (/roster/, /estimer/, /rejoindre/)
   Complète site.css sans le modifier : mêmes jetons, mêmes composants.
   Chargé par une balise <link> dans chaque page (le build n'a pas de métadonnée CSS).
   ========================================================================== */

/* ---------- En-tête de page (sans photo plein écran) ---------- */
.conv-tete{padding-top:calc(var(--tete-h) + clamp(48px, 11vh, 132px))}
.conv-tete-court{padding-bottom:clamp(40px, 7vh, 72px)}
.conv-tete-grille{display:grid;grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr);gap:clamp(32px, 6vw, 110px);align-items:end}
.conv-sur{color:var(--brun);margin-bottom:22px}
.conv-h1{font-family:var(--serif);font-weight:400;color:var(--canard);font-size:clamp(50px, 7.6vw, 132px);line-height:.93;letter-spacing:-.025em}
.conv-h1 em{font-style:italic}
.conv-tete-texte > p{font-weight:300;font-size:18px;max-width:46ch;color:var(--encre-doux)}
@media (max-width:899px){ .conv-tete-grille{grid-template-columns:1fr;gap:28px} }

/* Le cartel : comment lire un code, façon étiquette de galerie */
.cartel{margin-top:32px;background:var(--blanc);padding:18px 20px 20px;border-left:3px solid var(--canard);box-shadow:0 1px 0 rgba(14,13,11,.06), 0 24px 48px -36px rgba(14,13,11,.35)}
.cartel figcaption{color:var(--brun);margin-bottom:14px}
.cartel-grille{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:18px 28px;margin:0}
.cartel-grille div{min-width:0}
.cartel-val{font-family:var(--serif);font-size:clamp(24px, 2vw, 30px);line-height:1.05;color:var(--encre)}
.cartel-val em{font-style:italic}
.code-val{color:var(--canard)}
.cartel-grille dd{margin:8px 0 0;padding-top:8px;border-top:1px solid var(--sable);font-size:13px;line-height:1.4;color:var(--encre-doux)}

/* La phrase de la visio : le moment où le nom se révèle */
.phrase-visio{
  margin-top:clamp(48px, 8vh, 88px);padding-top:22px;border-top:1px solid var(--encre);
  font-family:var(--serif);font-size:clamp(28px, 3.2vw, 52px);line-height:1.1;letter-spacing:-.01em;max-width:28ch;
}
.phrase-visio em{font-style:italic;color:var(--brun)}

/* ---------- Roster : filtres ---------- */
.roster-complet{padding-top:clamp(56px, 9vh, 104px)}
.filtres{display:grid;grid-template-columns:minmax(0, 1fr) auto;gap:18px 32px;align-items:end;padding-bottom:26px;margin-bottom:clamp(24px, 4vh, 40px);border-bottom:1px solid var(--filet)}
.filtre-groupe{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;grid-column:1}
.filtre-titre{color:var(--encre-doux);min-width:72px}
.puces{display:flex;flex-wrap:wrap;gap:8px}
.puce{
  min-height:44px;padding:0 18px;background:transparent;border:1px solid var(--filet-fort);border-radius:999px;
  font-size:15px;line-height:1.2;color:var(--encre);
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .16s var(--ease-out);
}
.puce:active{transform:scale(.97)}
.puce[aria-pressed="true"]{background:var(--canard);border-color:var(--canard);color:var(--creme)}
@media (hover:hover) and (pointer:fine){ .puce[aria-pressed="false"]:hover{border-color:var(--encre);background:var(--blanc)} }
.filtres-compte{grid-column:2;grid-row:1 / span 2;align-self:end;color:var(--brun);white-space:nowrap}
@media (max-width:899px){
  .filtres{grid-template-columns:1fr}
  .filtres-compte{grid-column:1;grid-row:auto}
  .filtre-titre{min-width:0;width:100%}
}

.roster-vide{margin-top:22px;font-size:16px;color:var(--encre-doux)}
.lien-bouton{background:none;border:0;padding:0 2px;min-height:44px;color:var(--brun);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.roster-accord{margin-top:28px;max-width:62ch;font-size:15.5px;font-weight:300;color:var(--encre-doux)}

/* ---------- Roster : fiche + bouton « Proposer ce profil » (posé par conversion.js) ---------- */
.page-roster .liste > li{display:flex;flex-direction:column;scroll-margin-top:calc(var(--tete-h) + 24px)}
.page-roster .ligne-roster:not([href]){cursor:default}
.proposer{
  display:inline-flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;margin-top:12px;padding:10px 14px;
  border:1px solid var(--brun);color:var(--brun);background:transparent;text-decoration:none;
  font-size:14px;font-weight:600;line-height:1.25;
  transition:background-color .2s ease, color .2s ease, transform .16s var(--ease-out);
}
.proposer svg{width:15px;height:15px;flex:none}
.proposer:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .proposer:hover{background:var(--brun);color:var(--blanc)} }
.page-roster .liste > li > .proposer{margin-top:auto;align-self:stretch}
.page-roster .liste > li > .ligne-roster{margin-bottom:12px}
/* Arrivée par un lien /roster/#sm-03 : la fiche est marquée un instant */
@keyframes ficheCible{from{background-color:rgba(219,190,129,.55)}to{background-color:rgba(219,190,129,0)}}
.page-roster .liste > li.cible{animation:ficheCible 2.4s var(--ease-out) both}
@keyframes ficheEntre{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.page-roster .liste > li.entre{animation:ficheEntre .32s var(--ease-out) both}

/* Grand écran à la souris : ligne typographique, signature dessous, bouton à droite */
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  .page-roster .liste > li{display:grid;grid-template-columns:minmax(0, 1fr) 238px;align-items:center;column-gap:28px;padding:4px 0}
  .page-roster .liste > li > .ligne-roster{margin-bottom:0;padding:16px 0 18px}
  .page-roster .liste > li > .proposer{margin-top:0;align-self:center}
  .page-roster .ligne-sig{display:block;margin-top:8px;max-width:64ch;font-size:18px;color:var(--encre-doux);transition:opacity .3s ease}
  .page-roster .liste:hover .ligne-sig{opacity:.4}
  .page-roster .liste .ligne-roster:hover .ligne-sig{opacity:1}
  .page-roster .liste-tete{padding-right:266px}
  .page-roster .liste > li:focus-within .ligne-texte{opacity:1;color:var(--brun)}
  .proposer{font-size:12px;letter-spacing:.1em;text-transform:uppercase}
}

/* ---------- Appel final (roster) ---------- */
.appel{display:grid;grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr);gap:clamp(32px, 6vw, 110px);align-items:end;padding-top:40px;border-top:1px solid var(--encre)}
.appel .label{color:var(--brun);display:block;margin-bottom:18px}
.appel-droite p{font-weight:300;font-size:18px;max-width:40ch;color:var(--encre-doux)}
.appel-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:26px}
@media (max-width:899px){ .appel{grid-template-columns:1fr} }

/* ---------- Estimer : fil des deux temps ---------- */
.conv-fil{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:26px}
.conv-fil a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 6px;border:1px solid var(--filet-fort);text-decoration:none;font-size:15px}
.conv-fil b{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;font-family:var(--serif);font-weight:400;font-size:20px;color:var(--creme);background:var(--canard)}
@media (hover:hover) and (pointer:fine){ .conv-fil a:hover{border-color:var(--encre);background:var(--blanc)} }

/* ---------- Estimer : la grille du brief ---------- */
.brief{padding-bottom:clamp(88px, 14vh, 168px)}
.brief > .form-message{max-width:760px}
.brief-grille{display:grid;grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr);gap:clamp(32px, 5vw, 80px);align-items:stretch}
.brief-col-d{display:flex;flex-direction:column;gap:clamp(40px, 7vh, 72px)}
.sortie-rail{flex:1 1 auto}
.brief-partie{scroll-margin-top:calc(var(--tete-h) + 24px)}
.brief-partie + .brief-partie{margin-top:clamp(64px, 11vh, 120px)}
.brief-titre{
  display:flex;align-items:baseline;gap:16px;padding-bottom:14px;margin-bottom:30px;border-bottom:1px solid var(--encre);
  font-family:var(--serif);font-weight:400;font-size:clamp(32px, 3.2vw, 50px);line-height:1;color:var(--canard);
}
.brief-titre span{font-size:.72em;color:var(--brun)}
.brief-intro{margin:-12px 0 30px;font-size:15.5px;font-weight:300;color:var(--encre-doux);max-width:52ch}
.facultatif{margin-left:8px;font-weight:500;letter-spacing:.12em;color:var(--encre-doux)}
.requis{margin-left:4px}
.cases-perf{gap:0 32px}
.sortie-suite{width:100%;margin-top:18px;color:var(--encre)}
.sortie .btn.sortie-suite{margin-top:18px}
.brief-envoi{margin-top:36px;padding-top:26px;border-top:1px solid var(--filet)}
.brief-envoi .btn{min-height:56px;padding:0 28px}
.brief-envoi .mention a,.brief .mention a{color:inherit;text-underline-offset:3px}
.note-profil{margin:0 0 14px;padding:12px 16px;background:var(--blanc);border-left:3px solid var(--sable);font-size:15px;line-height:1.5}
.note-profil b{font-family:var(--serif);font-weight:400;font-size:20px;color:var(--canard)}

/* En marge : après l'envoi */
.apres{padding-top:18px;border-top:1px solid var(--encre)}
.apres h2{color:var(--brun);margin-bottom:6px}
.apres ol{counter-reset:none}
.apres li{display:grid;grid-template-columns:40px minmax(0, 1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--filet)}
.apres li b{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1;color:var(--brun)}
.apres li p{font-size:15.5px;line-height:1.55;color:var(--encre-doux)}
.apres li strong{font-weight:600;color:var(--encre)}
.apres-wa{margin-top:26px}
.apres-wa p{font-size:15.5px;font-weight:300;color:var(--encre-doux);margin-bottom:4px}

/* Mobile : la fourchette s'intercale entre la soirée et les coordonnées */
@media (max-width:899px){
  .brief-grille{display:flex;flex-direction:column;gap:0}
  .brief-col,.sortie-rail{display:contents}
  .brief-config{order:1}
  .sortie{order:2;margin-top:48px}
  .brief-coord{order:3;margin-top:72px}
  .apres{order:4;margin-top:72px}
}

/* ---------- Erreurs de saisie (conversion.js) ---------- */
.erreur{display:block;margin-top:8px;font-size:14px;font-weight:500;color:#A4260B}
.entree[aria-invalid="true"]{border-bottom:2px solid #A4260B;margin-bottom:-1px}
.form-message a{color:inherit;text-underline-offset:3px}

/* ---------- Rejoindre : l'affiche et le parcours ---------- */
.recrue-grille{display:grid;grid-template-columns:minmax(0, 1.35fr) minmax(0, .75fr);gap:clamp(40px, 7vw, 120px);align-items:center}
.recrue-intro{margin-top:26px;font-weight:300;font-size:18px;max-width:48ch;color:var(--encre-doux)}
.recrue-btn{margin-top:34px}
/* L'affiche : le singe punaisé, légèrement de travers */
.affiche{padding:12px 12px 0;transform:rotate(1.6deg);transform-origin:50% 0;transition:transform .6s var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .affiche:hover{transform:rotate(0deg)} }
.affiche-fond{position:relative;background:var(--sable);overflow:hidden;aspect-ratio:541/640}
.affiche-fond::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--grain);background-size:180px;opacity:.18;mix-blend-mode:soft-light}
.affiche-fond img{position:absolute;left:4%;bottom:0;width:92%;height:auto}
.affiche .legende{align-items:baseline}
.affiche .legende span:first-child{white-space:nowrap;font-family:var(--serif);font-style:italic;font-size:17px;letter-spacing:0;text-transform:none;color:var(--encre)}
@media (max-width:899px){
  .recrue-grille{grid-template-columns:1fr}
  .affiche{max-width:300px;transform:rotate(1.2deg)}
}
@media (max-width:560px){ .affiche{max-width:260px} }

/* Ce qu'on attend / ce que l'agence t'apporte */
.donnant{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px, 6vw, 110px)}
.donnant-col{padding-top:22px;border-top:1px solid var(--encre)}
.donnant-col > .label{color:var(--brun);display:block;margin-bottom:16px}
.donnant-titre{font-family:var(--serif);font-weight:400;font-size:clamp(34px, 3.4vw, 56px);line-height:1;color:var(--canard);letter-spacing:-.015em}
.donnant-titre em{font-style:italic}
.donnant-liste{margin-top:26px}
.donnant-liste li{padding:16px 0;border-bottom:1px solid var(--filet);font-size:16.5px;font-weight:300;line-height:1.55;color:var(--encre-doux)}
.donnant-liste b{display:block;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.15;color:var(--encre);margin-bottom:4px}
@media (max-width:899px){ .donnant{grid-template-columns:1fr} }

/* La candidature */
.candidature{display:grid;grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);gap:clamp(40px, 7vw, 120px);align-items:start;padding-top:40px;border-top:1px solid var(--encre)}
.candidature-cote{position:sticky;top:calc(var(--tete-h) + 32px)}
.candidature-cote > .label{color:var(--brun);display:block;margin-bottom:18px}
.candidature-cote > p{margin-top:22px;font-weight:300;font-size:17px;max-width:40ch;color:var(--encre-doux)}
.candidature-form{scroll-margin-top:calc(var(--tete-h) + 24px)}
.radios-deux{grid-template-columns:repeat(2, 1fr)}
@media (max-width:899px){
  .candidature{grid-template-columns:1fr}
  .candidature-cote{position:relative;top:auto}
  .radios-deux{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){ .radios-deux{grid-template-columns:1fr} }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce){
  .page-roster .liste > li.entre,.page-roster .liste > li.cible{animation:none}
  .affiche{transition:none}
  .puce,.proposer{transition:none}
}