/* Direction artistique — feuille unique, partagée par les 9 pages.
   Avant : 4 blocs <style> divergents, puis une première feuille au bleu SaaS générique.

   L'IDÉE. Le sujet de ce site n'est pas un logiciel, c'est une échéance administrative
   française. La matière visuelle vient de là : papier gris-vert froid d'imprimé officiel,
   encre noire verdâtre, un seul vert fiscal pour la structure. Et une terre de Sienne
   STRICTEMENT réservée aux dates et aux échéances — si elle apparaît ailleurs, elle ne
   veut plus rien dire.

   DEUX FAMILLES, UN PARTAGE DE RÔLES. Un serif pour ce que le site DIT (titres, chapôs),
   un sans pour ce qu'il MESURE (données, tarifs, interface). Ce n'est pas décoratif :
   c'est la distinction entre notre propos et les faits relevés chez les éditeurs.

   Aucune police distante. Ce n'est pas une préférence : la politique de confidentialité
   affirme qu'aucune ressource n'est chargée depuis un autre domaine, et la CSP de _headers
   le refuse (style-src 'self'). Google Fonts casserait les deux. */

:root{
  --papier:#F1F3EE;      /* fond : gris-vert froid, papier d'imprimé administratif */
  --papier-2:#FBFCFA;    /* surfaces posées dessus */
  --papier-3:#E8EBE5;    /* creux, en-têtes de tableau */

  --encre:#16211C;       /* noir verdâtre — pas un gris teinté */
  --encre-2:#46534D;
  --encre-3:#6E7B74;

  --vert:#0E5C44;        /* accent unique de structure */
  --vert-2:#0A4433;
  --vert-pale:#E0EAE3;
  --vert-bd:#9FBCAC;

  --echeance:#9C3B12;    /* RÉSERVÉ aux dates et échéances. Nulle part ailleurs. */
  --echeance-pale:#F6E9E1;
  --echeance-bd:#D9B29A;

  --regle:#C2CDC4;       /* filets de structure */
  --regle-2:#DCE3DB;     /* filets internes, plus discrets */

  --ambre:#7A5B10; --ambre-bg:#F6EFD9; --ambre-bd:#D8C58A;
  --rouge:#9C2B1C; --rouge-bg:#F7E6E2; --rouge-bd:#D9AA9E;

  --serif:"Iowan Old Style","Charter",Charter,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --r:3px;               /* un rayon unique et discret. Zéro ferait journal, 16 ferait SaaS. */
  --max:1100px;
  --ease:cubic-bezier(.4,0,.2,1);

  /* Rétrocompatibilité : les anciens noms restent définis, les 9 pages les utilisent encore. */
  --blanc:var(--papier-2);
  --bleu-900:var(--encre); --bleu-800:var(--vert-2); --bleu-700:var(--vert);
  --bleu-600:var(--vert); --bleu-500:var(--vert); --bleu-200:var(--vert-bd);
  --bleu-100:var(--vert-pale); --bleu-50:var(--vert-pale);
  --gris-900:var(--encre); --gris-700:var(--encre-2); --gris-600:var(--encre-2);
  --gris-500:var(--encre-3); --gris-400:var(--encre-3); --gris-300:var(--regle);
  --gris-200:var(--regle); --gris-100:var(--regle-2); --gris-50:var(--papier-3);
  --vert-bg:var(--vert-pale);
  --b:var(--regle); --m:var(--encre-3); --bg:var(--papier);
  --ok:var(--vert); --ko:var(--rouge); --wa:var(--ambre);
  --r-sm:var(--r); --r-lg:var(--r); --r-xl:var(--r);
  --o-1:none; --o-2:none; --o-3:none; --o-bleu:none;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font:16px/1.62 var(--sans);
  color:var(--encre-2);
  background:var(--papier);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Les chiffres d'un comparatif se lisent en colonne : chasse fixe, sinon les prix
   ne s'alignent pas et l'œil ne peut plus comparer d'un coup. */
.num,td,th,.date{font-variant-numeric:tabular-nums}

/* ---------- Titres : le serif porte la voix du site ---------- */

h1,h2,h3{font-family:var(--serif);color:var(--encre);line-height:1.18;margin:0;font-weight:600}
h1{font-size:clamp(30px,4.4vw,46px);letter-spacing:-.012em}
h2{font-size:clamp(22px,2.6vw,29px);letter-spacing:-.008em}
h3{font-size:18px;letter-spacing:-.004em}

a{color:var(--vert);text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--vert-2)}
a:focus-visible{outline:2px solid var(--vert);outline-offset:2px;border-radius:2px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.sub{color:var(--encre-3);font-size:15px;margin:0}
.na{color:var(--encre-3);font-style:italic;font-size:14px}

/* ---------- En-tête ---------- */

.top{background:var(--papier);border-bottom:1px solid var(--regle);position:sticky;top:0;z-index:20}
.top-in{display:flex;align-items:center;gap:14px;height:58px}
.brand{
  display:flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:600;
  color:var(--encre);text-decoration:none;font-size:17px;letter-spacing:-.006em;
}
.brand svg{flex:0 0 auto}
.top nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.top nav a{
  color:var(--encre-2);text-decoration:none;font-size:14.5px;padding:7px 11px;
  border-bottom:2px solid transparent;transition:color .15s var(--ease),border-color .15s var(--ease);
}
.top nav a:hover{color:var(--encre);border-bottom-color:var(--regle)}
.top nav a[aria-current=page]{color:var(--vert);border-bottom-color:var(--vert);font-weight:600}

/* ---------- Héros ---------- */

.hero{background:var(--papier);border-bottom:1px solid var(--regle);padding:60px 0 52px}
.hero h1{max-width:19ch}
.hero .lede{font-size:clamp(16.5px,1.6vw,18px);color:var(--encre-2);max-width:60ch;margin:20px 0 0}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;align-items:center}

