/* Aucune police telechargee : les woff2 livres etaient les mauvais
   sous-ensembles et ne rendaient que le « A » majuscule, 0,187 % du
   texte. Voir rv-socle.css pour le detail de la mesure. */
/* Barre d'onglets de l'application RestauVert.

   Mutualisee le 2026-10-05. Ces regles vivaient en quatre exemplaires, un par
   page d'appli, et elles avaient deja diverge : app-rdv portait un selecteur
   de plus et deux pages avaient perdu .dock a.on i. Tant qu'il y avait quatre
   copies, elles redivergeaient.

   La variante retenue est le sur-ensemble, celle d'app-rdv : son selecteur
   .dock a.cta.on span ne cible quelque chose que sur la page Rendez-vous, ou
   l'onglet d'appel a l'action est aussi l'onglet actif. Ailleurs il ne
   correspond a rien, donc l'unification ne change rien.

   Le marqueur d'onglet actif, barre haute et graisse, est ici. L'etat actif
   reste porte par le HTML, class="on" et aria-current="page" sur le lien.

   Les variables employees, --primary-c, --secondary, --ink-soft, sont
   definies dans le <style> de chaque page d'appli. Cette feuille se charge
   avant lui, ce qui est sans effet : une variable est resolue au moment ou
   elle est utilisee, pas au moment ou la regle est lue. */

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: space-around;
  background: rgba(251, 249, 244, .92);
  backdrop-filter: blur(14px);
  border-top: 1px solid #E4E2DD;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  max-width: 480px;
  margin: 0 auto;
}
.dock a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 62px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: .66rem;
  font-weight: 600;
}
.dock a i {
  font-size: 1.15rem;
}
.dock a {
  position: relative;
}
/* Marqueur d'onglet actif. Avant, l'actif se distinguait par la seule couleur,
   #1A4E30 contre #414942 : deux sombres quasi identiques, donc on ne savait pas
   sur quel ecran on se trouvait, d'autant que l'onglet Rendez-vous est en or et
   capte le regard. Barre haute, graisse et teinte, trois signaux au lieu d'un,
   et aria-current sur le lien pour les lecteurs d'ecran. */
.dock a.on {
  color: var(--primary-c);
  font-weight: 700;
}
.dock a.on::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--primary-c);
}
.dock a.on i {
  transform: translateY(-1px);
}
/* LE BOUTON ROND DU RENDEZ-VOUS, AU CENTRE DE LA BARRE.

   Premiere tentative, dans le depot avant le 2026-11-02 : le cercle etait
   declare SUR L ICONE, width:44px, height:44px, border-radius:50%, fond
   degrade. Il ne s est jamais dessine, pour deux raisons superposees.

   1. rv-icons-app.css impose a TOUTE icone width:1em, height:1em et
      display:inline-block en !important, avec une specificite enorme :
      html i[class*="fa-"]:not(#_rvi1):not(#_rvi2):not(#_rvi3). Seules
      survivaient les declarations qu elle ne conteste pas, soit le
      degrade, l ombre, l arrondi et une marge de -16 px. D ou un galet
      dore de 16x18 px, remonte de 8 px : ce que Jaouder a vu.
   2. Meme en gagnant la specificite, ca ne marcherait pas : cette feuille
      peint les icones en mask-image, et un masque DECOUPE le fond a la
      forme du glyphe. Le cercle dore serait devenu un calendrier dore.

   Le cercle est donc un PSEUDO-ELEMENT du lien, et l icone se pose
   par-dessus. L onglet passe au centre, 3e sur 5 : un bouton souleve a
   l extremite droite ne se lit pas comme le bouton principal.

   Le libelle, lui, reste sur la ligne des quatre autres. */
/* ::after et NON ::before. Le marqueur d onglet actif, la barre de 30x3
   au-dessus du lien, occupe deja ::before. Sur app-rdv.html l onglet est
   a la fois le CTA et l onglet actif : les deux regles visaient le meme
   pseudo-element, a specificite egale. La mienne, plus bas dans la
   feuille, gagnait sur la taille et le fond, mais le
   transform:translateX(-50%) du marqueur SURVIVAIT et decalait le cercle
   de 23 px vers la gauche. Mesure au pixel : centre a x=164 au lieu de
   187,5. Et le marqueur d onglet actif disparaissait de cette page.
   Deux pseudo-elements distincts, plus de conflit. */
.dock a.cta::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -18px;
  width: 46px;
  height: 46px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(135deg, #FED174, #ECC165);
  box-shadow: 0 6px 16px rgba(212, 168, 67, .45);
  z-index: 0;
}
/* Sur la page Rendez-vous, la barre d onglet actif se retrouve derriere
   le cercle et ne se voit plus. Le cercle prend donc un anneau, dans le
   vert du marqueur : meme signal, forme adaptee. */
.dock a.cta.on::after {
  box-shadow:
    0 6px 16px rgba(212, 168, 67, .45),
    0 0 0 3px var(--primary-c);
}
/* L icone reste DANS LE FLUX et ne bouge que par transform, qui ne
   change pas la mise en page. Le libelle retombe donc exactement sur la
   ligne de ses voisins, par construction, sans rembourrage a calculer.

   Deux essais ecartes en chemin. Sortir l icone du flux obligeait a
   recaler le libelle avec un padding-bottom, qui S AJOUTAIT aux 62 px de
   l onglet : il passait a 75 et decalait toute la barre (mesure sur
   app-services, libelle a 816 contre 803 ailleurs). Corrige en
   box-sizing, il restait 1,3 px d ecart, les voisins etant centres sur
   une position fractionnaire. Le transform supprime le calcul. */
