@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap');

/* ============================================================
   Voyage Agents — charte reprise de la page Voyage-R Renault
   Valeurs relevées sur 2026.animations-r.fr :
     pétrole #105365 · jaune #EFDF00 · teal #0D9D8C · rouge #CC0000
     bandeau noir, angles vifs (aucun border-radius), bandes
     pleine largeur en 32px/72px, grand nombre à 48px.
   La police de marque (NouvelR) est sous licence Renault : elle est
   remplacée par Manrope, de dessin géométrique proche.
   ============================================================ */

:root{
  --noir:#000; --petrole:#105365; --petrole-fonce:#0a3c49; --jaune:#efdf00;
  --teal:#0d9d8c; --teal-fonce:#0a7d70;
  --vert:#1b7f4b; --orange:#e07c00; --rouge:#cc0000;
  --blanc:#fff; --encre:#111; --gris:#5a6a70; --trait:#dfe5e7; --fond:#f2f5f6;
  --bande-x:72px; --bande-y:32px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--encre);
  font:16px/1.5 Manrope,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  font-variant-numeric:tabular-nums}
a{color:var(--teal-fonce);text-decoration:none}
a:hover{text-decoration:underline}
main{max-width:1840px;margin:0 auto;padding:0 0 60px}
h1,h2,h3,h4{font-weight:800;margin:0}

/* ---------- bandeau noir ---------- */
.bandeau{position:relative;z-index:2;display:flex;align-items:center;gap:26px;
  flex-wrap:wrap;background:var(--noir);color:#fff;padding:14px 32px}
/* Le logo du groupe est fourni en noir sur fond transparent : le filtre le
   rend blanc pour le bandeau noir, sans qu'il faille maintenir un second
   fichier. Remplacer le PNG suffit à changer le logo partout. */
.bandeau .marque{display:flex;align-items:center;flex:0 0 auto}
.bandeau .marque img{height:36px;width:auto;display:block;filter:brightness(0) invert(1)}
.bandeau nav{display:flex;gap:20px;flex:1;flex-wrap:wrap}
.bandeau nav a{color:#c9d6da;font-size:14px;font-weight:600}
.bandeau nav a:hover{color:var(--jaune);text-decoration:none}
.bandeau .compte{font-size:13px;color:#c9d6da}
.bandeau .compte a{color:var(--jaune);margin-left:12px;font-weight:600}
.pied{position:relative;z-index:2;text-align:center;color:var(--gris);font-size:12px;padding:24px}

/* ---------- logo Voyage S ---------- */
.logo-voyage{display:block;width:250px;height:auto;margin:0 auto 22px;color:var(--petrole)}
.connexion .logo-voyage{width:230px;margin-bottom:26px}

/* ---------- fond animé ----------
   Le parent doit porter position:relative + overflow:hidden.
   Un voile blanc garantit le contraste du texte posé par-dessus. */
.fond-video{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:#dff0f7}
.fond-video video{width:100%;height:100%;object-fit:cover;display:block}
.fond-video .voile{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.86) 70%,rgba(255,255,255,.96) 100%)}
.fond-video.leger .voile{background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.34) 100%)}
@media (prefers-reduced-motion: reduce){.fond-video video{display:none}}

/* ---------- titre de page ---------- */
.titre-page{position:relative;overflow:hidden;background:var(--blanc);
  padding:36px var(--bande-x) 28px;text-align:center}
.titre-page > *:not(.fond-video){position:relative;z-index:1}
.titre-page h1{font-size:34px;letter-spacing:-.01em}
.titre-page p{margin:8px 0 0;color:var(--gris);font-size:15px}