/* ---------- Le calendrier de l'obligation ----------
   C'est l'élément unique sur lequel ce site dépense son audace. Deux dates réelles, une
   passée, une à venir, et le nombre de jours calculé depuis aujourd'hui par le script.
   Ce n'est pas une statistique : c'est du calendrier, donc invérifiable à tort. */

.cal{margin-top:38px;border-top:1px solid var(--regle);padding-top:4px}
.cal-piste{position:relative;height:30px;margin:20px 0 0}
.cal-piste::before{
  content:"";position:absolute;left:0;right:0;top:13px;height:1px;background:var(--regle);
}
/* La portion écoulée est pleine, la portion à venir est en pointillé. L'œil lit le temps
   restant sans avoir à lire le texte. */
.cal-faite{position:absolute;left:0;top:11px;height:5px;background:var(--vert);border-radius:3px}
.cal-pt{position:absolute;top:7px;width:13px;height:13px;border-radius:50%;
  background:var(--papier);border:3px solid var(--vert);transform:translateX(-50%)}
.cal-pt.a-venir{border-color:var(--echeance);background:var(--papier)}
.cal-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cal-col{padding-top:14px}
.cal-col:last-child{text-align:right}
.cal-quoi{font-size:14px;color:var(--encre-2);margin:0}
.cal-date{
  font-family:var(--serif);font-size:clamp(19px,2.4vw,25px);color:var(--encre);
  margin:2px 0 0;line-height:1.2;
}
.cal-etat{font-size:13.5px;margin:4px 0 0;color:var(--encre-3)}
.cal-col.urgent .cal-date{color:var(--echeance)}
.cal-col.urgent .cal-etat{color:var(--echeance);font-weight:600}

/* ---------- Boutons ---------- */