.dock a.cta i,
.dock a.cta.on i {
  position: relative;
  z-index: 1;
  transform: translateY(-17px);
  color: #3A2B00;
}
.dock a.cta.on span,
.dock a.cta span {
  color: var(--secondary);
}

/* ------------------------------------------------------------------
   Chrome partage de l'application, extrait le 2026-10-05.

   Le nom du fichier est historique : il n'a d'abord porte que la barre
   d'onglets. Il porte desormais tout ce que les quatre pages d'appli ont
   en commun : l'ossature, l'en-tete, le pied et les @keyframes. Les sept
   @font-face qui s'y trouvaient aussi ont ete retirees le 2026-10-31, les
   fichiers livres etant les mauvais sous-ensembles ; voir la note en tete
   de ce fichier. C'etait prevu de longue date, la coquille devait etre
   extraite le jour ou une quatrieme page s'ajouterait, et cette page
   existe depuis app-diagnostic.

   Deux pieges rencontres en le faisant.

   Un decoupage par simple expression reguliere tronque les @keyframes,
   dont le corps contient des accolades imbriquees. La premiere tentative
   a corrompu les quatre pages avant d'etre annulee. L'extraction utilise
   l'analyseur de scripts/css-elagage.py, qui gere l'imbrication.

   Les selecteurs .foot .fl a et .foot small a sont redefinis plus loin
   dans app.html et app-diagnostic.html. Ces definitions restent en ligne :
   elles portent des proprietes DISJOINTES de celles d'ici, couleur et
   taille d'un cote, remplissage de l'autre, donc l'ordre entre la feuille
   et le style en ligne est sans effet. Verifie avant extraction.
   ------------------------------------------------------------------ */

.wrap { max-width: 480px; margin: 0 auto; }
.top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; position: sticky; top: 0; background: rgba(251, 249, 244, .85); backdrop-filter: blur(10px); z-index: 20; }
.brand { display: flex; align-items: center; gap: 9px; font-family: "Fraunces", serif; font-weight: 600; font-size: 1.22rem; color: var(--primary-c); }
.brand .mk { width: 34px; height: 34px; border-radius: 10px; background: var(--primary-c); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,55,28,.14); }
.brand .mk img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
@view-transition { navigation: auto; }
@keyframes rvvtOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes rvvtIn { from { opacity: 0; transform: translateY(10px); } }
/* 44 px de haut, taille confortable au pouce : ces liens mesuraient 42 px.
   Le minimum legal de 24 px etait deja tenu ; 44 est la cible de confort. */
.foot .fl a { padding: 12px 4px; }
.foot small a { padding: 6px 2px; display: inline-block; }
#rvPwaInstall{bottom:calc(80px + env(safe-area-inset-bottom,0px)) !important;left:14px !important}

/* ------------------------------------------------------------------ *
 *  ZONES CLIQUABLES DE 24 PX, COTE APPLI  --  critere WCAG 2.5.8
 *
 *  Les 4 pages d'appli ne chargent pas refine.css : leur isolation CSS
 *  est voulue et on ne la casse pas. Les memes familles y sont donc
 *  reprises ici, et seulement celles qui y existent reellement.
 *
 *  app.html reprend le contenu de l'accueil, donc ses trois liens de
 *  source (13 px) et ses trois liens de preuve (18 px) ; app-rdv.html
 *  porte le courriel et le telephone de contact (19 px).
 *
 *  Technique et bornes : voir le bloc equivalent en fin de refine.css.
 *  Ces liens sont tous EN LIGNE, donc rembourrage vertical, qui
 *  n'entre pas dans le calcul de la boite de ligne et ne deplace rien.
 * ------------------------------------------------------------------ */
@media screen {
  .rvpq-src a,
  .rv-value-proof a,
  .contact-item-text a {
    padding-top: 7px;
    padding-bottom: 7px;
  }
}

/* ------------------------------------------------------------------ *
 *  PIED DE PAGE DE L'APPLI
 *
 *  Remonte ici le 2026-10-27. Ces sept regles etaient ecrites en ligne,
 *  a l'identique mot pour mot, dans app.html ET app-diagnostic.html. Le
 *  pied etant desormais pose sur les 4 pages, les laisser en ligne en
 *  aurait fait quatre exemplaires a maintenir ensemble.
 *
 *  Cette feuille n'est chargee que par les 4 pages d'appli, et la classe
 *  « foot » n'existe nulle part ailleurs sur le site : aucune page de
 *  site ne peut etre atteinte par ces regles.
 * ------------------------------------------------------------------ */
