/* Polideo — feuille de style commune.
   Composants partagés : en-tête, cartes, tags, boutons, formulaires, états.
   Police système uniquement, aucun service de polices externe.

   Identité Polideo, violet et menthe (lot 9B, 15 septembre 2026), décidée par
   Adam : docs/branding/polideo/. Blanc dominant, anthracite pour le texte,
   violet de marque, violet plus foncé pour les actions et petits liens (contraste
   suffisant sous un libellé blanc), menthe en petite touche décorative seulement.
   Une teinte violette très légère reste ponctuelle : la une de l'accueil, les
   survols. Toujours sans ombres décoratives ni bordures gauches épaisses ; la
   séparation vient de l'espace et de traits fins. Les outils et l'administration
   héritent de ces jetons : ils ne portent pas de couleur propre. */

/* ---------- Jetons ---------- */
:root {
  /* Palette Polideo validée */
  --blanc: #ffffff;
  --anthracite: #20212a;
  --marque: #635bff;        /* symbole, repères de marque ; pas pour le petit texte */
  --action: #5148d8;        /* boutons, liens, sélection : 6,4:1 sur blanc */
  --action-survol: #4037b8;
  --menthe: #9ce8cd;        /* touche décorative, jamais porteuse d'information */
  --teinte: #f4f3ff;

  /* Rôles (noms historiques conservés : outils et administration les emploient) */
  --fond: var(--blanc);
  --texte: var(--anthracite);
  --texte-doux: #5c5e6b;    /* 6,5:1 sur blanc, 6:1 sur la teinte */
  --texte-tenu: #676977;    /* 5,4:1 sur blanc, 4,9:1 sur la teinte */
  --trait: #e6e6ee;
  --trait-forte: #c4c5d0;
  --controle: #858797;      /* contour des champs : 3,6:1, perceptible sans couleur */
  --survol: var(--teinte);
  --accent: var(--action);
  --accent-sombre: var(--action-survol);
  --attention: #8a5a12;
  --erreur: #a12222;

  --r-s: 6px;
  --r-m: 10px;
  --r-l: 16px;
  --r-pilule: 999px;

  --largeur: 1120px;
  --marge-page: clamp(16px, 4vw, 32px);
  --pile-s: 8px;
  --pile-m: 16px;
  --pile-l: 28px;
  --pile-xl: 56px;

  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.55;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.015em; margin: 0; font-weight: 600; }
p { margin: 0; }
img { max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-sombre); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--texte);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 var(--r-s) 0;
  font-weight: 600;
}
.lien-evitement:focus { left: 0; color: #fff; }

.enveloppe {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--marge-page);
}

.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- En-tête ---------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--trait);
}

.entete__rangee {
  display: flex;
  align-items: center;
  gap: var(--pile-m);
  min-height: 68px;
  flex-wrap: wrap;
  padding-block: 10px;
}

/* Marque : symbole en tracés SVG et nom en texte, police système. Le mot-symbole
   SVG du kit contient lui aussi du texte : l'écrire en HTML garde le même rendu
   de repli, reste lisible par tous et ne dépend d'aucune police téléchargée. */
.marque {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 25px;
  line-height: 1;
  color: var(--texte);
  text-decoration: none;
  letter-spacing: -0.055em;
  white-space: nowrap;
}
.marque:hover { color: var(--texte); }
.marque__symbole { width: 31px; height: 32px; flex: none; }
.marque__nom { translate: 0 -1px; }
/* Précision discrète après le nom (administration). */
.marque__mention { margin-inline-start: 4px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--texte-tenu); }
.marque:focus-visible { outline-offset: 4px; }