/* ---------- bandes ---------- */
.bande{padding:var(--bande-y) var(--bande-x);background:var(--blanc)}
.bande.petrole{background:var(--petrole);color:#fff}
.bande.petrole a{color:var(--jaune)}
.bande h2{font-size:24px;margin:0 0 6px}
.bande .intro{color:var(--gris);margin:0 0 20px;font-size:14px}
.bande.petrole .intro{color:#bcd3da}

/* en-tête à trois colonnes, comme la page Voyage-R */
.entete{display:grid;grid-template-columns:1.1fr 1fr 1fr;align-items:stretch}
.entete > div{padding:var(--bande-y) var(--bande-x)}
.entete .total{background:var(--petrole);color:#fff}
.entete .total .nombre{font-size:48px;font-weight:800;line-height:1;display:block}
.entete .total .nombre small{font-size:18px;font-weight:600}
.entete .total .libelle{display:block;font-size:20px;font-weight:700;margin-top:4px}
.entete .total .maj{display:block;margin-top:14px;font-size:13px;color:#bcd3da}
.entete .etat{background:var(--blanc)}
.entete .encouragement{background:var(--jaune);color:#000}
.entete .encouragement h3{font-size:24px;margin:0 0 6px}
.entete .encouragement p{margin:0;font-size:15px}
.entete .chiffre{display:block;font-size:13px;color:var(--gris);text-transform:uppercase;
  letter-spacing:.08em;font-weight:700;margin-bottom:2px}
.entete .chiffre + strong{font-size:22px;font-weight:800;display:block;margin-bottom:16px}

/* ---------- boutons ---------- */
.bouton{display:inline-block;background:var(--teal);color:#fff;border:2px solid var(--teal);
  border-radius:0;padding:11px 18px;font:inherit;font-weight:700;cursor:pointer;
  text-transform:lowercase;line-height:1.2}
.bouton:hover{background:var(--teal-fonce);border-color:var(--teal-fonce);color:#fff;text-decoration:none}
.bouton.secondaire{background:var(--blanc);color:var(--teal-fonce);border-color:var(--teal)}
.bouton.secondaire:hover{background:#eef8f7;color:var(--teal-fonce)}
.bouton.petit{padding:6px 11px;font-size:13px;font-weight:600}
.bouton[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- états ---------- */
.pastille{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-1px}
.pastille.vert{background:var(--vert)} .pastille.orange{background:var(--orange)} .pastille.rouge{background:var(--rouge)}
.etat-mot{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.etat-mot.vert{color:var(--vert)} .etat-mot.orange{color:#a85c00} .etat-mot.rouge{color:var(--rouge)}
.etiquette{display:inline-block;font-size:12px;padding:4px 10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em}
.etiquette.oui{background:#e2f2ea;color:#12603a} .etiquette.non{background:#fbe6e4;color:#9a1c12}
.evo{font-size:13px;font-weight:700}
.evo.h{color:var(--vert)} .evo.b{color:var(--rouge)} .evo.n{color:var(--gris)}

/* ---------- voyage : pictogramme avion ----------
   Disque jaune portant un avion pétrole, dans la teinte des pastilles de
   points. Posé après le nom de l'agent dans le classement, plus grand sur
   la fiche et dans le bandeau de fin de jeu. */
.avion{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:24px;height:24px;border-radius:50%;background:var(--jaune);color:var(--petrole);
  vertical-align:middle;margin-left:8px}
.avion svg{width:15px;height:15px;display:block}
.avion.grand{width:36px;height:36px;margin-left:0}
.avion.grand svg{width:22px;height:22px}
.legende .avion{width:20px;height:20px;margin:0 6px 0 16px}
.legende .avion:first-child{margin-left:0}
.legende .avion svg{width:13px;height:13px}

/* bandeau de fin de jeu : sous le titre, pleine largeur */
.fin-jeu{background:var(--jaune);color:#000;padding:22px var(--bande-x);
  display:flex;align-items:center;gap:20px}
.fin-jeu .avion{width:48px;height:48px;margin:0;background:var(--petrole);color:var(--jaune)}
.fin-jeu .avion svg{width:30px;height:30px}
.fin-jeu strong{display:block;font-size:20px;line-height:1.2}
.fin-jeu p{margin:4px 0 0;font-size:15px}

/* fiche agent : place dans le classement du voyage */
.etat-voyage{display:flex;align-items:center;gap:14px;margin:0 0 20px;
  font-size:16px;font-weight:800;line-height:1.3}
.etat-voyage.neutre{font-size:14px;font-weight:600;color:var(--gris)}

/* ---------- fiche agent : deux colonnes ----------
   Organisation relevée sur le tableau de bord Voyage-R en grand écran :
   une colonne de synthèse à gauche (total, état, encouragement) et le
   détail à droite (pré-requis, bonus, progression, paliers). */
.page-agent{display:grid;grid-template-columns:minmax(300px,29%) minmax(0,1fr);
  gap:38px;padding:34px var(--bande-x) 20px;align-items:start;background:var(--blanc)}
.colonne-resume{display:flex;flex-direction:column;gap:26px}
.colonne-detail{display:flex;flex-direction:column;gap:34px;min-width:0}

.carte-total{background:var(--petrole);color:#fff;padding:32px 34px}
.carte-total .nombre{font-size:46px;font-weight:800;line-height:1;display:block}
.carte-total .nombre small{font-size:18px;font-weight:600}
.carte-total .libelle{display:block;font-size:20px;font-weight:700;margin-top:4px}
.carte-total .maj{display:block;margin-top:16px;font-size:13px;color:#bcd3da}

.carte-etat{padding:2px 4px}
.etat-prerequis{font-size:20px;font-weight:800;margin:0 0 18px;display:flex;
  align-items:center;gap:12px}
.etat-prerequis .pastille{width:18px;height:18px;flex:none}
.reperes{margin:0 0 20px;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:6px 20px;font-size:15px}
.reperes dt{color:var(--gris);text-transform:uppercase;font-size:12px;
  letter-spacing:.08em;font-weight:700;align-self:center}
.reperes dd{margin:0;font-weight:800;font-size:17px}
.reperes dd span{font-weight:600;color:var(--gris);font-size:14px}

.carte-encouragement{background:var(--jaune);color:#000;padding:28px 30px}
.carte-encouragement h3{font-size:24px;margin:0 0 6px}
.carte-encouragement p{margin:0;font-size:15px}

/* bandes de la colonne de droite */
.colonne-detail .bande{padding:32px 40px}
.colonne-detail .bande:not(.petrole) + .bande:not(.petrole){border-top:1px solid var(--trait)}
.tete-bande{display:flex;justify-content:space-between;align-items:flex-start;
  gap:24px;margin:0 0 4px}
.tete-bande h2{font-size:28px;margin:0;line-height:1.15}
.badge-points{background:var(--jaune);color:#000;font-weight:800;font-size:26px;
  line-height:1;padding:17px 26px;white-space:nowrap;margin:-32px -40px 0 0;flex:none}
.badge-points small{font-size:15px;font-weight:700}

/* ---------- pré-requis et bonus : blocs à pictogramme ----------
   Un grand disque portant un pictogramme, puis trois lignes alignées
   sur deux colonnes : libellé / valeur. Aucun filet, aucune jauge. */
.liste-blocs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:44px;row-gap:34px;margin-top:26px}
.bloc{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;
  align-items:center}
.bloc .rond{width:92px;height:92px;border-radius:50%;background:var(--teal);color:#fff;
  display:grid;place-items:center}
.bloc .rond svg{width:46px;height:46px;display:block}
.bloc dl{margin:0;font-size:16px;display:grid;grid-template-columns:auto auto;
  justify-content:start;gap:3px 26px;line-height:1.5}
.bloc dt{margin:0}
.bloc dd{margin:0;white-space:nowrap}
.bloc .nom{font-weight:800}
.bloc .taux{font-weight:800;white-space:nowrap}
.bloc .taux .pastille{margin-right:8px}
.bloc .taux.vert{color:var(--vert)} .bloc .taux.orange{color:#a85c00} .bloc .taux.rouge{color:var(--rouge)}

/* déclinaison sur la bande pétrole : disques cerclés de blanc */
.bande.petrole .bloc .rond{background:transparent;border:2px solid rgba(255,255,255,.55)}
.bande.petrole .bloc .corps{min-width:0}
.bande.petrole .bloc .nom{font-size:17px;margin:0}
.bande.petrole .bloc .points{color:var(--jaune);font-weight:800;font-size:17px;margin:3px 0 5px}
.bande.petrole .bloc .points.nul{color:#8fb0b9}
/* un bonus dont la période est close et qui n'a rien rapporté reste lisible
   mais passe au second plan */
.bande.petrole .bloc.bonus-termine{opacity:.58}
.bande.petrole .bloc.bonus-avenir{opacity:.78}
.bande.petrole .bloc .periode .mention{color:#8fb0b9;font-style:italic}
.bande.petrole .bloc dl{font-size:15px;gap:2px 26px}
.bande.petrole .bloc .periode{margin:4px 0 0;font-size:15px}

@media (max-width:1240px){
  .page-agent{grid-template-columns:1fr;gap:26px;padding-top:26px}
  .colonne-resume{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:0;align-items:stretch}
  .carte-etat{padding:30px 34px;background:var(--blanc)}
  .colonne-detail{gap:26px}
}
@media (max-width:900px){
  .liste-blocs{grid-template-columns:1fr;row-gap:28px}
  .colonne-resume{grid-template-columns:1fr}
  .page-agent{padding-left:0;padding-right:0}
  .colonne-detail .bande{padding-left:var(--bande-x);padding-right:var(--bande-x)}
  .badge-points{margin-right:calc(-1 * var(--bande-x))}
  .tete-bande h2{font-size:23px}
}
@media (max-width:900px){
  .fin-jeu{padding:18px 20px;gap:14px}
  .fin-jeu .avion{width:40px;height:40px}
  .fin-jeu .avion svg{width:25px;height:25px}
}
@media (max-width:560px){
  .bloc{column-gap:16px}
  .bloc .rond{width:66px;height:66px}
  .bloc .rond svg{width:34px;height:34px}
  .bloc dl{font-size:14.5px;column-gap:16px}
  .badge-points{font-size:20px;padding:13px 18px}
}

.legende{font-size:13px;color:var(--gris);margin:6px 0 18px}
.legende .pastille{margin:0 5px 0 16px}
.legende .pastille:first-child{margin-left:0}
.bande.petrole .legende{color:#bcd3da}

/* ---------- tableaux ---------- */
.tableau{overflow-x:auto;border:1px solid var(--trait);background:#fff}
/* `color` est réaffirmé : sans lui, un tableau posé dans une bande pétrole
   hérite du blanc et ses lignes deviennent invisibles sur fond blanc. */
table{width:100%;border-collapse:collapse;background:#fff;color:var(--encre)}
th,td{padding:11px 12px;border-bottom:1px solid var(--trait);text-align:left;vertical-align:middle}
th{background:var(--petrole);color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
td.num,th.num{text-align:right}
tbody tr:hover{background:#f4f9fa}
tfoot th{background:var(--petrole-fonce)}
tr.qualifie td:first-child{box-shadow:inset 4px 0 0 var(--vert)}
tr.moi{background:#fffbdd}
.rang{font-weight:800;font-size:18px;color:var(--petrole)}

/* ---------- formulaires ---------- */
.carte{background:var(--blanc);border:1px solid var(--trait);padding:20px;margin-bottom:18px}
.barre{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-bottom:18px}
label{display:block;font-size:11px;color:var(--gris);text-transform:uppercase;
  letter-spacing:.07em;font-weight:700;margin-bottom:4px}
input,select,textarea{font:inherit;font-size:15px;padding:8px 10px;border:1px solid var(--trait);
  border-radius:0;background:#fff;max-width:100%}
input:focus,select:focus{outline:2px solid var(--teal);outline-offset:-1px}
input[type=number]{text-align:right}
.message{background:#e2f2ea;border-left:4px solid var(--vert);padding:12px 16px;margin-bottom:16px}
.alerte{background:#fbe6e4;border-left:4px solid var(--rouge);padding:12px 16px;margin-bottom:16px}

/* ---------- connexion ---------- */
.connexion{position:relative;min-height:calc(100vh - 66px);display:grid;
  place-items:center;padding:40px 20px}
.connexion .fond-video{position:fixed;inset:0}
.bloc-connexion{position:relative;z-index:1;width:100%;max-width:420px;
  padding:36px 34px 34px;box-shadow:0 20px 50px rgba(10,60,73,.26)}
.connexion h1{font-size:30px;text-align:center}
.connexion .sous{text-align:center;color:var(--gris);margin:8px 0 24px}
.connexion label{margin-top:16px}
.connexion input{width:100%}
.connexion .bouton{width:100%;margin-top:22px;text-transform:none}

/* ---------- graphe de progression ---------- */
.graphe{width:100%;height:220px;display:block}
.graphe .axe{stroke:var(--trait);stroke-width:1}
.graphe .courbe{fill:none;stroke:var(--petrole);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.graphe .point{fill:var(--petrole);stroke:#fff;stroke-width:2}
.graphe text{font-size:11px;fill:var(--gris);font-weight:600}

/* ---------- pages d'administration ----------
   Elles posent leur contenu directement dans <main> plutôt qu'en bandes :
   on leur rend la gouttière horizontale et un peu d'air. */
main > h1{margin:32px var(--bande-x) 4px;font-size:28px}
main > h2{margin:34px var(--bande-x) 12px;font-size:20px}
main > p, main > .carte, main > .tableau, main > form,
main > .message, main > .alerte, main > .barre{
  margin-left:var(--bande-x);margin-right:var(--bande-x)}

/* Un tableau de saisie large reste déroulable horizontalement ; l'ombre à
   droite signale qu'il continue, sinon on croit la colonne coupée. */
.tableau{position:relative;
  background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) left/40px 100% no-repeat,
             linear-gradient(-90deg,#fff 30%,rgba(255,255,255,0)) right/40px 100% no-repeat,
             linear-gradient(90deg,rgba(16,83,101,.16),rgba(16,83,101,0)) left/16px 100% no-repeat,
             linear-gradient(-90deg,rgba(16,83,101,.16),rgba(16,83,101,0)) right/16px 100% no-repeat,
             #fff;
  background-attachment:local,local,scroll,scroll,local}

/* Tableau de saisie compact : les champs occupent toute leur colonne
   plutôt qu'une largeur fixe, ce qui évite de déborder. */
.tableau.compact th,.tableau.compact td{padding:8px 9px}
/* min-width calé sur la plus longue valeur réelle (394 666,82 : neuf signes)
   pour qu'aucun objectif ne s'affiche tronqué. */
.tableau.compact input[type=number]{width:100%;min-width:88px;padding:6px 6px;font-size:13px;
  -moz-appearance:textfield}
/* Les flèches de réglage prennent une quinzaine de pixels et exposent à
   modifier un objectif d'un coup de molette : on les retire. */
.tableau.compact input[type=number]::-webkit-outer-spin-button,
.tableau.compact input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tableau.compact td.centre{text-align:center}
table.agents td.agent{min-width:190px;max-width:260px}
table.agents td.agent small{color:var(--gris);font-size:12px}
table.agents td.identite{min-width:190px}
table.agents td.identite input{width:100%;padding:6px 8px;font-size:14px}
table.agents td.identite input:first-child{margin-bottom:5px}
table.agents .etiquette{padding:1px 6px;font-size:11px;margin-left:4px}

/* Grille de saisie des bonus : autant de colonnes que de bonus, donc
   défilement inévitable. La colonne des agents reste collée à gauche
   pour qu'on sache toujours quelle ligne on est en train de remplir. */
/* En-tête toujours visible. Pour qu'un `position:sticky; top:0` fonctionne,
   il faut que le conteneur défile lui-même verticalement : d'où la hauteur
   maximale. Sans elle, c'est la page qui défile et l'en-tête s'en va. */
.tableau.fige-entete{max-height:72vh;overflow:auto}
.tableau.fige-entete thead th{position:sticky;top:0;z-index:3}
.tableau.fige-entete table.fige thead th.coin{z-index:5}
.tableau.fige-entete table.fige th[scope=row]{z-index:2}

table.fige th[scope=row]{position:sticky;left:0;z-index:2;background:#fff;
  color:var(--encre);text-transform:none;letter-spacing:normal;font-size:14px;
  font-weight:600;text-align:left;min-width:220px;
  box-shadow:1px 0 0 var(--trait), 6px 0 8px -6px rgba(0,0,0,.18)}
table.fige tbody tr:hover th[scope=row]{background:#f4f9fa}
table.fige th.coin{position:sticky;left:0;z-index:3;background:var(--petrole);
  min-width:220px;box-shadow:6px 0 8px -6px rgba(0,0,0,.25)}
table.fige td.num input[type=number]{width:72px;min-width:72px}
main > p.sous{color:var(--gris);margin-top:0;margin-bottom:22px}
main > form > .tableau, main > form > p{margin:0 0 14px}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  :root{--bande-x:28px;--bande-y:24px}
  .entete{grid-template-columns:1fr}
  .titre-page h1{font-size:26px}
  .entete .total .nombre{font-size:40px}
}
@media (max-width:600px){
  :root{--bande-x:18px}
  .bandeau{padding:12px 18px;gap:14px}
  .bandeau nav{gap:14px}
}