.foot {
  margin-top: 30px;
  background: transparent;
  color: var(--ink-soft);
  padding: 24px 22px calc(18px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  border-top: 1px solid #EAE8E3;
}
.foot .fb {
  font-family: "Fraunces", serif;
  color: var(--primary-c);
  font-size: 1.02rem;
  /* Meme raison que pour les liens : sans interligne fixe, le bloc mesurait
     187 px sur deux pages et 179 sur les deux autres. */
  line-height: 25px;
  margin-bottom: 10px;
}
.foot .fb b { color: #806519; }
.foot .fl {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  margin: 0 0 12px;
}
.foot .fl a {
  font-size: .82rem;
  /* Interligne fixe, et non herite. app.html et app-diagnostic.html posent
     un line-height de 1,5 sur le corps, app-outils.html et app-rdv.html
     laissent « normal » : le meme pied rendait des liens de 44 px sur deux
     pages et de 40 sur les deux autres. Avec 20 px ici, les 12 px de
     rembourrage haut et bas donnent 44 px partout. */
  line-height: 20px;
  color: var(--ink-soft);
  text-decoration: none;
}
.foot small { font-size: .75rem; line-height: 18px; color: #5A6B62; }
.foot small a { color: inherit; text-decoration: none; line-height: 18px; }

/* ------------------------------------------------------------------ *
 *  LIBELLES DU DOCK, TAILLE ELASTIQUE
 *
 *  Le dock est passe de 4 a 5 onglets le 2026-10-27 avec l'arrivee de
 *  Services. A 390 px tout tient encore sur une ligne, mais a 360 px
 *  « Rendez-vous » touche ses bords et a 320 px il passe sur deux lignes.
 *  Plutot que de raccourcir le mot, la taille suit la largeur de l'ecran,
 *  plafonnee a la valeur d'origine au-dela d'environ 400 px.
 *  Mesure avant : 69 px de texte pour un onglet de 61 px a 320 px.
 * ------------------------------------------------------------------ */
.dock a span {
  font-size: clamp(.5rem, 2.6vw, .66rem);
  white-space: nowrap;
}

/* ===== TRANSITIONS ENTRE ONGLETS =====
   Les cinq onglets sont cinq pages distinctes : sans ca, changer d onglet
   est une coupure franche. L en-tete et le tiroir sont nommes pour qu ils
   ne bougent PAS pendant la transition, seul le contenu glisse.
   Verifie sur les cinq bascules. Les navigateurs qui ignorent
   @view-transition retrouvent simplement la coupure d avant. */
@view-transition { navigation: auto; }
.top  { view-transition-name: rv-top; }
nav.dock { view-transition-name: rv-dock; }
::view-transition-old(rv-top), ::view-transition-new(rv-top),
::view-transition-old(rv-dock), ::view-transition-new(rv-dock) { animation: none; }
::view-transition-old(root) {
  animation: rvSort .13s cubic-bezier(.4,0,1,1) both;
}
::view-transition-new(root) {
  animation: rvEntre .21s cubic-bezier(0,0,.2,1) both;
}
@keyframes rvSort  { to { opacity: 0; transform: translateY(-8px); } }
@keyframes rvEntre { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ===== SPLASH D OUVERTURE, variante « pose » =====
   Tout vient de img/logo-2026.svg. Les <path> ne sont pas touches :
   chacun est dans un <g> qui porte l animation, de sorte que ni la
   couleur ni le placement ne soient ecrases. La baseline est le seul
   ajout, a la demande.
   Fond = background_color du manifeste : raccord sans couture avec
   l ecran de lancement du systeme. */

#rvs{position:fixed;inset:0;z-index:99999;background:#FFFDF8;
     display:grid;place-items:center;align-content:center;
     -webkit-tap-highlight-color:transparent}
#rvs .rvs-logo{width:min(76vw,320px);height:auto;overflow:visible}
#rvs .rvs-fond{display:none}   /* le carre blanc du fichier n est pas un element du logo */
/* Le fichier est un carre de 1024 dont le dessin n occupe que le centre :
   mesure, il reste 257 unites de vide sous le mot, soit 25,1 % de la boite,
   donc 75 px a la taille d affichage. Sans correction la baseline tombe
   85 px sous le logo et parait decrochee. On remonte du vide mesure, et on
   garde 24 px d ecart optique. Le calcul suit la taille du logo. */
#rvs .rvs-phrase{margin-top:calc(24px - min(76vw, 320px) * .251);
                 font-family:Inter,sans-serif;font-size:.875rem;
                 letter-spacing:.012em;color:#5A6B62;text-align:center;
                 opacity:0;transform:translateY(8px)}
#rvs .rvs-lettre,#rvs .rvs-eclat{opacity:0}
#rvs .rvs-lettre{animation:rvsLettre .40s cubic-bezier(.22,1,.36,1) both;
                 animation-delay:calc(var(--debut-mot) + var(--r) * 22ms)}
@keyframes rvsLettre{0%{opacity:0;transform:translateY(9px)}
                     100%{opacity:1;transform:translateY(0)}}
@keyframes rvsPhrase{to{opacity:1;transform:translateY(0)}}

/* La sortie : un fondu, pas un glissement. Un glissement ferait croire a une
   navigation ; un fondu dit « c etait un seuil ». */
#rvs.rvs-sort{animation:rvsSortie .34s cubic-bezier(.4,0,1,1) both}
@keyframes rvsSortie{to{opacity:0;visibility:hidden}}

@media (prefers-reduced-motion: reduce){
  #rvs *{animation-duration:.01ms !important;animation-delay:0ms !important}
  #rvs.rvs-sort{animation-duration:.01ms !important}
}

/* LA MARQUE NE SE RECONSTRUIT PAS.
   Une video de l appli sur iPhone, decomposee image par image, montre ce
   qu aucun essai local ne pouvait montrer : iOS affiche d abord SON ecran
   de lancement, l icone maskable, un disque vert avec la marque entiere,
   sur le meme fond #FFFDF8. Il part vers 1 520 ms.
   Le premier reglage faisait alors apparaitre un arc pale et ouvert, seul :
   on demontait sous les yeux du visiteur une marque qu il venait de voir
   complete. Faute de sequence, pas de style.
   Desormais la marque est DEJA ENTIERE quand le splash prend la main : elle
   se pose d un demi-pas d echelle en 0,26 s, ce qui fond le disque d iOS
   dans le logo sans trou. Seuls le mot et la baseline se composent.
   Du tap a l appli : 3,44 s au lieu de 4,28. */

/* Les trois groupes recoivent LA MEME animation et LE MEME centre : ils
   bougent comme un seul corps sans qu on ait a les reunir dans le DOM, ce
   qui obligerait a englober les lettres, placees entre eux. */
#rvs .rvs-feuille,#rvs .rvs-arc,#rvs .rvs-eclat{
  transform-box:view-box;transform-origin:50% 42%;opacity:0;
  animation:rvsMarque .26s cubic-bezier(.22,1,.36,1) both}