.navigation { margin-inline-start: auto; }
.navigation__liste {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.navigation__lien {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 7px 14px;
  color: var(--texte-doux);
  text-decoration: none;
  font-size: 15px;
  border-radius: var(--r-pilule);
}
.navigation__lien:hover { color: var(--texte); background: var(--survol); }
/* Page courante : pastille pleine, et non une simple couleur — l'état se lit aussi par la forme. */
.navigation__lien[aria-current="page"] { color: #fff; background: var(--action); font-weight: 600; }
.navigation__lien[aria-current="page"]:hover { background: var(--action-survol); color: #fff; }

.recherche { display: flex; align-items: center; gap: 8px; }
.recherche__champ {
  font: inherit;
  font-size: 15px;
  padding: 8px 16px;
  min-height: 38px;
  min-width: 0;
  width: clamp(140px, 22vw, 240px);
  border: 1px solid var(--controle);
  border-radius: var(--r-pilule);
  background: var(--fond);
  color: var(--texte);
}
.recherche__champ::placeholder { color: var(--texte-tenu); }
.recherche__champ:focus { border-color: var(--action); }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  min-height: 40px;
  padding: 9px 18px;
  border-radius: var(--r-pilule);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.bouton--principal { background: var(--accent); color: #fff; }
.bouton--principal:hover { background: var(--accent-sombre); color: #fff; }
.bouton--secondaire { background: var(--fond); color: var(--texte); border-color: var(--trait-forte); }
.bouton--secondaire:hover { background: var(--survol); color: var(--texte); }
.bouton--discret { background: transparent; color: var(--accent); padding-inline: 8px; }
.bouton--discret:hover { background: var(--survol); }
.bouton[disabled], .bouton[aria-disabled="true"] {
  background: var(--fond);
  color: var(--texte-tenu);
  border-color: var(--trait);
  cursor: not-allowed;
}

/* ---------- Sections ---------- */
.section { padding-block: var(--pile-xl); }
.section--doux { border-top: 1px solid var(--trait); }
.section--serre { padding-block: 40px; }

.section__entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pile-m);
  flex-wrap: wrap;
  margin-bottom: var(--pile-l);
}
.section__titre { font-size: clamp(21px, 2.2vw, 26px); }
.section__intro {
  margin-top: 6px;
  color: var(--texte-doux);
  font-size: 16px;
  max-width: 62ch;
}

/* ---------- Bandeau d'ouverture ---------- */
.ouverture { padding-block: 30px 0; }
.section--une { padding-block: 22px 44px; }
.ouverture__titre {
  font-size: clamp(32px, 4vw, 46px);
  letter-spacing: -0.05em;
  font-weight: 650;
}
.ouverture__texte {
  margin-top: 8px;
  color: var(--texte-doux);
  font-size: 15px;
  max-width: 64ch;
}

/* ---------- Mentions et étiquettes ----------
   Étiquettes de statut : texte discret cerné d'un trait fin, sans remplissage
   de couleur. Une couleur de texte peut porter un sens (attention, erreur) sans
   devenir une surface. */
.mention {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  line-height: 1.3;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--trait);
  background: var(--fond);
  color: var(--texte-doux);
  white-space: nowrap;
}
.mention--attention { color: var(--attention); border-color: var(--attention); }
.mention--erreur { color: var(--erreur); border-color: var(--erreur); }

.encart {
  border: 1px solid var(--trait);
  background: var(--fond);
  border-radius: var(--r-m);
  padding: 14px 16px;
  font-size: 15px;
  color: var(--texte-doux);
}
.encart__titre { font-weight: 600; color: var(--texte); display: block; margin-bottom: 4px; font-size: 15px; }
.encart__note { display: block; margin-top: 8px; font-size: 14px; color: var(--attention); }

/* ---------- Cartes d'actualité ---------- */
.une {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--pile-l);
  align-items: start;
}

.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: var(--r-l);
  padding: 20px;
}
.carte:hover { border-color: var(--trait-forte); }
.carte:has(.carte__lien:focus-visible) { border-color: var(--accent); }
.carte--une:has(.carte__lien:focus-visible) { border-color: var(--accent); }

/* La une seule reçoit la teinte légère de Polideo, sans contour : le reste du
   contenu reste sur blanc. */
.carte--une { padding: clamp(22px, 3vw, 32px); background: var(--teinte); border-color: transparent; border-radius: 22px; }
.carte--une:hover { border-color: transparent; }
.carte--une .carte__titre { font-size: clamp(25px, 2.9vw, 36px); letter-spacing: -0.04em; line-height: 1.12; }
.carte--une .carte__resume { font-size: 16px; }

.carte__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--texte-tenu);
}
.carte__point { color: var(--trait-forte); }

.carte__titre { font-size: 18px; letter-spacing: -0.015em; }
.carte__lien { color: inherit; text-decoration: none; }
.carte__lien:hover { color: var(--accent-sombre); text-decoration: underline; }
.carte__lien::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

.carte__resume { color: var(--texte-doux); font-size: 15px; }

/* Réserves et notes : texte simple sur fond blanc, sans encart ni trait
   vertical d'accent — la clarté vient de la ponctuation et de l'espacement. */
.carte__reserve { font-size: 14px; color: var(--texte-doux); }
.carte__reserve--attention { color: var(--attention); }
.carte__fiabilite { font-size: 13.5px; color: var(--texte-tenu); }

/* Les détails doivent recevoir les clics au-dessus du lien étendu de la carte. */
.carte__details { position: relative; z-index: 1; font-size: 13.5px; }
.carte__details summary {
  cursor: pointer;
  color: var(--texte-tenu);
  list-style: none;
}
.carte__details summary::-webkit-details-marker { display: none; }
.carte__details summary::before { content: "Afficher — "; }
.carte__details[open] summary::before { content: "Masquer — "; }
.carte__details summary:hover { color: var(--texte-doux); }
.carte__details p { margin-top: 6px; color: var(--texte-doux); }

.carte__bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 2px;
}