.btn{
  display:inline-flex;align-items:center;gap:9px;
  font:inherit;font-size:15.5px;font-weight:600;line-height:1;
  padding:13px 22px;border-radius:var(--r);border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease);
}
.btn-1{background:var(--vert);color:var(--papier-2);border-color:var(--vert)}
.btn-1:hover{background:var(--vert-2);border-color:var(--vert-2);color:var(--papier-2)}
.btn-2{background:transparent;color:var(--encre);border-color:var(--regle)}
.btn-2:hover{background:var(--papier-2);color:var(--encre);border-color:var(--encre-3)}
.btn:focus-visible{outline:2px solid var(--vert);outline-offset:3px}

/* ---------- Bandeaux d'information ----------
   Un filet à gauche et rien d'autre. Un encadré complet pèse autant qu'un paragraphe de
   contenu, et la page en comptait deux avant d'avoir rien dit. */

.notes{display:grid;gap:14px;margin-top:30px}
.note{
  display:flex;gap:12px;align-items:flex-start;
  border-left:2px solid var(--regle);padding:2px 0 2px 16px;
  font-size:14.5px;color:var(--encre-2);background:transparent;border-radius:0;
}
.note svg{flex:0 0 auto;margin-top:2px}
.note strong{color:var(--encre);font-weight:600}
.note-info{border-left-color:var(--vert)}
.note-warn{border-left-color:var(--ambre)}

/* ---------- Carte générique ---------- */

.card{background:var(--papier-2);border:1px solid var(--regle);border-radius:var(--r);padding:22px}

/* ---------- Chiffres clés, en ligne de texte ----------
   Les tuiles à gros chiffre sont le traitement par défaut de tous les sites du monde, et
   deux des quatre affichaient « 0 ». Un comparateur qui ouvre sur des zéros se présente
   comme vide. Les mêmes faits tiennent dans une phrase, et se lisent mieux. */

.kpis{margin:4px 0 22px;font-size:15.5px;color:var(--encre-2);display:block}
.kpi{display:inline;border:0;padding:0;background:none}
.kpi b{font-family:var(--serif);font-size:19px;color:var(--encre);font-weight:600}
.kpi span{color:var(--encre-2)}

/* ---------- Corps ---------- */

main{padding:52px 0 80px}
section+section{margin-top:64px}
.sec-head{margin-bottom:20px;border-bottom:1px solid var(--regle);padding-bottom:12px}
.sec-head h2+.sub{margin-top:6px}

/* ---------- Filtres ---------- */

.filters{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  padding:24px 0 16px;margin-bottom:0;border-bottom:1px solid var(--regle-2);background:none;border-radius:0;
}
.filters label{font-size:13.5px;color:var(--encre-3);display:flex;gap:8px;align-items:center}
select,input[type=search]{
  font:inherit;font-size:14.5px;color:var(--encre);padding:9px 11px;
  border:1px solid var(--regle);border-radius:var(--r);background:var(--papier-2);
  transition:border-color .15s var(--ease);
}
select:hover,input[type=search]:hover{border-color:var(--encre-3)}
select:focus-visible,input[type=search]:focus-visible{outline:2px solid var(--vert);outline-offset:1px;border-color:var(--vert)}
.search{flex:1 1 230px;min-width:0}
.count{font-size:13.5px;color:var(--encre-3);margin-left:auto;white-space:nowrap}

/* ---------- Tableau ---------- */

.tw{background:var(--papier-2);border:1px solid var(--regle);border-top:0;border-radius:0 0 var(--r) var(--r);overflow:hidden}
table{width:100%;border-collapse:collapse;font-size:14.5px;table-layout:fixed}
tbody td,thead th{overflow-wrap:anywhere}
/* Pas de CAPITALES espacées : c'est le marqueur de gabarit le plus reconnaissable qui soit.
   Un en-tête de colonne se lit très bien en bas de casse. */
