*{box-sizing:border-box}
body{margin:0;background:#F6F5F9;color:#15142A;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
input::placeholder,textarea::placeholder{color:#8C8BA6}
/* IBM Plex Mono alignait jusqu'ici les références, les compteurs et les
   dates. Inter la remplace partout : ses chiffres tabulaires rendent
   cet alignement, que des colonnes de nombres perdraient sinon. */
body{font-variant-numeric:tabular-nums}
html,body{height:100%;overflow:hidden}
a{color:#E8432D;text-decoration:none}
a:hover{color:#c4331e}
::selection{background:rgba(232,67,45,.16)}
:focus-visible{outline:2px solid #E8432D;outline-offset:2px}
input,textarea,select,button{font:inherit;color:inherit}
[data-view="demandes"] [data-tab="demandes"],[data-view="demande-detail"] [data-tab="demandes"],[data-view="devis"] [data-tab="demandes"],[data-view="candidats"] [data-tab="candidats"],[data-view="candidat-detail"] [data-tab="candidats"],[data-view="cvtheque"] [data-tab="cvtheque"],[data-view="offres"] [data-tab="offres"],[data-view="offre-edit"] [data-tab="offres"],[data-view="comptes"] [data-tab="comptes"],[data-view="compte-edit"] [data-tab="comptes"],[data-view="stats"] [data-tab="stats"]{background:#fff;color:#15142A;box-shadow:0 1px 0 #E7E6EF,0 10px 24px -18px rgba(21,20,42,.5)}
[data-view="cvtheque"] [data-side="cvtheque"],[data-view="offres"] [data-side="offres"],[data-view="offre-edit"] [data-side="offres"],[data-view="comptes"] [data-side="comptes"],[data-view="compte-edit"] [data-side="comptes"]{background:rgba(232,67,45,.14);color:#FFFFFF;position:relative}
[data-view="notifs"] [data-side="notifs"],[data-view="dash"] [data-side="dash"],[data-view="demandes"] [data-side="demandes"],[data-view="demande-detail"] [data-side="demandes"],[data-view="devis"] [data-side="demandes"],[data-view="candidats"] [data-side="candidats"],[data-view="candidat-detail"] [data-side="candidats"],[data-view="stats"] [data-side="stats"]{background:rgba(232,67,45,.14);color:#FFFFFF;position:relative}
[data-h]{display:none}
[data-view="notifs"] [data-h="notifs"],[data-view="dash"] [data-h="dash"],[data-view="demandes"] [data-h="demandes"],[data-view="candidats"] [data-h="candidats"],[data-view="cvtheque"] [data-h="cvtheque"],[data-view="offres"] [data-h="offres"],[data-view="comptes"] [data-h="comptes"],[data-view="stats"] [data-h="stats"],[data-view="demande-detail"] [data-h="demande-detail"],[data-view="candidat-detail"] [data-h="candidat-detail"],[data-view="mon-compte"] [data-h="mon-compte"],[data-view="offre-edit"] [data-h="offre-edit"],[data-view="devis"] [data-h="devis"],[data-view="compte-edit"] [data-h="compte-edit"]{display:block}
@keyframes gmoPulse{0%{box-shadow:0 0 0 0 rgba(31,122,76,.5)}70%{box-shadow:0 0 0 8px rgba(31,122,76,0)}100%{box-shadow:0 0 0 0 rgba(31,122,76,0)}}

/* Bloc repliable « Version anglaise » de l'écran Modifier l'offre. Le
   <summary> étant en flex, le marqueur natif disparaît selon les
   navigateurs : on le remplace par un signe explicite, placé en fin de
   ligne comme dernier élément flex. */
summary{list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:Inter,system-ui,sans-serif;font-size:17px;line-height:1;color:#8C8BA6;flex:none}
details[open] summary::after{content:"\2212"}
summary:hover::after{color:#15142A}

[data-screen]{display:none}
[data-view="notifs"] [data-screen="notifs"],[data-view="dash"] [data-screen="dash"],[data-view="demandes"] [data-screen="demandes"],[data-view="candidats"] [data-screen="candidats"],[data-view="offres"] [data-screen="offres"],[data-view="cvtheque"] [data-screen="cvtheque"],[data-view="demande-detail"] [data-screen="demande-detail"],[data-view="candidat-detail"] [data-screen="candidat-detail"],[data-view="comptes"] [data-screen="comptes"],[data-view="stats"] [data-screen="stats"],[data-view="mon-compte"] [data-screen="mon-compte"],[data-view="offre-edit"] [data-screen="offre-edit"],[data-view="devis"] [data-screen="devis"],[data-view="compte-edit"] [data-screen="compte-edit"]{display:block}

/* pre-auth stage (login / forgot password / authenticated app) and role
   gating (Comptes is administrator-only) are driven entirely by
   backoffice-script.js setting inline `display` — several of the
   elements involved (the sidebar link, the pre-auth screens) already
   carry an inline `display` of their own, which would silently beat any
   attribute-selector rule added here, so the toggling lives in JS
   instead of CSS for those. */

.app-shell{height:100vh;min-height:0!important;overflow:hidden!important}
.app-sidebar{z-index:2}
.app-workspace{height:100vh;min-height:0;display:flex;flex-direction:column}
/* L'en-tête de la maquette flotte au-dessus du contenu qui défile :
   fond translucide, flou d'arrière-plan et filet de séparation. Le
   contenu défilant est .app-content, pas la page, donc `sticky` n'a
   rien à quoi s'accrocher ici — l'en-tête reste simplement au-dessus
   dans l'ordre de pile, ce qui donne le même résultat à l'écran. */
.app-header{flex:none;background:rgba(246,245,249,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #E7E6EF;position:relative;z-index:1}
.app-content{flex:1;min-height:0;overflow-y:auto;overflow-x:auto;scrollbar-gutter:stable}

.app-sidebar{transition:width .2s ease,padding .2s ease}
.app-sidebar[data-collapsed="true"]{width:84px!important;padding:30px 16px!important}
.app-sidebar[data-collapsed="true"] #sidebar-logo-row{justify-content:center;padding:0 0 24px}
.app-sidebar[data-collapsed="true"] #sidebar-brand-text{display:none}
.app-sidebar[data-collapsed="true"] nav a{justify-content:center;padding:12px!important}
.app-sidebar[data-collapsed="true"] nav a>span:first-of-type{display:none}
.app-sidebar[data-collapsed="true"] nav a>span:last-of-type{display:none}
.app-sidebar[data-collapsed="true"]>div[style*="flex:1"]{display:none}
.app-sidebar[data-collapsed="true"]>div[style*="rgba(255,255,255,.06)"]{display:none}
.app-sidebar[data-collapsed="true"]>a[href="backoffice-mobile.html"] span,
.app-sidebar[data-collapsed="true"]>a[href="index.html"] span{display:none}
.app-sidebar[data-collapsed="true"]>a[href="backoffice-mobile.html"],
.app-sidebar[data-collapsed="true"]>a[href="index.html"]{justify-content:center}
#sidebar-toggle-icon{transition:transform .2s ease}
.app-sidebar[data-collapsed="true"] #sidebar-toggle-icon{transform:rotate(180deg)}
/* --- Zone de compte, barre rabattue ---------------------------------
   À 84px de large, encadrer un avatar de 38px l'étouffe, et poser la
   déconnexion à côté de lui les fait se chevaucher. La carte perd donc
   son habillage : il ne reste que l'avatar, puis la déconnexion
   dessous, taillée comme les icônes de navigation pour que le rail
   garde son rythme.

   Ces deux boutons portent un `display` en ligne, qui bat n'importe
   quelle règle de feuille de style : c'est pourquoi la règle
   `display:none` qui précédait ne masquait rien. Les !important
   ci-dessous reprennent la main, et se limitent aux propriétés que
   l'état de survol ne touche pas — il s'applique lui aussi en ligne,
   et un !important sur border-color ou color le neutraliserait. */
.app-sidebar[data-collapsed="true"] #sidebar-account-row{
	flex-direction:column;
	gap:10px;
	padding:14px 0 4px!important;
	margin-top:10px;
	background:transparent;
	border:0;
	border-top:1px solid rgba(255,255,255,.09);
	border-radius:0;
}
.app-sidebar[data-collapsed="true"] #sidebar-account-text{display:none}
.app-sidebar[data-collapsed="true"] #sidebar-account-row [data-user-btn]{flex:none;justify-content:center;width:100%}
.app-sidebar[data-collapsed="true"] #sidebar-account-row [data-action="logout"]{
	display:grid!important;
	width:40px!important;
	height:40px!important;
	border-radius:12px!important;
}
/* 14px se perdait dans un bouton de 40px ; 17px donne à la porte et à
   la flèche de quoi se distinguer l'une de l'autre. */
.app-sidebar[data-collapsed="true"] #sidebar-account-row [data-action="logout"] svg{width:17px;height:17px}

.cvtheque-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
.cvtheque-card{display:flex;flex-direction:column;height:100%}
.cvtheque-card-tags{max-height:76px;overflow-y:auto}
.cvtheque-card-footer{margin-top:auto;padding-top:18px}
@media (max-width:1500px){.cvtheque-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1100px){.cvtheque-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.cvtheque-grid{grid-template-columns:1fr}}

@media (max-width:900px){
	.app-sidebar{width:210px!important;padding:22px 14px!important}
	.app-content{padding-left:24px!important;padding-right:24px!important}
}

@media (max-width:700px){
	html,body{overflow:auto}
	.app-shell{height:auto;min-height:100vh!important;overflow:visible!important;display:block!important}
	.app-sidebar{width:100%!important;height:auto!important;position:relative!important;border-radius:0!important;padding:16px!important}
	.app-sidebar nav{flex-direction:row;overflow-x:auto;padding-bottom:2px}
	.app-sidebar nav a{flex:none;padding:10px!important}
	.app-sidebar nav a>span:first-of-type{display:none}
	.app-sidebar nav a>span:last-of-type{display:none}
	.app-sidebar>div[style*="flex:1"]{display:none}
	.app-sidebar>div[style*="rgba(255,255,255,.06)"]{display:none}
	.app-sidebar>a[href="index.html"]{display:none}
	.app-workspace{height:auto;min-height:calc(100vh - 88px)}
	.app-header{padding-top:22px!important}
	.app-content{overflow:visible;flex:none}
}

/* --- Habillage de la barre latérale, repris de la maquette ---------
   Lueur orange en bas à gauche et filigrane : purement décoratifs, donc
   posés en pseudo-éléments plutôt qu'en balises, et neutres au clic. */
.app-sidebar::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 40% at 0% 100%,rgba(232,67,45,.16),rgba(232,67,45,0) 70%);pointer-events:none;z-index:0}
.app-sidebar>*{position:relative;z-index:1}

/* Le repère vertical orange de l'onglet courant. Les règles [data-side]
   actives posent position:relative, ce qui donne son référentiel à ce
   ::before ; la barre déborde dans le padding de 22px de l'aside. */
.app-sidebar nav a[data-side]::before{content:"";position:absolute;left:-22px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:transparent;transition:background .25s}
[data-view="notifs"] [data-side="notifs"]::before,[data-view="dash"] [data-side="dash"]::before,[data-view="demandes"] [data-side="demandes"]::before,[data-view="demande-detail"] [data-side="demandes"]::before,[data-view="devis"] [data-side="demandes"]::before,
[data-view="candidats"] [data-side="candidats"]::before,[data-view="candidat-detail"] [data-side="candidats"]::before,
[data-view="cvtheque"] [data-side="cvtheque"]::before,
[data-view="offres"] [data-side="offres"]::before,[data-view="offre-edit"] [data-side="offres"]::before,
[data-view="comptes"] [data-side="comptes"]::before,[data-view="compte-edit"] [data-side="comptes"]::before,
[data-view="stats"] [data-side="stats"]::before{background:#E8432D}

/* Repliée, la barre n'a plus que 16px de marge intérieure. */
.app-sidebar[data-collapsed="true"] nav a[data-side]::before{left:-16px}
/* Les liens inactifs ont besoin du même référentiel, sans quoi leur
   repère (transparent) irait s'ancrer sur l'aside. */
.app-sidebar nav a[data-side]{position:relative}
/* En bandeau horizontal sous 700px, un repère vertical n'a plus de sens. */
@media (max-width:700px){.app-sidebar nav a[data-side]::before{display:none}}

/* Pastille verte du bandeau de bienvenue : la meme respiration que
   le point « Vivier », mais en halo plutot qu'en ombre portee. */
@keyframes gmoPulseDot{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.7);opacity:0}}

/* Intertitres de navigation : ils nomment les groupes quand la barre est
   dépliée et n'ont plus rien à qualifier une fois réduite au rail. */
.app-sidebar[data-collapsed="true"] .side-head{display:none}
@media (max-width:700px){.side-head{display:none}}

/* Orbite de l'écran de connexion : rotation lente du cercle pointillé et
   lumière qui parcourt chaque rayon vers l'extérieur. */
@keyframes gmoSpin{to{transform:rotate(360deg)}}
@keyframes gmoFlow{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}

/* Sous 900px la colonne de gauche disparaît : l'orbite n'a plus la place
   de se déployer et le formulaire prend toute la largeur. */
@media (max-width:900px){#screen-login>div:first-child{display:none!important}}

/* Sous 700px la barre devient un bandeau horizontal. Une version
   mobile dédiée prend normalement le relais, mais on peut arriver ici
   en ayant choisi de rester sur le bureau : la zone de compte y
   reprend alors sa disposition en ligne, pour ne pas allonger le
   bandeau d'une rangée inutile. */
@media (max-width:700px){
	.app-sidebar[data-collapsed="true"] #sidebar-account-row{
		flex-direction:row;
		justify-content:center;
		border-top:0;
		margin-top:0;
		padding:8px 0!important;
	}
	.app-sidebar[data-collapsed="true"] #sidebar-account-row [data-user-btn]{width:auto}
}

/* Entrée des lignes de liste, décalée d'une ligne à l'autre : la
   maquette fait monter chaque rangée de quelques pixels à l'affichage.
   Nommée gRise comme dans la maquette, pour qu'on la retrouve. */
@keyframes gRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Un lecteur qui demande moins de mouvement n'a que faire d'une
   cascade d'entrées : on la lui épargne sans rien changer d'autre. */
@media (prefers-reduced-motion:reduce){
	[data-row]{animation:none!important}
	.app-sidebar::before{display:none}
}

/* --- Panneau latéral de détail --------------------------------------
   Le voile et le volet passent de display:none à affiché : leur
   animation se rejoue à chaque ouverture, sans qu'on ait à poser puis
   retirer une classe. */
@keyframes gSlide{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes gFade{from{opacity:0}to{opacity:1}}
#drawer-overlay{animation:gFade .25s both}
#drawer{animation:gSlide .35s cubic-bezier(.2,.7,.2,1) both}

/* Sur un écran étroit, le volet prend toute la largeur : à 560px il
   déborderait, et un volet à moitié visible ne se lit pas. */
@media (max-width:620px){
	#drawer{width:100vw!important}
	#drawer [data-action="drawerOpenFull"]{margin-left:0!important;width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
	#drawer,#drawer-overlay{animation:none}
}