/* Le mot et la baseline finissent a 1,06 s : la derniere lettre part a
   0,34 + 14 x 22 ms et dure 0,40 s. Le splash sort a 1,72 s, ce qui laisse
   660 ms de marque complete et immobile pour lire la baseline. */
#rvs{--debut-mot:.34s}
#rvs .rvs-phrase{animation:rvsPhrase .44s cubic-bezier(.22,1,.36,1) .62s both}

@keyframes rvsMarque{0%{opacity:0;transform:scale(1.06)}
                     100%{opacity:1;transform:scale(1)}}

/* ===== LE RAPPEL DU DIAGNOSTIC =====
   Pose en haut de l accueil de l appli quand un diagnostic existe. Il
   repond a la seule question qu on se pose en rouvrant : ou j en suis.
   Meme palette que le reste de la coquille, aucune nouvelle couleur.

   REPLIE PAR DEFAUT. Mesure du 2026-11-01 sur un ecran de 844 px : la
   carte depliee occupait 563 px, soit 67 % de l ecran, et repoussait le
   titre de l accueil a 667 px, donc hors de vue. Un rappel se consulte
   d un coup d oeil ; il ne doit pas confisquer la page d accueil. La
   barre fait 62 px, le reste s ouvre au toucher. */
.rvm{margin:12px 0 14px;border-radius:14px;
     background:#FFFFFF;border:1px solid #E3EAE4;
     box-shadow:0 1px 3px rgba(26,78,48,.06)}