thead th{
  background:var(--papier-3);font-size:13px;color:var(--encre-2);font-weight:600;
  border-bottom:1px solid var(--regle);padding:12px 14px;text-align:left;
  line-height:1.3;white-space:normal;
}
th[data-s]{cursor:pointer;user-select:none;transition:color .14s var(--ease)}
th[data-s]:hover{color:var(--vert)}
th[data-s]:focus-visible{outline:2px solid var(--vert);outline-offset:-2px}
th[aria-sort=ascending],th[aria-sort=descending]{color:var(--vert)}
th[aria-sort=ascending] .ar::after{content:"▲";font-size:8px;margin-left:5px;vertical-align:1px}
th[aria-sort=descending] .ar::after{content:"▼";font-size:8px;margin-left:5px;vertical-align:1px}
/* Six colonnes depuis le retrait de « Offre ». Largeurs rééquilibrées sur ce total. */
#comparatif thead th:nth-child(1){width:19%}
#comparatif thead th:nth-child(2){width:12%}
#comparatif thead th:nth-child(3){width:12%}
#comparatif thead th:nth-child(4){width:13%}
#comparatif thead th:nth-child(5){width:29%}
#comparatif thead th:nth-child(6){width:15%}
tbody td{padding:15px 14px;border-bottom:1px solid var(--regle-2);vertical-align:top;text-align:left}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background-color .14s var(--ease)}
tbody tr:hover{background:var(--vert-pale)}
.nom{font-family:var(--serif);font-weight:600;font-size:17px}
.nom a{color:var(--encre);text-decoration:none;border-bottom:1px solid var(--regle);
  transition:border-color .15s var(--ease),color .15s var(--ease)}
.nom a:hover{color:var(--vert);border-bottom-color:var(--vert)}
/* La date d'immatriculation est une date : elle porte la couleur réservée aux dates,
   et ne se coupe jamais au milieu d'un nombre. */
.date{color:var(--echeance);white-space:nowrap;font-size:14px}

/* ---------- Pastilles ---------- */

.tag{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;
  padding:3px 9px;border-radius:var(--r);border:1px solid;line-height:1.4;white-space:normal}
.t-ok{color:var(--vert);border-color:var(--vert-bd);background:var(--vert-pale)}
.t-ko{color:var(--rouge);border-color:var(--rouge-bd);background:var(--rouge-bg)}
.t-wa{color:var(--ambre);border-color:var(--ambre-bd);background:var(--ambre-bg)}
.t-na{color:var(--encre-3);border-color:var(--regle);background:var(--papier-3)}

/* La source n'est pas une note de bas de page : c'est ce qui distingue ce site d'un
   contenu inventé. Elle garde une taille lisible et un contraste suffisant. */
.src{font-size:13px;color:var(--encre-2);margin-top:6px;display:block;line-height:1.5}
.src a{color:var(--encre-2);text-decoration-color:var(--regle)}
.src a:hover{color:var(--vert)}

/* ---------- Pied de page ---------- */

footer{border-top:1px solid var(--regle);background:var(--papier);padding:40px 0 48px;
  font-size:13.5px;color:var(--encre-3)}
footer p{margin:0 0 10px;max-width:72ch}
footer a{color:var(--encre-2)}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--regle-2)}
.foot-nav a{text-decoration:none}
.foot-nav a:hover{color:var(--vert);text-decoration:underline}

details{margin-top:8px}
summary{cursor:pointer;font-size:13px;color:var(--encre-3)}
summary:hover{color:var(--vert)}
summary:focus-visible{outline:2px solid var(--vert);outline-offset:2px}
code{background:var(--papier-3);padding:2px 6px;border-radius:2px;font-size:12.5px;color:var(--vert-2)}

/* ---------- Fiches sous le seuil mesuré ----------
   Seuil remesuré après le passage à 6 colonnes. En dessous, les dernières colonnes étaient
   coupées au bord droit sans aucun indice de défilement. Chaque ligne devient une fiche,
   l'intitulé venant de data-l. Contrepartie assumée : plus de tri par en-tête sous ce seuil. */