.carte__destination {
  font-size: 13px;
  color: var(--texte-tenu);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.carte__domaine {
  font-variant-numeric: tabular-nums;
  color: var(--texte-doux);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Les tags restent cliquables au-dessus de la zone de lien de la carte.
   Contrôles compacts : texte 13 px, faible padding, rayon réduit — la sélection
   se lit au trait et au poids du texte, jamais à un remplissage de couleur. */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.tag {
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--trait);
  background: var(--fond);
  color: var(--texte-doux);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .12s ease, color .12s ease;
}
.tag:hover { border-color: var(--texte-tenu); color: var(--texte); }
.tag[aria-pressed="true"] {
  border-color: var(--action);
  color: var(--action);
  font-weight: 600;
}

/* ---------- Barre de filtres ---------- */
.filtres {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--trait);
  border-radius: var(--r-l);
  background: var(--fond);
}
.filtres__groupe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filtres__intitule {
  font-size: 13px;
  font-weight: 600;
  color: var(--texte-tenu);
  text-transform: uppercase;
  letter-spacing: .06em;
  min-width: 86px;
}
.filtres__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--trait);
  padding-top: 14px;
}
.filtres__compte { font-size: 14px; color: var(--texte-doux); }

.jeton {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  padding: 2px 4px 2px 8px;
  border-radius: 4px;
  background: var(--fond);
  color: var(--texte);
  border: 1px solid var(--trait);
}
.jeton__retrait {
  font: inherit;
  line-height: 1;
  border: 0;
  background: transparent;
  color: var(--texte-doux);
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 14px;
}
.jeton__retrait:hover { background: var(--survol); color: var(--texte); }