.rvm-barre{display:flex;align-items:center;gap:12px;
           padding:11px 14px;min-height:62px;box-sizing:border-box;
           cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
/* le chevron par defaut de <summary>, des deux cotes */
.rvm-barre::-webkit-details-marker{display:none}
.rvm-barre::marker{content:""}
.rvm-barre:focus-visible{outline:2px solid #1A4E30;outline-offset:2px;border-radius:14px}

.rvm-pastille{flex:0 0 auto;width:40px;height:40px;border-radius:50%;
              display:flex;align-items:center;justify-content:center;
              background:#1A4E30;color:#FFFDF8;
              font:600 1.02rem/1 Fraunces,Georgia,serif;
              font-variant-numeric:tabular-nums}
.rvm-resume{flex:1 1 auto;min-width:0}
.rvm-resume b{display:block;font:600 .88rem/1.25 Inter,sans-serif;color:#1A4E30}
/* #7C8C82, utilise ailleurs pour du texte secondaire, ne donne que
   3,54:1 sur blanc : insuffisant a 12 px. Mesure au pixel rendu.
   #5F7067 donne 5,25:1 et reste dans la meme famille. */
.rvm-resume small{display:block;margin-top:2px;
                  font:.76rem/1.3 Inter,sans-serif;color:#5F7067;
                  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvm-resume i{font-style:normal;color:#2D7A52;font-weight:600}
.rvm-chev{flex:0 0 auto;width:20px;height:20px;color:#9AA89F;
          transition:transform .22s cubic-bezier(.22,1,.36,1)}
.rvm[open] .rvm-chev{transform:rotate(180deg)}

/* Le detail : separe de la barre par un filet, pas par une ombre. */
.rvm-detail{padding:0 14px 14px;border-top:1px solid #EEF3EF}
.rvm-date{margin:11px 0 0;font:.74rem/1.4 Inter,sans-serif;color:#5F7067}

.rvm-actions{margin-top:12px;padding-top:12px;border-top:1px solid #EEF3EF}
.rvm-actions h3{margin:0 0 8px;font:600 .82rem/1.3 Inter,sans-serif;color:#1A4E30}
.rvm-actions ul{margin:0;padding:0;list-style:none}
.rvm-actions li{margin:0 0 6px}
.rvm-actions label{display:flex;gap:9px;align-items:flex-start;cursor:pointer;
                   padding:5px 0;font:.8rem/1.45 Inter,sans-serif;color:#2E3F36}
.rvm-actions input{flex:0 0 auto;width:18px;height:18px;margin:1px 0 0;
                   accent-color:#1A4E30;cursor:pointer}
.rvm-actions input:checked+span{color:#8A978F;text-decoration:line-through}

/* Mettre les actions dans l agenda. Bouton plein, parce que c est la
   seule chose a faire une fois les cases lues, et parce qu un lien
   souligne de plus se serait perdu dans la liste. */
.rvm-agenda{display:flex;align-items:center;justify-content:center;gap:9px;
            width:100%;margin:12px 0 0;padding:12px 14px;min-height:46px;
            box-sizing:border-box;border:1px solid #CFDDD4;border-radius:11px;
            background:#F2F7F3;color:#14301F;cursor:pointer;
            font:600 .83rem/1.25 Inter,system-ui,sans-serif;text-align:center}
.rvm-agenda:hover{background:#E8F0EA}
.rvm-agenda[hidden]{display:none}
.rvm-agenda svg{width:17px;height:17px;flex:0 0 auto;color:#1A4E30}
.rvm-agenda-note{margin:7px 2px 0;font:.72rem/1.45 Inter,system-ui,sans-serif;color:#5F7067}
.rvm-agenda-note[hidden]{display:none}

.rvm-echeance{display:flex;gap:11px;margin-top:13px;padding:11px 12px;
              border-radius:12px;background:#F4F8F5}
.rvm-ech-cadre{flex:0 0 auto;align-self:flex-start;padding:3px 8px;border-radius:999px;
               background:#1A4E30;color:#FFFDF8;
               font:600 .6rem/1.5 Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase}
.rvm-ech-corps strong{display:block;font:600 .82rem/1.35 Inter,sans-serif;color:#1A4E30}
.rvm-ech-quand{display:block;margin:2px 0 4px;font:.72rem/1.3 Inter,sans-serif;color:#9A7520}
.rvm-ech-corps p{margin:0;font:.74rem/1.45 Inter,sans-serif;color:#5A6B62}

.rvm-pied{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.rvm-lien{flex:1 1 auto;min-height:44px;display:flex;align-items:center;justify-content:center;
          padding:0 14px;border-radius:10px;background:#1A4E30;color:#FFFDF8;
          font:600 .78rem/1 Inter,sans-serif;text-decoration:none}
.rvm-lien--doux{background:#FFFFFF;color:#1A4E30;border:1px solid #CFDDD4}

/* la pastille de score sur la tuile du diagnostic, page Outils */
.rvm-badge{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;
           background:#1A4E30;color:#FFFDF8;font:600 .68rem/1.6 Inter,sans-serif;
           vertical-align:middle}

@media (prefers-reduced-motion: reduce){ .rvm *{transition:none !important} }
.rvm-ech-liste{margin:6px 0 0;padding:0 0 0 2px;list-style:none}
.rvm-ech-liste li{margin:0 0 7px;padding-left:13px;position:relative;
                  font:.74rem/1.45 Inter,sans-serif;color:#5A6B62}
.rvm-ech-liste li:before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;
                         border-radius:50%;background:#2D7A52}
.rvm-ech-liste b{color:#1A4E30;font-weight:600}
.rvm-ech-cadre-txt{color:#8A978F}
.rvm-ech-suite{margin:8px 0 0;padding-top:8px;border-top:1px solid #E3EDE6;
               font:.73rem/1.45 Inter,sans-serif;color:#9A7520}
.rvm-ech-suite b{color:#1A4E30}


/* ===== RECHERCHE, DANS LA COQUILLE =====
   COPIE des regles de css/refine.css. Les 5 pages d appli ne chargent
   pas refine.css : l isolation CSS de la coquille est voulue, et cette
   feuille pese 122 Ko de regles de site. On copie les 6 Ko utiles plutot
   que de tout tirer, et on retire le bouton loupe de la barre de
   navigation, que la coquille n a pas.
   SI VOUS MODIFIEZ L UN, MODIFIEZ L AUTRE. */
/* ------------------------------------------------------------------
   RECHERCHE SUR TOUT LE SITE
   ------------------------------------------------------------------
   63 pages indexables, et aucun moyen de chercher dedans avant ceci :
   seuls blog.html, glossaire.html et faq.html filtraient leur propre
   contenu. Le panneau s ouvre depuis le tiroir mobile, depuis la barre de
   navigation et par Ctrl/Cmd + K.

   Pourquoi une feuille creme et non un voile sombre : le panneau s ouvre
   aussi bien depuis le tiroir (vert fonce) que depuis la barre (creme).
   Une seule surface, aux couleurs du site, evite de changer d univers
   selon le point d entree. Toutes les couleurs sont ecrites ici, sans
   heritage : le site peint beaucoup de couleurs en style en ligne, et un
   panneau qui herite finit illisible sur une page et pas sur l autre.
   Borne a @media screen comme le reste de cette feuille. */
@media screen {
  .rv-rech-scrim{position:fixed;inset:0;z-index:2147483646;
                 background:rgba(10,38,21,.52);
                 -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
                 opacity:0;transition:opacity .2s ease}
  .rv-rech-scrim.est-ouvert{opacity:1}

  .rv-rech{position:fixed;inset:0;z-index:2147483647;
           display:flex;justify-content:center;
           padding:min(9vh,76px) 16px 16px;pointer-events:none}
  /* align-self : sans cela la boite est un element flex etire sur toute la
     hauteur du conteneur, et 2 resultats occupent 620 px. */
  .rv-rech-boite{pointer-events:auto;width:100%;max-width:620px;
                 align-self:flex-start;
                 max-height:min(76vh,620px);display:flex;flex-direction:column;
                 background:#FFFDF8;color:#0F1A14;
                 border:1px solid #E3DCC8;border-radius:16px;
                 box-shadow:0 28px 70px -18px rgba(10,38,21,.55);
                 overflow:hidden;
                 opacity:0;transform:translateY(-10px) scale(.985);
                 transition:opacity .2s ease,transform .22s cubic-bezier(.22,1,.36,1)}
  .rv-rech.est-ouvert .rv-rech-boite{opacity:1;transform:none}

  .rv-rech-haut{display:flex;align-items:center;gap:10px;
                padding:12px 14px;border-bottom:1px solid #EFEBDC;
                background:#FFFDF8}
  .rv-rech-loupe{width:20px;height:20px;flex:0 0 auto;color:#3E6B4E}
  /* Le site impose a TOUT input, en !important, un cadre de 1,5 px, un
     rayon de 10 px et un fond blanc (regle html body input:not(...)).
     Un champ de recherche n est pas un champ de formulaire : il doit se
     fondre dans la barre. On ne peut le reprendre qu en !important. */
  .rv-rech-haut input#rv-rech-champ{flex:1 1 auto;min-width:0;
                      border:0!important;outline:0;
                      background:transparent!important;
                      border-radius:0!important;
                      box-shadow:none!important;
                      color:#0F1A14!important;
                      font:500 1.02rem/1.4 Inter,system-ui,sans-serif;
                      padding:8px 2px!important;min-height:0!important;
                      -webkit-appearance:none;appearance:none}
  .rv-rech-haut input::placeholder{color:#7C8A80;font-weight:400}
  .rv-rech-haut input::-webkit-search-cancel-button{-webkit-appearance:none}
  .rv-rech-fermer{flex:0 0 auto;border:1px solid #DCD5C2;background:#F6F2E6;
                  color:#2E4A39;border-radius:9px;cursor:pointer;
                  padding:8px 12px;min-height:36px;
                  font:600 .8rem/1 Inter,system-ui,sans-serif}
  .rv-rech-fermer:hover{background:#EFE9D8}

  .rv-rech-compteur{margin:0;padding:9px 16px 0;
                    font:600 .72rem/1.3 Inter,system-ui,sans-serif;
                    letter-spacing:.07em;text-transform:uppercase;color:#6B7A70}
  .rv-rech-compteur:empty{display:none}

  .rv-rech-liste{list-style:none;margin:0;padding:6px;
                 overflow-y:auto;-webkit-overflow-scrolling:touch}
  /* Le site souligne et dore TOUT lien, en !important
     (html body a:not(.btn):not(.nav-cta)... -> #6b5217 + underline).
     Dans une liste de resultats, 12 titres soulignes en brun sont
     illisibles : on reprend la main, au meme niveau d insistance. */
  .rv-rech-liste a,
  html body .rv-rech-liste a{display:block;padding:11px 12px;border-radius:11px;
                   text-decoration:none!important;color:#13261B!important}
  .rv-rech-liste li.est-choisi a,
  .rv-rech-liste a:hover,
  .rv-rech-liste a:focus-visible{background:#F2EEE0;outline:0}
  .rv-rech-sec{display:block;
               font:700 .66rem/1.3 Inter,system-ui,sans-serif;
               letter-spacing:.09em;text-transform:uppercase;color:#8A6A1F!important}
  .rv-rech-titre{display:block;margin-top:2px;
                 font:600 .98rem/1.35 Inter,system-ui,sans-serif;color:#13261B!important}
  .rv-rech-desc{margin-top:3px;
                font:400 .83rem/1.45 Inter,system-ui,sans-serif;color:#51604F!important;
                display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
                overflow:hidden}
  .rv-rech-liste mark{background:#FBEFC4;color:inherit;
                      border-radius:3px;padding:0 1px}
  .rv-rech-vide{padding:22px 14px;text-align:center;color:#51604F;
                font:400 .9rem/1.5 Inter,system-ui,sans-serif}

  .rv-rech-pied{margin:0;padding:9px 16px calc(10px + env(safe-area-inset-bottom,0px));
                border-top:1px solid #EFEBDC;background:#FBF8EE;
                font:400 .74rem/1.3 Inter,system-ui,sans-serif;color:#6B7A70}
  .rv-rech-sr{position:absolute;width:1px;height:1px;overflow:hidden;
              clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  html.rv-rech-ouverte,html.rv-rech-ouverte body{overflow:hidden}

  /* Bouton dans le tiroir : le tiroir est vert fonce, donc encre claire. */
  .rv-rech-dans-tiroir{display:flex;align-items:center;gap:9px;width:100%;
                       margin:0 0 14px;padding:11px 13px;min-height:46px;
                       background:rgba(255,255,255,.07);
                       border:1px solid rgba(212,168,67,.38);border-radius:12px;
                       color:#F2F6F3;cursor:pointer;text-align:left;
                       font:500 .92rem/1.2 Inter,system-ui,sans-serif}
  .rv-rech-dans-tiroir:hover{background:rgba(255,255,255,.12)}
  .rv-rech-dans-tiroir svg{width:18px;height:18px;flex:0 0 auto;color:#FDE047}

  /* Le tiroir de l appli (#rvam), celui des 50 pages racine, est CREME et
     non vert fonce : l encre claire ci-dessus y serait invisible. */
  /* width explicite : un <button> resout width:auto en « au contenu »
     meme en bloc, donc 100% ne suffit pas et il faut retirer les marges. */
  .rv-rech-dans-tiroir--clair{margin:14px 18px 2px;width:calc(100% - 36px);
                              background:#F1EFE8;border-color:#E2DFD6;
                              color:#1B1C19}
  .rv-rech-dans-tiroir--clair:hover{background:#E9E6DC}
  .rv-rech-dans-tiroir--clair svg{color:#1A4E30}

}
@media (prefers-reduced-motion: reduce){
  .rv-rech-scrim,.rv-rech-boite{transition:none}
}

/* COPIE de css/refine.css : les pages d appli ne chargent pas cette
   feuille (isolation voulue). SI VOUS MODIFIEZ L UN, MODIFIEZ L AUTRE. */
/* ===== LE BAREME DU DIAGNOSTIC, PUBLIE =====
   Le site source chaque loi et chaque seuil ; le score etait le seul
   chiffre qu il demandait de croire sur parole. Le bloc est genere par
   js/diagnostic.js A PARTIR du tableau des questions, donc il ne peut pas
   diverger du calcul reel.
   Le site peint tout <details> en carte blanche a lisere dore et impose
   ses marges aux <table> : on remet a plat avant de styler. */
.md-bareme{margin:18px 0 4px!important;padding:0!important;
           background:#FBFAF7!important;border:1px solid #E6E2D6!important;
           border-radius:14px!important;box-shadow:none!important;
           overflow:hidden}
.md-bareme>summary{display:flex!important;align-items:center;gap:9px;
                   min-height:52px;padding:0 16px;cursor:pointer;
                   list-style:none;
                   font:600 .9rem/1.3 Inter,system-ui,sans-serif;color:#1A4E30}
.md-bareme>summary::-webkit-details-marker{display:none}
.md-bareme>summary::marker{content:""}
.md-bareme>summary:before{content:"";flex:0 0 auto;width:9px;height:9px;
                          border-right:2px solid #7C8C82;border-bottom:2px solid #7C8C82;
                          transform:rotate(45deg);margin-left:2px;transition:transform .2s}
.md-bareme[open]>summary:before{transform:rotate(-135deg)}
.md-bareme-corps{padding:2px 16px 18px;
                 font:.84rem/1.6 Inter,system-ui,sans-serif;color:#3B4A41}
.md-bareme-corps p{margin:0 0 10px!important;font-size:.84rem!important;
                   line-height:1.6!important;color:#3B4A41!important}
.md-bareme-corps strong,.md-bareme-corps b{color:#14301F}
.md-bareme-t{margin:16px 0 6px!important;font-weight:700!important;
             font-size:.7rem!important;letter-spacing:.09em;
             text-transform:uppercase;color:#8A6A1F!important}
.md-bareme-liste{margin:0 0 4px!important;padding:0 0 0 2px!important;list-style:none}
.md-bareme-liste li{margin:0 0 4px;padding-left:13px;position:relative}
.md-bareme-liste li:before{content:"";position:absolute;left:0;top:8px;
                           width:5px;height:5px;border-radius:50%;background:#2D7A52}
.md-bareme-table{width:100%;margin:4px 0 2px!important;border-collapse:collapse;
                 font-size:.82rem;background:none!important;box-shadow:none!important}
.md-bareme-table caption{text-align:left;padding:0 0 6px;
                         font-weight:700;font-size:.7rem;letter-spacing:.09em;
                         text-transform:uppercase;color:#8A6A1F}
.md-bareme-table th,.md-bareme-table td{padding:7px 0;text-align:left;
                                        border-bottom:1px solid #EDE9DD;
                                        background:none!important;color:#3B4A41}
.md-bareme-table th{padding-top:14px;font-weight:700;color:#14301F;
                    border-bottom:1px solid #D9D3C2}
.md-bareme-table tbody:first-of-type th{padding-top:4px}
.md-bareme-pts{width:3.2em;text-align:right!important;font-weight:600;
               color:#14301F!important;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){ .md-bareme>summary:before{transition:none} }

/* ===== LE SECTEUR CHOISI CHANGE L ACCUEIL =====
   Le selecteur « Vous etes ? » ne faisait que sortir de l appli vers une
   page de site, et la frise promettait « les dates qui s appliquent
   reellement a votre etablissement » en les montrant toutes a tout le
   monde. Pour un bistrot, 2 sur 5.
   Les echeances hors champ sont ESTOMPEES, jamais retirees : masquer une
   obligation parce qu elle ne concerne pas aujourd hui serait dangereux. */
.picker .pk.est-choisi{background:#1A4E30!important;border-color:#1A4E30!important;
                       color:#FFFDF8!important;font-weight:600}
.picker .pk.est-choisi i{color:#FDE047!important}
.pk-feuille{display:block;margin:10px 2px 0;padding:11px 0;min-height:44px;
            box-sizing:border-box;
            font:600 .82rem/1.5 Inter,system-ui,sans-serif;color:#1A4E30;
            text-decoration:underline;text-underline-offset:3px}

.tl-resume{margin:0 0 12px!important;padding:10px 12px;border-radius:10px;
           background:#F2F7F3;border:1px solid #DCE7E0;
           font:.8rem/1.5 Inter,system-ui,sans-serif;color:#3B4A41!important}
.tl-resume b{color:#14301F}

.tl .row.vous-concerne{box-shadow:inset 3px 0 0 #1A4E30;padding-left:11px;
                       border-radius:0 8px 8px 0;background:#F6FAF7}
.tl .row.hors-champ{opacity:.58}
/* En fin de ligne, sur la sienne : dans .yr, l etiquette se serrait
   contre la date et sa pastille de cadre et cassait leurs lignes. */
.hors-champ-txt{display:block;margin:9px 0 0!important;padding:5px 9px;
                border-radius:8px;background:#EFEDE4;color:#55614F!important;
                font:600 .68rem/1.4 Inter,system-ui,sans-serif!important;
                letter-spacing:.02em}
.hors-champ-txt:before{content:"";display:inline-block;width:5px;height:5px;
                       margin:0 7px 1px 0;border-radius:50%;background:#A9B3A4;
                       vertical-align:middle}
@media (prefers-reduced-motion: reduce){ .picker .pk,.tl .row{transition:none} }

/* ===== LE DOSSIER : PIECES JUSTIFICATIVES PAR ACTION =====
   Sous chaque action du rappel, une date, une note et une piece. Replie
   par defaut : le rappel a ete degage expres, il ne doit pas regonfler.
   L export n apparait que s il y a quelque chose a exporter. */
.rvd{margin:6px 0 2px 27px!important;background:none!important;border:0!important;
     box-shadow:none!important;padding:0!important;border-radius:0!important}
.rvd>summary{display:flex;align-items:center;gap:6px;min-height:34px;
             list-style:none;cursor:pointer;
             font:.74rem/1.4 Inter,system-ui,sans-serif;color:#5F7067}
.rvd>summary::-webkit-details-marker{display:none}
.rvd>summary::marker{content:""}
.rvd>summary:before{content:"+";flex:0 0 auto;width:17px;height:17px;
                    display:flex;align-items:center;justify-content:center;
                    border:1px solid #CFDDD4;border-radius:5px;
                    font-weight:700;color:#2D7A52;font-size:.8rem;line-height:1}
.rvd[open]>summary:before{content:"–"}
/* « 1 piece » est un element de flex comme un autre : il se laissait
   comprimer et se coupait entre le chiffre et le mot, sur deux lignes,
   pendant que le texte qui suit restait sur la premiere. Mesure a 375 px
   le 2026-11-02. Il ne retrecit plus et ne se coupe plus. */
.rvd>summary b{flex:0 0 auto;white-space:nowrap;color:#1A4E30;font-weight:600}
.rvd-corps{padding:8px 0 10px}
/* .rvm-actions label est en display:flex, pour poser la case a cocher
   a cote de son texte. Mes libelles de formulaire sont DANS ces memes
   <li> : ils heritaient du flex, le libelle se mettait a cote du champ
   et le champ debordait de 21 px hors de la carte, avec defilement
   horizontal de la page. Mesure du 2026-11-02. On reprend la main avec
   une specificite superieure. */
.rvm-actions .rvd-l{display:block!important;margin:0 0 9px;
       font:600 .7rem/1.5 Inter,system-ui,sans-serif;color:#55614F}
.rvm-actions .rvd-l input[type=date],
.rvm-actions .rvd-l textarea,
.rvm-actions .rvd-l input[type=file]{
       display:block;width:100%;max-width:100%;margin-top:3px;box-sizing:border-box!important;
       padding:8px 9px;border:1px solid #DCE4DD!important;border-radius:9px!important;
       background:#fff!important;color:#1B1F1C!important;
       font:400 .82rem/1.45 Inter,system-ui,sans-serif!important;
       min-height:40px!important}
.rvd-l textarea{resize:vertical}
.rvd-etat{margin:2px 0 0!important;font:.72rem/1.5 Inter,system-ui,sans-serif;color:#5F7067!important}
.rvd-oter{margin-left:4px;padding:3px 8px;min-height:30px;
          border:1px solid #DCD5C2;border-radius:7px;background:#F6F2E6;
          color:#7A4A1F;cursor:pointer;
          font:600 .7rem/1 Inter,system-ui,sans-serif}
.rvd-note-bas{margin:8px 0 0!important;font:.68rem/1.5 Inter,system-ui,sans-serif;
              color:#7C8C82!important}
.rvd-export{display:flex;align-items:center;justify-content:center;gap:8px;
            width:100%;margin:12px 0 0;padding:12px 14px;min-height:46px;
            box-sizing:border-box;border:1px solid #1A4E30;border-radius:11px;
            background:#1A4E30;color:#FFFDF8;cursor:pointer;
            font:600 .83rem/1.25 Inter,system-ui,sans-serif}
.rvd-export:hover{background:#15402A}