@media(max-width:940px){
  .tw{--lab:clamp(104px,38%,186px);background:transparent;border:0;overflow:visible}
  .tw thead{display:none}
  .tw tbody,.tw tr,.tw td{display:block}
  .tw tr{background:var(--papier-2);border:1px solid var(--regle);border-radius:var(--r);
    padding:14px 16px;margin-bottom:12px}
  .tw tr:hover{background:var(--papier-2)}
  .tw td{display:flex;flex-wrap:wrap;gap:10px;border:0;padding:5px 0}
  .tw td::before{content:attr(data-l);flex:0 0 var(--lab);font-size:13px;
    color:var(--encre-3);line-height:1.6}
  /* Un enfant de conteneur flex refuse de rétrécir sous sa largeur min-content
     (min-width:auto). Le détail tarifaire poussait la page à 413 px au lieu de 390. */
  .tw td>*{min-width:0;overflow-wrap:anywhere}
  .tw td>.src{flex:0 0 100%;padding-left:calc(var(--lab) + 10px);margin-top:2px}
  .tw td>.src.pays{flex:0 0 auto;padding-left:0;margin-top:0}
  .tw td.nom,.tw td:first-child{font-size:19px;padding-bottom:10px;margin-bottom:6px;
    border-bottom:1px solid var(--regle-2)}
  .tw td.nom::before,.tw td:first-child::before{display:none}
  .tw td.nom .src{margin-top:6px;padding-left:0}
  .filters{border-bottom:0;padding-bottom:12px}
}

@media(max-width:620px){
  .wrap{padding:0 16px}
  .hero{padding:40px 0 38px}
  main{padding:34px 0 56px}
  section+section{margin-top:46px}
  .top{position:static}
  .top-in{height:auto;flex-wrap:wrap;gap:0;padding-top:10px;padding-bottom:6px}
  .brand{flex:0 0 100%;margin-bottom:6px}
  .top nav{margin-left:-9px;flex-wrap:wrap;gap:0}
  .top nav a{padding:6px 9px;font-size:13.5px}
  .filters>*{width:100%}
  .filters label{justify-content:space-between}
  .count{margin-left:0;text-align:right}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
  /* Deux colonnes de calendrier côte à côte deviennent illisibles sous 620 px :
     la piste passe à la verticale, les deux échéances s'empilent. */
  .cal-cols{grid-template-columns:1fr;gap:0}
  .cal-col:last-child{text-align:left;border-top:1px solid var(--regle-2);margin-top:14px}
  .cal-piste{display:none}
}

/* Le visiteur qui demande moins d'animations n'en reçoit aucune. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ---------- Diagnostic ---------- */

.wrap-etroit{max-width:820px}

fieldset{border:0;border-top:1px solid var(--regle);border-radius:0;padding:18px 0 22px;
  margin:0 0 6px;background:none}
