/* Une identité sobre : papier crème, vert forêt et caractères locaux. */
:root {
  --fond: #f7f6ef;
  --texte: #203e34;
  --texte-doux: #57685e;
  --accent: #203e34;
  --olive: #dce8a8;
  --bord: #d8ddd0;
  --largeur: 74rem;
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--texte); font-size: 1rem; line-height: 1.7; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
.conteneur { width: min(100% - 3rem, var(--largeur)); margin-inline: auto; }
a { color: inherit; text-underline-offset: .25em; }
a:hover { text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #8b692e; outline-offset: 5px; }
:target { scroll-margin-top: 7rem; }
img { max-width: 100%; }
h1, h2, p { margin-top: 0; }
h1, h2 { font-weight: 500; letter-spacing: -.045em; line-height: 1.12; }
h1 { font-size: clamp(2.6rem, 5.4vw, 4.8rem); }
h2 { font-size: clamp(2rem, 3.5vw, 3.15rem); margin-bottom: 2.5rem; }
.surtitre { font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 1.4rem; }
.evitement { position: fixed; top: -6rem; left: 1rem; padding: .75rem 1rem; background: white; z-index: 50; }
.evitement:focus { top: 1rem; }
.entete { background: var(--fond); border-bottom: 1px solid var(--bord); position: sticky; top: 0; z-index: 20; max-height: 100dvh; overflow-y: auto; }
.entete__barre { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.2rem; }
.marque { display: flex; gap: .7rem; align-items: center; text-decoration: none; flex-shrink: 0; }
.marque__logo { width: 43px; height: 43px; }
.marque__texte { display: flex; flex-direction: column; }
.marque__nom { font-size: 1.28rem; font-weight: 700; letter-spacing: -.04em; }
.marque__sous { font-size: .62rem; color: var(--texte-doux); letter-spacing: .04em; }
.menu__liste { display: flex; align-items: center; gap: 1.7rem; list-style: none; padding: 0; margin: 0; }
.menu__liste a { display: inline-block; text-decoration: none; font-size: .82rem; padding-block: .5rem; }
.menu__liste a:hover { text-decoration: underline; }
.menu__liste .menu__contact { border: 1px solid var(--accent); padding: .65rem 1rem; border-radius: 4px; }
.menu__contact span { margin-left: .8rem; }
.menu__bouton { display: none; }
.bande { padding-block: clamp(3.5rem, 7vw, 6rem); }
.bande + .bande { border-top: 1px solid var(--bord); }
.hero { padding-block: 5rem 4.5rem; }
.hero__grille { display: grid; grid-template-columns: 1.2fr 1fr; gap: 4rem; align-items: center; }
.hero h1 { margin-bottom: 1.6rem; }
.hero h1 em { font-family: Georgia, serif; font-weight: 400; color: #587442; }
.hero__accroche { font-size: 1.1rem; color: var(--texte-doux); max-width: 31rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: 1.8rem; }
.bouton { display: inline-flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: .9rem 1.25rem; border: 1px solid var(--accent); border-radius: 4px; background: var(--accent); color: #fff; text-decoration: none; font-size: .85rem; font-weight: 600; }
.bouton:hover { background: #355545; color: white; }
.lien-simple { font-size: .85rem; }
.lien-simple span { margin-left: .6rem; }
.hero__note { margin: 1.5rem 0 0; font-size: .76rem; color: var(--texte-doux); }
.atelier { position: relative; padding: 2rem 1.1rem 2.5rem; background: #e9ecdc; border-radius: 48% 48% 5px 5px; }
.atelier__etiquette { text-align: center; font-family: Georgia, serif; font-style: italic; font-size: 1.1rem; margin-bottom: 1.3rem; }
.fenetre { background: #fffef9; border: 1px solid #bac5ad; border-radius: 7px; overflow: hidden; transform: rotate(-3deg); box-shadow: 10px 16px 0 #203e340c; }
.fenetre__barre { display: flex; justify-content: space-between; gap: .5rem; border-bottom: 1px solid var(--bord); padding: .8rem; font-size: .6rem; color: var(--texte-doux); }
.fenetre__barre > :first-child { color: #859875; letter-spacing: .12em; }
.fenetre__contenu { text-align: center; padding: 1.8rem 1rem; }
.fenetre__mention { display: block; text-transform: uppercase; font-size: .55rem; letter-spacing: .15em; }
.fenetre__contenu img { display: block; width: 95px; height: 95px; margin: 1.2rem auto; }
.fenetre__contenu p { font: 1.85rem/1.2 Georgia, serif; margin-bottom: 1rem; }
.fenetre__lignes span { display: block; background: #dfe4d6; height: 4px; width: 60%; margin: 6px auto; }
.fenetre__lignes span + span { width: 43%; }
.fenetre__bouton { display: inline-block; background: var(--accent); color: white; padding: .65rem 1rem; margin-top: 1rem; font-size: .65rem; border-radius: 3px; }
.fenetre__bas { display: flex; justify-content: space-between; padding: .9rem; background: #eff1e6; font-size: .56rem; }
.atelier__sceau { position: relative; width: fit-content; margin: .1rem -.6rem -3.5rem auto; padding: .8rem 1rem; background: var(--olive); border: 1px solid #b8c786; border-radius: 4px; font-size: .75rem; transform: rotate(3deg); }
.atelier__sceau span { margin-right: .5rem; }
.services { background: #eeefe5; }
.reperes { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 0; }
.reperes > div { min-width: 0; }
.reperes dt { font-weight: 600; font-size: 1.35rem; margin-bottom: .8rem; }
.reperes dd { margin: 0; color: var(--texte-doux); }
.service { border-top: 1px solid #aab99c; padding-top: 1.5rem; }
.service__numero { font-family: Georgia, serif; font-size: .9rem; color: #667a51; margin-right: 1.25rem; }
.bande__pied { font-size: .85rem; color: var(--texte-doux); margin: 2rem 0 0; max-width: 55rem; }
.garanties { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3.5rem; }
.garanties li { border-top: 1px solid var(--bord); padding-top: 1.25rem; color: var(--texte-doux); font-size: .94rem; }
.garanties strong { display: block; color: var(--texte); font-size: 1.07rem; font-weight: 600; margin-bottom: .6rem; }
.bande--olive { background: var(--accent); color: #f7f6ef; }
.bande--olive .surtitre { color: var(--olive); }
.tarifs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.tarif { padding: 2.2rem; border: 1px solid #6f8171; border-radius: 5px; }
.tarif:nth-child(2) { background: #2b493b; }
.tarif p { margin: 0; }
.tarif__nom { font-size: 1.2rem; }
.tarif__montant { font-size: clamp(3rem, 5.5vw, 4.6rem); letter-spacing: -.06em; line-height: 1.3; margin-top: .6rem !important; }
.tarif__detail { font-size: .85rem; color: #cbd5c5; }
.tarif__suite { padding-top: 1.25rem; margin-top: 1.5rem !important; border-top: 1px solid #637763; color: var(--olive); }
.bouton--creux { background: transparent; color: inherit; border-color: currentColor; }
.tarif .bouton { display: flex; margin-top: 1.5rem; border-color: #859582; }
.bande--olive .bande__pied { color: #cbd5c5; }
.projets { background: #eeefe5; }
.realisations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 1.5rem; padding: 0; margin: 0; list-style: none; }
.realisations li { min-width: 0; }
.realisations a { display: block; text-decoration: none; }
.realisations__vignette { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; border: 1px solid #d3d9ca; }
.realisations__nom { display: block; font-weight: 600; font-size: .98rem; margin-top: .85rem; overflow-wrap: anywhere; }
.realisations__nom::after { content: ' ↗'; }
.realisations a:hover .realisations__nom { text-decoration: underline; }
.note { color: var(--texte-doux); font-size: .82rem; }
.realisations .note { display: block; margin-top: .2rem; }
.bande--sombre { background: #dce8bb; }
#ecrire > .conteneur > p:not(.surtitre) { max-width: 40rem; }
#ecrire .reperes { grid-template-columns: 1fr 1fr 1fr; margin-top: 2.5rem; }
#ecrire .reperes dt { border-top: 1px solid #a9ba8d; padding-top: 1rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; }
#ecrire .reperes dd { color: var(--texte); font-size: .95rem; }
.courriel { overflow-wrap: anywhere; }
.pied { padding-block: 1.7rem; border-top: 1px solid var(--bord); color: var(--texte-doux); font-size: .78rem; }
.pied__barre { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.pied p { margin: 0; }
.pied__version { font-size: .7rem; }
.texte-long { max-width: 48rem; overflow-wrap: anywhere; }
.texte-long h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); margin-bottom: 2rem; }
.texte-long h2 { font-size: 1.45rem; letter-spacing: -.02em; margin: 2.5rem 0 1rem; }
.texte-long h3 { font-size: 1.1rem; }
.texte-long table { display: block; overflow-x: auto; border-collapse: collapse; }
.texte-long th, .texte-long td { text-align: left; padding: .7rem; border: 1px solid var(--bord); }
code { overflow-wrap: anywhere; padding: .15rem .3rem; background: #e9ecdf; border-radius: 3px; }
@media (max-width: 62rem) {
  .entete__barre { flex-wrap: wrap; gap: .8rem; }
  .menu__liste { gap: 1rem; }
  .hero__grille { gap: 2rem; }
  .hero { padding-top: 3.5rem; }
  .realisations { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 46rem) {
  .hero__grille { grid-template-columns: 1fr; gap: 3rem; }
  .hero__texte { max-width: 36rem; }
  .atelier { width: min(100%, 28rem); margin: 0 auto 1rem; }
  .garanties { gap: 1.5rem; }
  #ecrire .reperes { grid-template-columns: 1fr; gap: 1.2rem; }
  .tarif { padding: 1.5rem; }
}
@media (max-width: 34rem) {
  .conteneur { width: calc(100% - 2rem); }
  .entete__barre { padding-block: .8rem; }
  .marque__logo { width: 36px; height: 36px; }
  .marque__nom { font-size: 1.1rem; }
  .marque__sous { max-width: 13rem; }
  .menu__bouton { display: block; font: inherit; font-size: .8rem; padding: .55rem .8rem; background: transparent; border: 1px solid var(--bord); border-radius: 4px; color: var(--texte); cursor: pointer; }
  .menu__bouton[hidden], .menu[hidden] { display: none; }
  .menu { width: 100%; }
  .menu__liste { flex-direction: column; align-items: stretch; gap: .2rem; padding-bottom: .4rem; }
  .menu__liste a { display: block; padding: .6rem; }
  .menu__liste .menu__contact { margin-top: .4rem; }
  .hero { padding-top: 2.5rem; }
  .hero__actions { align-items: flex-start; flex-direction: column; }
  .surtitre { font-size: .63rem; }
  .reperes, .garanties, .tarifs, .realisations { grid-template-columns: 1fr; }
  .realisations { gap: 2rem; }
  h2 { margin-bottom: 2rem; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .bouton { transition: background-color .18s; }
}
@media print {
  .entete { position: static; }
  .menu, .menu__bouton, .atelier, .evitement { display: none; }
  .bande { padding-block: 1.5rem; }
  .hero__grille { display: block; }
  .bande--olive, .bande--sombre { background: white; color: #203e34; }
  .tarif__detail, .tarif__suite, .bande--olive .bande__pied, .bande--olive .surtitre { color: #203e34; }
  .tarif:nth-child(2) { background: white; }
  .tarif, .realisations li { break-inside: avoid; }
}

/* ===================================================================
   L'ADMINISTRATION

   Elle n'a rien a voir avec la vitrine : c'est un outil de travail, pas une
   page de vente. Meme palette, meme typographie, mais des formes sobres et
   denses — on y passe du temps, on n'y est pas seduit.

   Tout ce bloc est sous « .admin » ou prefixe « admin- » : rien ici ne peut
   deborder sur les pages publiques.
   =================================================================== */

.titre-page { padding: 2.5rem 0 1rem; }
.titre-page h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: .5rem; }

.admin-barre {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: .8rem 0;
  border-top: 1px solid var(--bord);
  border-bottom: 1px solid var(--bord);
  font-size: .9rem;
}
.admin-barre nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.admin-barre a { text-decoration: none; }
.admin-barre a:hover, .admin-barre a[aria-current] { text-decoration: underline; }
.admin-barre a[aria-current] { font-weight: 600; }

/* Un bouton qui n'en a pas l'air : pour une action secondaire au milieu du
   texte, la ou un vrai bouton appellerait le pouce a tort. */
.lien-bouton {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .25em;
  cursor: pointer;
}
.lien-bouton:hover { text-decoration: none; }

.admin-connexion { max-width: 24rem; padding-bottom: 4rem; }

.champ { display: block; margin: 0 0 1.25rem; }
.champ label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.champ input[type="text"], .champ input[type="password"], .champ input[type="search"],
.champ input[type="email"], .champ input[type="number"], .champ textarea, .champ select {
  width: 100%;
  padding: .6rem .7rem;
  border: 1px solid var(--bord);
  border-radius: 4px;
  background: #fff;
  color: inherit;
  font: inherit;
}
.champ .note { display: block; margin-top: .3rem; font-size: .82rem; color: var(--texte-doux); }

.message {
  padding: .9rem 1.1rem;
  margin: 0 0 1.5rem;
  border: 1px solid var(--bord);
  border-radius: 4px;
  background: #fff;
}
.message p { margin: 0 0 .4rem; }
.message p:last-child { margin-bottom: 0; }
.message ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.message--ok { border-color: #9ab37f; background: #f2f6e8; }
.message--erreur { border-color: #b5302d; background: #fbeceb; color: #7d1d1b; }

.note { font-size: .85rem; color: var(--texte-doux); }

/* ---------- les ecrans de prospection ---------- */

.admin { padding-bottom: 5rem; }
.admin h2 { font-size: 1.15rem; margin: 2.5rem 0 .6rem; }
.admin-form { max-width: 34rem; margin-top: 1rem; }
.deux { display: grid; gap: 0 1rem; grid-template-columns: 1fr 1fr; }

/* Deux listes et non un filtre : on doit voir d'un coup d'oeil laquelle on
   regarde, et combien il y a dans l'autre. */
.onglets { display: flex; gap: 1.5rem; margin: 1.5rem 0 1rem; border-bottom: 1px solid var(--bord); }
.onglets a { padding: .5rem 0; text-decoration: none; border-bottom: 2px solid transparent; }
.onglets a[aria-current] { border-bottom-color: var(--accent); font-weight: 600; }
.onglets__nombre {
  display: inline-block;
  margin-left: .3rem;
  padding: 0 .4rem;
  border-radius: 10px;
  background: var(--bord);
  font-size: .78rem;
}

/* Les lignes sont hautes : on les parcourt vite, et on les touche au doigt. */
.prospects, .refus { list-style: none; margin: 0 0 2rem; padding: 0; }
.prospects li, .refus li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--bord);
}
.prospects a { display: block; flex: 1; min-width: 0; padding: .8rem 0; text-decoration: none; }
.prospects strong { display: block; }
.prospects .note { display: block; margin-top: .1rem; }
.prospects__ok { color: #4a7c2f; font-weight: 600; }
.refus li { padding: .8rem 0; }
.refus form { flex-shrink: 0; }

/* La note : plus elle est haute, plus le site a de defauts mesures. Elle n'est
   affichee que si elle vaut quelque chose — un zero partout ne dirait rien. */
.prospects__note {
  flex-shrink: 0;
  min-width: 2rem;
  padding: .15rem .5rem;
  border-radius: 4px;
  background: #f0d9d6;
  color: #7d1d1b;
  font-weight: 600;
  font-size: .9rem;
  text-align: center;
}

.fiche h2 { margin-top: 2rem; }
.constats { margin: .5rem 0 0; padding-left: 1.2rem; }
.constats li { margin-bottom: .25rem; }
.liens-recherche { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* Mesure a zero : la meme place dans la liste, mais rien d'alarmant. */
.prospects__note--nulle { background: #e4ece2; color: #3c5e3a; }

/* Visite, mais rien de mesurable : ni bon ni mauvais, juste illisible par une
   machine. Donc ni vert ni rouge. */
.prospects__note--muette { background: #eceae4; color: #5d564a; }

/* Les mesures du site d'un prospect. La note en tete, les constats dessous. */
.fiche__note { margin: .8rem 0 0; }
.fiche__note strong { color: #7d1d1b; }

/* Mesurer est separe d'enregistrer : deux formulaires, deux boutons, et celui
   qui part sur le reseau est le plus discret des deux. */
.fiche__mesure { margin: 1.2rem 0 0; }
.fiche__mesure .note { display: block; margin-top: .4rem; }
.bouton--discret {
  background: transparent;
  border: 1px solid var(--bord);
  color: inherit;
}
.bouton--discret:hover { border-color: var(--accent); color: var(--accent); }

.fiche__retrait { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--bord); }
.fiche__retrait .lien-bouton { color: #7d1d1b; }

@media (max-width: 34rem) {
  .deux { grid-template-columns: 1fr; }
}

/* Une adresse au nom d'une personne : signalee, jamais interdite. Elle demande
   d'ecrire autrement, pas de renoncer. */
.prospects__perso { color: #8b692e; font-weight: 600; }

.zones__actions { display: flex; gap: 1rem; flex-shrink: 0; }

/* La seconde ligne d'une fiche dans la liste : les signes qui aident a trier
   d'un coup d'oeil — domaine, telephone, courriel, etat. */
.prospects__signes { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin-top: .15rem; }
.prospects__site { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }

/* La barre d'avancement du balayage.
   PAR PALIERS DE 5 %, et non par un style="width:37%" : la CSP du site porte
   style-src 'self', qui refuse le style en ligne exactement comme script-src
   refuse le script en ligne. Vingt-une classes valent mieux qu'un en-tete
   affaibli — et a l'oeil, 5 % d'ecart sur une barre ne se voit pas. */
.avancement {
  height: .9rem;
  margin: 1rem 0 .5rem;
  border: 1px solid var(--bord);
  border-radius: 999px;
  overflow: hidden;
  background: #f3f5ef;
}
.avancement__barre {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width .4s ease;
}
.avancement__barre--0 { width: 0%; }
.avancement__barre--5 { width: 5%; }
.avancement__barre--10 { width: 10%; }
.avancement__barre--15 { width: 15%; }
.avancement__barre--20 { width: 20%; }
.avancement__barre--25 { width: 25%; }
.avancement__barre--30 { width: 30%; }
.avancement__barre--35 { width: 35%; }
.avancement__barre--40 { width: 40%; }
.avancement__barre--45 { width: 45%; }
.avancement__barre--50 { width: 50%; }
.avancement__barre--55 { width: 55%; }
.avancement__barre--60 { width: 60%; }
.avancement__barre--65 { width: 65%; }
.avancement__barre--70 { width: 70%; }
.avancement__barre--75 { width: 75%; }
.avancement__barre--80 { width: 80%; }
.avancement__barre--85 { width: 85%; }
.avancement__barre--90 { width: 90%; }
.avancement__barre--95 { width: 95%; }
.avancement__barre--100 { width: 100%; }

/* Les deux boutons de tri d'une ligne de prospect : NON (ou Reprendre) et
   Supprimer. Discrets, a droite, et separes de la note. Sur telephone ils
   passent sous le nom plutot que de serrer la ligne. */
.prospects__tri {
  display: flex;
  flex-shrink: 0;
  gap: .9rem;
  align-items: center;
}
.prospects__tri .lien-bouton { font-size: .85rem; white-space: nowrap; }
.lien-bouton--danger { color: #7d1d1b; }

/* La confirmation de suppression : cote serveur, donc un vrai formulaire. */
.confirmation { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }

@media (max-width: 40rem) {
  .prospects__tri { width: 100%; justify-content: flex-end; margin-top: .4rem; }
}

/* « Vérifié, à contacter » : le seul bouton de tri qui dise oui, donc le seul
   qui ait une couleur une fois actif. Les deux autres restent discrets. */
.lien-bouton--retenu { color: #2c5c3a; font-weight: 600; }

/* Les raccourcis de tri, sous les onglets. */
.prospects__raccourcis { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: .6rem 0 0; }
.prospects__raccourcis a[aria-current] { font-weight: 600; color: var(--accent); }

/* La selection par cases a cocher, et la barre d'actions groupees. */
.prospects__case {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin-right: .2rem;
  accent-color: var(--accent);
}
.prospects__groupe {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
  margin: 1.2rem 0 .4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bord);
}
.prospects__groupe .note { margin: 0; }

/* Le brouillon de courriel : largeur confortable, police a espacement fixe
   pour que les marqueurs en capitales et l'indentation des observations se
   voient comme dans un logiciel de courrier en texte brut. */
.brouillon {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* L'etat d'un prospect, en badge. Il se lisait comme un mot parmi les autres,
   a cote d'un bouton intitule « A contacter » — et le bouton passait pour
   l'etat. Un badge ne se confond pas avec un verbe. */
.prospects__etat {
  padding: .1rem .45rem;
  border-radius: 3px;
  background: #ecebe4;
  color: #5d564a;
  font-size: .8rem;
  white-space: nowrap;
}
.prospects__etat--a_contacter { background: #e4ece2; color: #2c5c3a; }
.prospects__etat--ecrit       { background: #e6e9f0; color: #35496b; }
.prospects__etat--repondu     { background: #e6e9f0; color: #35496b; font-weight: 600; }
.prospects__etat--client      { background: var(--accent); color: #fff; font-weight: 600; }

/* ---- L'administration des prospects, refaite ----
   L'ecran avait pousse par couches : onglets, raccourcis, cases, barre
   groupee, boutons de ligne. Un fichier de prospects est une base de donnees :
   la bonne forme est celle d'une administration de catalogue — des selecteurs
   qui composent, un tableau triable, des pages. */

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.2rem;
  align-items: flex-end;
  margin: 1.2rem 0;
  padding: 1rem;
  border: 1px solid var(--bord);
  border-radius: 4px;
  background: #fafbf8;
}
.filtres .champ { margin: 0; flex: 1 1 12rem; }
.filtres .champ--court { flex: 0 1 10rem; }
.filtres__boutons { display: flex; gap: 1rem; align-items: center; margin: 0; }

.liste-entete {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin: 1.4rem 0 .6rem;
}

/* Le cadre laisse le tableau defiler seul sur un petit ecran, plutot que de
   pousser toute la page vers la droite. */
.tableau-cadre { overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tableau th, .tableau td {
  padding: .55rem .6rem;
  border-bottom: 1px solid var(--bord);
  text-align: left;
  vertical-align: top;
}
.tableau thead th {
  border-bottom: 2px solid var(--bord);
  font-size: .85rem;
  white-space: nowrap;
}
.tableau thead a { text-decoration: none; }
.tableau thead a:hover { text-decoration: underline; }
.tableau tbody tr:hover { background: #fafbf8; }
.tableau__case { width: 2.2rem; }
/* « Tout cocher » : un lien, dans l'en-tete de la colonne des cases. Plus
   grand que le texte voisin pour que la case dessinee fasse la taille des
   vraies cases en dessous. */
.tableau thead .tableau__case a {
  display: inline-block;
  font-size: 1.15rem;
  line-height: 1;
  text-decoration: none;
}
.tableau__nombre { text-align: right; white-space: nowrap; }
.tableau__sous { display: block; margin-top: .15rem; }
.tableau a { color: inherit; }

/* Une case a cocher seule, hors fieldset : « profession liberale », a cote du
   prenom. Le meme alignement que les choix d'observation. */
.choix--seul { margin: .6rem 0 1rem; }

.pages { display: flex; gap: 1.2rem; align-items: center; margin: 1rem 0; }

/* Lu par les lecteurs d'ecran, invisible a l'oeil : l'en-tete de la colonne
   des cases n'a rien a montrer, mais un tableau sans en-tete de colonne est
   illisible pour qui l'ecoute. */
.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Le choix de ce que le courriel dira, fait AVANT la fabrication. */
.choix-courriel fieldset {
  margin: 0 0 1rem;
  padding: .9rem 1rem;
  border: 1px solid var(--bord);
  border-radius: 4px;
}
.choix-courriel legend { padding: 0 .4rem; font-weight: 600; }
.choix { display: flex; gap: .6rem; align-items: flex-start; margin: .5rem 0; }
.choix input { margin-top: .25rem; flex-shrink: 0; accent-color: var(--accent); }
.choix label { cursor: pointer; }
.choix .note { display: block; margin-top: .15rem; }
.refaire { margin: 1rem 0; }
.refaire summary { cursor: pointer; }
.refaire > form { margin-top: .8rem; }