/* ---------- Fil ---------- */
.fil {
  display: grid;
  gap: var(--pile-m);
  margin-top: var(--pile-l);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.etat {
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  background: var(--fond);
  padding: 26px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: var(--pile-l);
}
.etat--erreur { border-color: var(--erreur); }
.etat--erreur .etat__titre { color: var(--erreur); }
.etat__titre { font-size: 18px; }
.etat__texte { color: var(--texte-doux); font-size: 15px; max-width: 56ch; }
.etat__detail {
  font-size: 13px;
  color: var(--texte-tenu);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-word;
}

.bandeau-apercu {
  background: var(--fond);
  border-bottom: 1px solid var(--trait);
  color: var(--texte);
  font-size: 14px;
}
.bandeau-apercu__rangee {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-block: 10px;
}

/* ---------- Grilles de services ---------- */
.grille {
  display: grid;
  gap: var(--pile-m);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.service {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--trait);
  border-radius: var(--r-l);
  background: var(--fond);
}
.service:hover { border-color: var(--trait-forte); }
.service__titre { font-size: 17px; }
.service__lien { color: inherit; text-decoration: none; }
.service__lien:hover { color: var(--accent-sombre); }
.service__lien::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.service__texte { color: var(--texte-doux); font-size: 15px; }
.service__limite {
  font-size: 13.5px;
  color: var(--texte-tenu);
  border-top: 1px solid var(--trait);
  padding-top: 10px;
  margin-top: auto;
}
.service__haut { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- Colonnes bas de page ---------- */
.colonnes {
  display: grid;
  gap: var(--pile-l);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: start;
}

.panneau {
  border: 1px solid var(--trait);
  border-radius: var(--r-l);
  background: var(--fond);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.panneau__titre { font-size: 19px; }
.panneau__texte { color: var(--texte-doux); font-size: 15px; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 8px; }
.faq__entree {
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  background: var(--fond);
  overflow: hidden;
}
.faq__entree[open] { border-color: var(--trait-forte); }
.faq__question {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 16px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
  content: "+";
  font-size: 20px;
  font-weight: 400;
  color: var(--texte-tenu);
  line-height: 1;
}
.faq__entree[open] .faq__question::after { content: "\2212"; }
.faq__reponse { padding: 0 16px 16px; color: var(--texte-doux); font-size: 15px; }
.faq__reponse p + p { margin-top: 10px; }

/* ---------- Formulaire non connecté ---------- */
.formulaire { display: flex; flex-direction: column; gap: 10px; }
.formulaire__rangee { display: flex; gap: 10px; flex-wrap: wrap; }
.champ {
  font: inherit;
  font-size: 15px;
  flex: 1 1 220px;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--controle);
  border-radius: var(--r-m);
  background: var(--fond);
  color: var(--texte);
}
.champ[disabled] { color: var(--texte-tenu); cursor: not-allowed; background: var(--survol); }
.formulaire__aide { font-size: 13.5px; color: var(--texte-tenu); }

/* ---------- Liste de faits ---------- */
.liste-faits { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.liste-faits li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 15px;
  color: var(--texte-doux);
}
.liste-faits li::before { content: "\2014"; color: var(--trait-forte); flex: none; }

/* ---------- Pied de page ---------- */
.pied__marque { margin-bottom: var(--pile-l); font-size: 22px; }
.pied__marque .marque__symbole { width: 27px; height: 28px; }
.pied {
  border-top: 1px solid var(--trait);
  padding-block: 40px 32px;
  font-size: 14px;
  color: var(--texte-doux);
}
.pied__grille {
  display: grid;
  gap: var(--pile-l);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.pied__titre {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texte-tenu);
  margin-bottom: 10px;
}
.pied__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pied__liste a { color: var(--texte-doux); text-decoration: none; }
.pied__liste a:hover { color: var(--accent-sombre); text-decoration: underline; }
.pied__bas {
  margin-top: var(--pile-l);
  padding-top: 18px;
  border-top: 1px solid var(--trait);
  display: flex;
  justify-content: space-between;
  gap: var(--pile-m);
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--texte-tenu);
}

/* ---------- Adaptations ---------- */
@media (max-width: 860px) {
  .une { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .entete__rangee { min-height: 0; gap: 10px; }
  /* En-tête sur deux lignes : marque et recherche, puis navigation pleine largeur. */
  .marque { font-size: 22px; }
  .marque__symbole { width: 26px; height: 27px; }
  .navigation { margin-inline-start: 0; width: 100%; order: 3; }
  .navigation__liste { gap: 2px; }
  .navigation__lien { min-height: 36px; padding: 6px 11px; margin-inline: 0; font-size: 14px; }
  .recherche { margin-inline-start: auto; flex: 1 1 130px; min-width: 0; max-width: 230px; }
  .recherche__champ { width: 100%; }
  .section { padding-block: 40px; }
  .filtres__intitule { min-width: 100%; }
  .carte { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  .entete, .filtres, .recherche { display: none; }
  .carte, .service, .panneau { break-inside: avoid; }
}

/* ---------- Compléments ---------- */
.une__secondaires { display: grid; gap: 0; align-content: start; }
/* Pile secondaire de la une : séparée par des traits fins, sans cadres, pour que
   l'article principal reste la seule surface marquée. */
.une__secondaires .carte { border: 0; border-radius: 0; padding: 0 0 22px; }
.une__secondaires .carte + .carte { border-top: 1px solid var(--trait); padding-top: 22px; }
.une__secondaires .carte:hover { border-color: var(--trait); }
.une__secondaires .carte:has(.carte__lien:focus-visible) { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 4px; }
/* « À la une » : intitulé discret ; la une elle-même porte la hiérarchie. */
.section--une .section__entete { margin-bottom: 18px; }
.section--une .section__titre { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); }
.section--une .section__intro { font-size: 14px; margin-top: 4px; }

/* Un lien signalé indisponible n'ouvre plus toute la surface de la carte :
   la lecture reste possible, mais volontairement. */
.carte--indisponible { border-color: var(--erreur); }
.carte--indisponible .carte__lien::after { content: none; }

.espace-haut { margin-top: var(--pile-m); }
.a-droite { margin-inline-start: auto; }
.pagination { margin-top: var(--pile-l); display: flex; justify-content: center; }
.titre-bloc { margin-bottom: var(--pile-m); }

/* ---------- Accueil Polideo : fil et colonne des outils ----------
   L'actualité garde la largeur principale ; les outils forment une colonne
   compacte à droite sur ordinateur, sous le fil sur les écrans étroits. */
.accueil-travail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px;
  align-items: start;
}
.accueil-fil { min-width: 0; }
.accueil-fil .fil { grid-template-columns: 1fr; }
.accueil-explorer { padding-top: 4px; }
.accueil-explorer__titre { font-size: 20px; letter-spacing: -0.02em; }
.accueil-explorer__titre::before {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  margin-inline-end: 9px;
  border-radius: 50%;
  background: var(--menthe);
  translate: 0 -2px;
}
.accueil-explorer__intro { margin-top: 6px; font-size: 14px; color: var(--texte-doux); }
.accueil-explorer .grille { grid-template-columns: 1fr; gap: 0; margin-top: 12px; }
.accueil-explorer .service {
  border: 0;
  border-bottom: 1px solid var(--trait);
  border-radius: 0;
  padding: 14px 0;
  gap: 6px;
}
.accueil-explorer .service__titre { font-size: 16px; }
.accueil-explorer .service__texte { font-size: 14px; }
.accueil-explorer .service__limite { border-top: 0; padding-top: 0; font-size: 13px; }
.accueil-explorer__plus { margin-top: var(--pile-m); }

@media (max-width: 960px) {
  .accueil-travail { grid-template-columns: 1fr; gap: 40px; }
  .accueil-explorer { border-top: 1px solid var(--trait); padding-top: 32px; }
  .accueil-explorer .grille { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); column-gap: 32px; }
}