legend{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--encre);padding:0 10px 0 0}
.opts{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt span{
  display:inline-block;font-size:14.5px;padding:9px 16px;border:1px solid var(--regle);
  border-radius:var(--r);cursor:pointer;background:var(--papier-2);color:var(--encre-2);
  user-select:none;transition:border-color .15s var(--ease),background-color .15s var(--ease),color .15s var(--ease);
}
.opt span:hover{border-color:var(--vert-bd);color:var(--encre)}
.opt input:checked+span{border-color:var(--vert);background:var(--vert);color:var(--papier-2);font-weight:600}
.opt input:focus-visible+span{outline:2px solid var(--vert);outline-offset:3px}
.hint{font-size:13.5px;color:var(--encre-3);margin:12px 0 0}
.hint-en-ligne{font-size:13.5px;color:var(--encre-3);font-weight:400}
.sous-nav{margin-top:18px;display:flex;flex-wrap:wrap;gap:4px 10px}

#out{margin-top:30px}
.res{border:1px solid var(--regle);border-radius:var(--r);padding:26px;margin-bottom:16px;
  background:var(--papier-2)}
.res h2{font-size:24px;margin:0 0 4px}
.res>.sub{margin-bottom:16px}
.res .tw{border-radius:var(--r);margin-top:14px;border-top:1px solid var(--regle)}

/* Une obligation est d'abord un état : en retard, à venir, tenue. La couleur porte l'état,
   la pastille le répète en toutes lettres — la couleur seule n'est pas une information. */
.ob{border:0;border-left:3px solid var(--regle);border-radius:0;
  padding:12px 0 12px 18px;margin:16px 0;background:none}
.ob.late{border-left-color:var(--echeance)}
.ob.soon{border-left-color:var(--ambre)}
.ob.done{border-left-color:var(--vert)}
.ob .t{font-family:var(--serif);font-weight:600;font-size:18px;color:var(--encre);line-height:1.3}
.ob .d{font-size:13.5px;color:var(--echeance);margin-top:3px}
.ob .x{font-size:15px;margin-top:8px;color:var(--encre-2)}
.ob .src{margin-top:8px}

.badge{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border-radius:var(--r);
  border:1px solid;margin-left:8px;vertical-align:2px;white-space:nowrap;font-family:var(--sans)}
.b-late{color:var(--echeance);border-color:var(--echeance-bd);background:var(--echeance-pale)}
.b-soon{color:var(--ambre);border-color:var(--ambre-bd);background:var(--ambre-bg)}
.b-done{color:var(--vert);border-color:var(--vert-bd);background:var(--vert-pale)}

.gap{background:none;border:0;border-left:3px solid var(--regle);border-radius:0;
  padding:12px 0 12px 18px;font-size:14.5px;margin-top:22px;color:var(--encre-2)}
.gap strong{color:var(--encre)}
ul{padding-left:20px;margin:10px 0}
li{margin:6px 0}

/* ---------- Pages de texte ---------- */

.prose h2{margin:48px 0 8px;padding-top:28px;border-top:1px solid var(--regle)}
.prose h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.prose h3{margin:28px 0 4px}
.prose p,.prose ul{font-size:16.5px;max-width:68ch}
.prose table{margin-top:14px;background:var(--papier-2);border:1px solid var(--regle);
  border-radius:var(--r);overflow:hidden;table-layout:auto}
.prose th,.prose td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--regle-2);
  vertical-align:top;font-size:14.5px}
.prose th{width:34%;font-weight:600;color:var(--encre-2);font-size:13.5px;background:var(--papier-3)}
.prose tr:last-child th,.prose tr:last-child td{border-bottom:0}
.todo{background:var(--rouge-bg);border:1px solid var(--rouge-bd);color:var(--rouge);
  padding:14px 16px;border-radius:var(--r);font-size:14.5px}

/* ---------- Page « offres gratuites » ---------- */
/* Ces classes remplacent des attributs style= : la CSP du site refuse le style en ligne. */
.offre{margin-bottom:0;border:0;border-top:1px solid var(--regle-2);border-radius:0;
  background:none;padding:20px 0}
.offre:first-of-type{border-top:0}
.offre-t{margin:0 0 2px;font-size:20px}
.offre-t a{text-decoration:none}
.tag-apres{margin-left:8px;vertical-align:2px}
.offre-lieu{margin:0 0 10px}
.offre-d{margin:0}
.offre-note{margin:8px 0 0}
.offre-src{margin-top:10px}
.cta-bas{margin-top:34px}

/* ---------- Sélecteur par métier ---------- */
.opt-bloc{display:block;margin-top:12px}
.contexte{margin-top:18px}
.rappel{margin-bottom:16px}
.pourquoi{margin-top:12px}
.pourquoi summary{font-size:13.5px;color:var(--vert);font-weight:600}
.pourquoi ul{margin:10px 0 0;font-size:14.5px}
.pourquoi li{margin:6px 0}
.pourquoi em{color:var(--encre-3)}
.reste{margin-top:26px;border-top:1px solid var(--regle);padding-top:16px}
.reste>summary{font-size:14px;color:var(--encre-2);font-weight:600}
.reste .card{margin-top:12px}
.alerte-hp{margin:28px 0 16px}

