/* ============================================
   ITBS — page Offres de PFE (pfe.html) : « PFE Marketplace ».
   Bannière compacte aux couleurs de l'affiche de l'événement ; le reste reprend les couleurs et la
   police de css/style.css. Aucune ombre sur cette page (demande de l'école).
   Contenu généré par js/pfe.js depuis stagespfe.json ; fiche d'une offre en fenêtre modale.
   ============================================ */
:root {
  --encre: #111827;
  --texte: #374151;
  --discret: #6B7280;
  --accent: #4F46E5;
  --accent-fonce: #4338CA;
  --accent-clair: #EEF2FF;
  --bord: #E5E7EB;
  --fond: #FFFFFF;
  --fond-alt: #F9FAFB;
  --rayon: 16px;
  /* Couleurs de l'affiche PFE Marketplace */
  --degrade-pfe: linear-gradient(90deg, #FFD60A 0%, #FF8A00 35%, #FF2E93 75%, #D946EF 100%);
  --degrade-bouton: linear-gradient(90deg, #FF8A00 0%, #FF2E93 55%, #D946EF 100%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; scrollbar-gutter: stable; }
html.fiche-ouverte { overflow: hidden; }
body {
  margin: 0;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--texte);
  background: var(--fond);
  line-height: 1.6;
  font-size: 16px;
}
a { color: var(--accent); }
h1, h2, h3 { color: var(--encre); line-height: 1.25; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #A5B4FC; outline-offset: 2px; }

.conteneur { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 16px; top: -60px; z-index: 20; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.evitement:focus { top: 12px; }

/* ---- Barre du haut ---- */
.barre { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--bord); }
.barre-contenu { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 12px; }
.logo img { height: 40px; display: block; }
.barre-liens { display: flex; align-items: center; gap: 20px; }
.lien-offres { color: var(--texte); text-decoration: none; font-weight: 600; }
.lien-offres:hover { color: var(--accent); }

/* ---- Boutons ---- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 10px; border: 1.5px solid transparent;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, filter .15s;
}
.bouton-petit { padding: 8px 14px; font-size: 14px; }
.bouton-contour { background: #fff; color: var(--accent); border-color: var(--accent); }
.bouton-contour:hover { background: var(--accent-clair); }
.bouton-degrade { margin-top: 28px; background: var(--degrade-bouton); color: #fff; border: 0; border-radius: 999px; padding: 8px 8px 8px 24px; gap: 14px; font-size: 17px; }
.bouton-degrade:hover { filter: brightness(1.08); }
.rond-fleche { width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); display: grid; place-items: center; font-size: 14px; }
.bouton[aria-disabled="true"] { background: #E5E7EB; color: #6B7280; border-color: #E5E7EB; cursor: not-allowed; }
.lien-bouton { background: none; border: 0; padding: 6px 0; color: var(--accent); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.lien-bouton:hover { text-decoration: underline; }

/* ---- Bannière compacte : couleurs de l'affiche « PFE Marketplace », photo des étudiants en fond ---- */
.hero {
  position: relative; overflow: hidden; padding: 64px 0 68px; color: #F3E8FF;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(236,72,153,.35) 0%, transparent 55%),
    linear-gradient(135deg, #1A0533 0%, #34095A 55%, #5B0E7A 100%);
}
/* La photo occupe la droite et se fond dans le violet des deux côtés, sans cadre. Son bord droit s'arrête
   au niveau du contenu de la page (filtres, bouton « Retour au site ») : 1180px et 24px = largeur et
   marge de .conteneur. */
.hero-photo {
  position: absolute; top: 0; bottom: 0; right: max(24px, calc((100% - 1180px) / 2 + 24px)); width: min(46%, 600px);
  background: url('../images/pfe-marketplace.jpg') center 28% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%, #000 85%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 55%, #000 85%, transparent 100%);
}
.hero-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(52,9,90,.5), rgba(91,14,122,.12)); }
.hero-contenu { position: relative; z-index: 1; }
.surtitre { text-transform: uppercase; letter-spacing: .12em; font-weight: 600; color: #F0ABFC; margin: 0 0 10px; font-size: 13px; }
.titre-evenement { margin: 0 0 14px; font-size: clamp(26px, 8vw, 68px); line-height: 1.05; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; color: #fff; white-space: nowrap; }
.titre-pfe { display: inline-block; background: var(--degrade-pfe); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-description { font-size: 17px; max-width: 560px; margin: 0; color: #E9D5FF; }

/* ---- Section des offres ---- */
.section { padding: 32px 0 72px; }

/* Recherche et filtres */
.recherche { background: var(--fond-alt); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 20px; margin-bottom: 20px; }
.ligne-recherche { display: flex; gap: 12px; }
.champ-recherche { position: relative; flex: 1; }
.champ-recherche i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--discret); }
.champ-recherche input { width: 100%; font: inherit; font-size: 16px; color: var(--encre); padding: 14px 16px 14px 44px; border: 1px solid #D1D5DB; border-radius: 12px; background: #fff; }
.champ-recherche input:focus, select:focus { outline: 3px solid var(--accent-clair); outline-offset: 0; border-color: var(--accent); }
.bouton-filtres { display: none; align-items: center; gap: 8px; font: inherit; font-weight: 600; color: var(--encre); background: #fff; border: 1px solid #D1D5DB; border-radius: 12px; padding: 0 16px; cursor: pointer; }
.pastille { background: var(--accent); color: #fff; border-radius: 999px; padding: 0 8px; font-size: 12px; line-height: 20px; }
.filtres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
.champ label { display: block; font-size: 13px; font-weight: 600; color: var(--encre); margin: 0 0 6px; }
select { width: 100%; font: inherit; font-size: 15px; color: var(--encre); padding: 10px 12px; border: 1px solid #D1D5DB; border-radius: 10px; background: #fff; cursor: pointer; }
.filtres-bas { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.case { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.case input { width: 18px; height: 18px; accent-color: var(--accent); }

/* Nombre de résultats, offres par page, cartes / liste */
.barre-resultats { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.compteur { margin: 0; font-weight: 600; color: var(--encre); }
.outils { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.outil-par-page { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--discret); }
.outil-par-page select { width: auto; padding: 6px 10px; font-size: 14px; }
.bascule-vue { display: inline-flex; border: 1px solid #D1D5DB; border-radius: 10px; overflow: hidden; }
.bascule-vue button { font: inherit; font-size: 14px; font-weight: 600; color: var(--texte); background: #fff; border: 0; padding: 8px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.bascule-vue button + button { border-left: 1px solid #D1D5DB; }
.bascule-vue button[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* ---- Offres : vue cartes (l'entreprise, puis l'intitulé) ---- */
.resultats { display: grid; gap: 20px; }
.vue-cartes { grid-template-columns: repeat(3, 1fr); }
.vue-liste { display: block; }
.carte-offre {
  position: relative; background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 22px; display: flex; flex-direction: column; gap: 10px;
  transition: transform .2s, border-color .2s;
  animation: apparaitre .35s ease both;
}
.carte-offre:hover { transform: translateY(-3px); border-color: #A5B4FC; }
.carte-offre:focus-within { border-color: var(--accent); }
@keyframes apparaitre { from { opacity: 0; transform: translateY(8px); } }
.offre-haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.offre-entreprise { margin: 0; font-weight: 700; font-size: 15px; color: var(--accent); display: flex; align-items: center; gap: 8px; }
.carte-offre h3 { margin: 0; font-size: 19px; font-weight: 400; }
.offre-lien { color: var(--encre); text-decoration: none; }
.carte-offre .offre-lien::after { content: ""; position: absolute; inset: 0; border-radius: var(--rayon); }
.carte-offre .offre-lien:focus-visible { outline: none; }
.carte-offre .offre-lien:focus-visible::after { outline: 3px solid #A5B4FC; outline-offset: 2px; }
.offre-infos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; color: var(--discret); font-size: 14px; }
.offre-infos li { display: flex; align-items: center; gap: 8px; }
.offre-infos i { width: 16px; text-align: center; color: #9CA3AF; }
.offre-voir { margin-top: auto; padding-top: 6px; color: var(--accent); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.offre-voir i { transition: transform .2s; }
.carte-offre:hover .offre-voir i { transform: translateX(3px); }
.carte-offre.est-expiree { background: var(--fond-alt); }
.carte-offre.est-expiree h3, .carte-offre.est-expiree .offre-lien { color: var(--discret); }

/* Étiquettes : domaine et échéance */
.domaine { background: var(--accent-clair); color: var(--accent); border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 600; }
.echeance { border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 600; background: #ECFDF5; color: #047857; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.echeance.proche { background: #FFFBEB; color: #B45309; }
.echeance.urgente { background: #FEF2F2; color: #B91C1C; }
.echeance.expiree { background: #F3F4F6; color: #4B5563; }

/* ---- Offres : vue liste = tableau (Entreprise | Intitulé du PFE | Domaine | Localisation | Clôture) ---- */
.tableau-offres { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; font-size: 15px; }
.tableau-offres th { text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--discret); background: var(--fond-alt); padding: 12px 16px; border-bottom: 1px solid var(--bord); }
.tableau-offres td { padding: 14px 16px; border-bottom: 1px solid var(--bord); vertical-align: middle; }
.tableau-offres tbody tr:last-child td { border-bottom: 0; }
.tableau-offres tbody tr { cursor: pointer; transition: background .15s; }
.tableau-offres tbody tr:hover { background: var(--accent-clair); }
.col-entreprise { font-weight: 700; color: var(--encre); width: 20%; }
.col-entreprise i { color: var(--accent); margin-right: 8px; }
.col-intitule { width: 36%; }
.col-intitule .offre-lien:hover { color: var(--accent); text-decoration: underline; }
.col-domaine .domaine { display: inline-block; border-radius: 8px; }
.col-lieu { color: var(--discret); }
.tableau-offres tr.est-expiree td, .tableau-offres tr.est-expiree .offre-lien { color: var(--discret); }

/* ---- Messages ---- */
.etat { background: #fff; border: 1px dashed #D1D5DB; border-radius: var(--rayon); padding: 40px 24px; text-align: center; color: var(--discret); font-size: 17px; }
.etat i { display: block; font-size: 30px; color: #C7D2FE; margin-bottom: 12px; }
.etat p { margin: 0 0 12px; }
.etat .lien-bouton { font-size: 16px; }
.chargement { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.chargement span { height: 210px; border-radius: var(--rayon); background: linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%); background-size: 200% 100%; animation: reflet 1.4s linear infinite; }
@keyframes reflet { to { background-position: -200% 0; } }

/* ---- Pagination ---- */
.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 32px; }
.pagination button { font: inherit; font-weight: 600; font-size: 15px; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid #D1D5DB; background: #fff; color: var(--texte); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.pagination button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pagination button[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.pagination button:disabled { opacity: .45; cursor: not-allowed; }
.pagination .ellipse { color: var(--discret); padding: 0 4px; }
.pagination .resume { flex-basis: 100%; text-align: center; color: var(--discret); font-size: 14px; margin: 6px 0 0; }

/* ---- Fiche d'une offre : fenêtre modale (couleurs de la bannière, sans ombre) ---- */
.fiche {
  width: min(940px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  padding: 0; border: 0; border-radius: 20px; overflow: hidden; background: #fff; color: var(--texte);
}
.fiche[open] { display: flex; flex-direction: column; animation: ouvrir .22s ease; }
.fiche::backdrop { background: rgba(26,5,51,.62); }
@keyframes ouvrir { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* En-tête : le violet et le magenta de la bannière « PFE Marketplace » */
.fiche-entete {
  position: relative; flex: none; padding: 26px 76px 24px 30px; color: #F3E8FF;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(236,72,153,.42) 0%, transparent 55%),
    linear-gradient(135deg, #1A0533 0%, #34095A 55%, #5B0E7A 100%);
}
.fiche-entete .etiquettes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.fiche-entete .domaine { background: rgba(255,255,255,.14); color: #fff; }
.fiche-entete h2 { color: #fff; font-size: clamp(22px, 3vw, 30px); margin: 0 0 10px; }
.fiche-entreprise { margin: 0; font-size: 17px; font-weight: 600; color: #F0ABFC; display: flex; align-items: center; gap: 10px; }
.fiche-fermer { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 10px; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 18px; cursor: pointer; display: grid; place-items: center; }
.fiche-fermer:hover { background: rgba(255,255,255,.24); }

.fiche-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px 30px 30px; }
.fiche-vide { margin: 0; font-size: 17px; color: var(--discret); }
.alerte-expiree { display: flex; gap: 12px; align-items: flex-start; background: #F3F4F6; border: 1px solid #D1D5DB; border-radius: 12px; padding: 14px 18px; margin: 0 0 22px; color: #374151; }
.alerte-expiree i { color: #6B7280; margin-top: 4px; }

/* Informations clés en tuiles, d'un coup d'œil : une seule rangée (cinq tuiles au plus) */
.fiche-cles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin: 0 0 28px; }
.cle { margin: 0; padding: 12px; background: var(--fond-alt); border: 1px solid var(--bord); border-radius: 12px; }
.cle dt { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--discret); }
.cle dt i { color: var(--accent); font-size: 13px; }
.cle dd { margin: 0; font-size: 15px; font-weight: 700; color: var(--encre); line-height: 1.35; }
.cle dd small { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--discret); }
.cle.echeance-ouverte dd small { color: #047857; }
.cle.echeance-proche { background: #FFFBEB; border-color: #FDE68A; }
.cle.echeance-proche dd small { color: #B45309; }
.cle.echeance-urgente { background: #FEF2F2; border-color: #FECACA; }
.cle.echeance-urgente dd small { color: #B91C1C; }

/* Contenu à gauche, contact à droite */
.fiche-grille { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; align-items: start; }
.fiche-grille > :only-child { grid-column: 1 / -1; }
.fiche-bloc { margin-bottom: 26px; }
.fiche-bloc:last-child { margin-bottom: 0; }
.fiche-bloc h3 { font-size: 17px; margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
.fiche-bloc h3 i, .a-propos summary > i:first-child { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; color: var(--accent); background: var(--accent-clair); }
.fiche-bloc p { margin: 0; white-space: pre-line; line-height: 1.7; }
.fiche-bloc ul { margin: 0; padding-left: 22px; }
.fiche-bloc li { margin-bottom: 6px; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0 !important; }
.puces li { margin: 0; background: #F3F4F6; color: var(--encre); border-radius: 999px; padding: 5px 12px; font-size: 14px; font-weight: 500; }

/* « À propos de l'entreprise » : repliable, fermé par défaut */
.a-propos { border: 1px solid var(--bord); border-radius: 12px; }
.a-propos summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; font-weight: 700; color: var(--encre); }
.a-propos summary::-webkit-details-marker { display: none; }
.a-propos summary:hover { color: var(--accent); }
.a-propos .chevron { margin-left: auto; font-size: 12px; color: var(--discret); transition: transform .2s; }
.a-propos[open] .chevron { transform: rotate(180deg); }
.a-propos p { padding: 0 16px 16px 54px; font-size: 15px; }

/* Contact : reste visible pendant la lecture de la fiche */
.fiche-cote { display: grid; gap: 16px; position: sticky; top: 0; }
.encadre { background: var(--fond-alt); border: 1px solid var(--bord); border-radius: 14px; padding: 16px 18px; }
.encadre h3 { font-size: 13px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .06em; color: var(--discret); }
.encadre h3 i { color: var(--accent); }
.contact-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.contact-liste li { display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; }
.contact-liste i { color: var(--accent); margin-top: 4px; text-align: center; }
.contact-liste span, .contact-liste a { font-size: 15px; font-weight: 600; color: var(--encre); overflow-wrap: anywhere; }
.contact-liste a { color: var(--accent); }

/* ---- Pied ---- */
.pied { background: #111827; color: #9CA3AF; padding: 32px 0; font-size: 14px; }
.pied p { margin: 0; }
.pied a { color: #C7D2FE; }

/* ---- Responsive : points de rupture du site (1024 / 768 / 480) ---- */
@media (max-width: 1024px) {
  .vue-cartes, .chargement { grid-template-columns: repeat(2, 1fr); }
  .filtres { grid-template-columns: repeat(2, 1fr); }
  .col-lieu { display: none; }
  .fiche-grille { grid-template-columns: minmax(0, 1fr) 260px; gap: 22px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  /* Tablette : tuiles sur trois colonnes ; la dernière (la date limite) comble la rangée incomplète. */
  .fiche-cles { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cle:last-child:nth-child(3n+2) { grid-column: span 2; }
  .cle:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .conteneur { padding: 0 16px; }
  /* Téléphone : la photo passe derrière tout le texte, très atténuée. */
  .hero { padding: 36px 0 40px; }
  .hero-photo { right: 0; width: 100%; opacity: .3; -webkit-mask-image: none; mask-image: none; }
  .hero-description { font-size: 16px; }
  .bouton-degrade { margin-top: 22px; }
  .section { padding: 24px 0 56px; }
  .bouton-filtres { display: inline-flex; }
  .filtres { display: none; }
  .filtres.ouvert { display: grid; }
  /* Tableau en fiches empilées : entreprise et échéance, intitulé, domaine et lieu. */
  .tableau-offres { border: 0; background: none; overflow: visible; }
  .tableau-offres thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tableau-offres tbody { display: grid; gap: 10px; }
  .tableau-offres tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px;
    grid-template-areas: "entreprise cloture" "intitule intitule" "domaine lieu";
    background: #fff; border: 1px solid var(--bord); border-radius: 14px; padding: 14px 16px;
  }
  .tableau-offres td { display: block; padding: 0; border: 0; width: auto; }
  .col-entreprise { grid-area: entreprise; }
  .col-intitule { grid-area: intitule; }
  .col-domaine { grid-area: domaine; }
  .col-lieu { grid-area: lieu; display: block !important; justify-self: end; font-size: 14px; }
  .col-cloture { grid-area: cloture; justify-self: end; }
  /* Fenêtre en plein écran ; tuiles sur deux colonnes, contact après le contenu. */
  .fiche { width: 100vw; height: 100%; max-height: none; border-radius: 0; }
  .fiche-entete { padding: 22px 64px 20px 20px; }
  .fiche-corps { padding: 20px; }
  .fiche-grille { grid-template-columns: 1fr; gap: 22px; }
  .fiche-cote { position: static; }
  .fiche-cles { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 22px; }
  .cle:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .a-propos p { padding-left: 16px; }
}
@media (max-width: 480px) {
  .barre-liens .lien-offres { display: none; }
  .barre-liens .bouton span { display: none; }
  .ligne-recherche { flex-wrap: wrap; }
  .champ-recherche { flex-basis: 100%; }
  .bouton-filtres { width: 100%; justify-content: center; padding: 10px 16px; }
  .filtres { grid-template-columns: 1fr; }
  .vue-cartes, .chargement { grid-template-columns: 1fr; }
  .barre-resultats { flex-direction: column; align-items: stretch; }
  .outils { justify-content: space-between; }
  .tableau-offres tbody tr { grid-template-columns: 1fr; grid-template-areas: "entreprise" "intitule" "domaine" "lieu" "cloture"; }
  .col-lieu, .col-cloture { justify-self: start; }
  .pagination .nombre:not([aria-current="page"]) { display: none; }
  .pagination .ellipse { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}