/* ---------- Les métiers, en entrée de site ----------
   Un artisan ne cherche pas « une plateforme agréée », il cherche la sienne. Ces six
   entrées sont le vrai point d'accès du site, et elles étaient enterrées dans la
   navigation. Pas une grille de cartes : une liste de portes. */

.metiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:0 32px;
  border-top:1px solid var(--regle)}
.metier{
  display:block;padding:20px 20px 20px 0;border-bottom:1px solid var(--regle-2);
  text-decoration:none;color:var(--encre-2);
  transition:background-color .15s var(--ease),padding-left .15s var(--ease);
}
.metier:hover{background:var(--papier-2);color:var(--encre-2);padding-left:10px}
.metier:focus-visible{outline:2px solid var(--vert);outline-offset:-2px}
.metier b{display:block;font-family:var(--serif);font-size:19px;font-weight:600;color:var(--encre)}
.metier span{display:block;font-size:14px;color:var(--encre-3);margin-top:4px;line-height:1.5}

/* ---------- Bloc partenaires ----------
   Obligations visées : art. L111-7 du code de la consommation et décret 2016-505 du
   22/04/2016. Le texte impose que le critère de classement par défaut, le caractère
   exhaustif ou non du référencement et son caractère payant figurent EN HAUT de la page
   de résultats et AVANT le classement des offres — d'où la position de ce bloc.
   La mention « Annonce » n'est due que pour une offre référencée à titre payant dont le
   RANG dépend de cette rémunération. Ici le rang n'en dépend jamais : on la porte quand
   même sur tout lien rémunéré, parce que c'est plus clair pour le lecteur. */

.part{border:1px solid var(--vert-bd);border-radius:var(--r);background:var(--papier-2);
  padding:22px 24px;margin-top:38px}
.part h2{font-size:22px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.part-annonce{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.04em;
  color:var(--papier-2);background:var(--vert);padding:3px 8px;border-radius:2px}
.part-avis{font-size:14px;color:var(--encre-2);margin:10px 0 0;max-width:78ch}
.part-liste{margin-top:18px}

/* Une fiche partenaire. Elle n'existe que si les données disent qu'un partenariat est
   signé ET qu'un lien a été fourni : jamais une case vide, jamais un lien inventé. */
.part-item{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;
  border-top:1px solid var(--regle-2);padding:18px 0 0;margin-top:18px}
.part-item:first-child{border-top:0;padding-top:0;margin-top:0}
.part-corps{flex:1 1 320px;min-width:0}
.part-nom{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--encre);margin:0}
.part-quoi{font-size:14.5px;color:var(--encre-2);margin:6px 0 0}
.part-cta{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.part-cta .sub{font-size:12px}

/* L'état réel d'aujourd'hui : aucun partenariat. Le dire est une obligation d'information
   autant qu'une question de crédibilité — un bloc « Nos partenaires » vide mais présent
   vaut mieux qu'un bloc qui invente un partenaire. */
.part-vide{font-size:14.5px;color:var(--encre-2);margin:16px 0 0;
  border-left:2px solid var(--regle);padding-left:16px}
.part-vide strong{color:var(--encre)}

.part-fonctionnement{margin-top:18px;border-top:1px solid var(--regle-2);padding-top:14px}
.part-fonctionnement summary{font-size:13.5px;color:var(--vert);font-weight:600}
.part-fonctionnement dl{margin:12px 0 0;font-size:14px}
.part-fonctionnement dt{font-weight:600;color:var(--encre);margin-top:10px}
.part-fonctionnement dd{margin:2px 0 0 0;color:var(--encre-2)}

@media(max-width:620px){
  .part{padding:18px 16px}
  .part-cta{flex:1 1 100%;align-items:stretch}
  .part-cta .btn{justify-content:center}
}