/* ==========================================================================
   ip.oxmo.org — feuille de style unique
   ==========================================================================

   AUCUNE RESSOURCE EXTERNE. Pas de CDN, pas de police distante, pas d'image
   hebergee ailleurs, pas de fond de carte a tuiles. C'est ce qui permet la CSP
   « default-src 'self' » du vhost : la moindre @import vers un tiers la ferait
   echouer, et le symptome serait une page nue sans erreur cote serveur.

   ---------------------------------------------------------------------------
   LA CHARTE VIENT DE www.forum.oxmo.org/map.php, STYLE « 2010 - GRIS »
   ---------------------------------------------------------------------------
   Valeurs relevees le 2026-08-18 dans la table replacement du forum, jeu 7 :

     #cbcbcb  fond de page        #444444  bordures
     #efefef  bloc                #646464  bandeau de titre, texte #ffffff
     #d6d6d6  alternance, filets  #767676  texte attenue
     #000000  texte               #636363  survol
     #8e8e8e  jauges

   Le forum est PLAT ET CARRE : bandeau de titre plein en tete de chaque bloc,
   bordure franche de 1 px, tables a filets, aucune ombre portee, aucun
   degrade. C'est l'inverse de dnstools.oxmo.org, dont la charte est douce et
   ombree. Ne pas melanger les deux : ce site-ci ressemble au forum.

   ---------------------------------------------------------------------------
   LE THEME SOMBRE N'EXISTE PAS DANS LE FORUM — IL EST DERIVE ICI
   ---------------------------------------------------------------------------
   Donc fragile : chaque jeton defini en clair DOIT l'etre en sombre, et
   reciproquement. Le verificateur du site compare les deux listes et echoue si
   elles different. Ne pas ajouter un jeton d'un seul cote.

   Le sombre est redefini a DEUX endroits, et les deux sont necessaires :
     - @media (prefers-color-scheme: dark), garde par :not([data-theme="light"])
     - :root[data-theme="dark"]
   Sans le premier, un visiteur qui n'a jamais touche a la bascule reste en
   clair alors que son systeme est en sombre. Sans le second, la bascule ne
   peut pas forcer le sombre. La garde :not([data-theme="light"]) est ce qui
   permet a la bascule de forcer le CLAIR chez quelqu'un dont le systeme est en
   sombre -- sans elle, le media query l'emporterait.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons — theme clair
   -------------------------------------------------------------------------- */
:root {
	color-scheme: light;

	--fond:        #cbcbcb;
	--bloc:        #efefef;
	--alt:         #d6d6d6;
	--bord:        #444444;
	--bord-fin:    #b4b4b4;
	--tete:        #646464;
	--tete-txt:    #ffffff;
	--texte:       #000000;
	--attenue:     #767676;
	--lien:        #000000;
	--survol:      #636363;
	--jauge:       #8e8e8e;
	--champ:       #ffffff;
	--actif:       #f0b9a8;

	/* Severites — les seules couleurs qui portent du sens. */
	--ok:          #116600;
	--ok-fond:     #e3ecdf;
	--alerte:      #8a5200;
	--alerte-fond: #f3ead9;
	--ko:          #a8121f;
	--ko-fond:     #f2e0e1;

	/* La carte. Les teintes de terre et d'eau sont de la DONNEE de rendu, pas
	   de la chrome : elles changent entre les deux themes, mais l'epingle non
	   -- voir plus bas. */
	--carte-eau:   #cfe0ea;
	--carte-terre: #e9e5dd;
	--carte-trait: #9a9a9a;
	--carte-moi:   #f5e6c8;

	/* Les deux courbes du test de debit. Elles doivent se distinguer d'un coup
	   d'oeil ET rester lisibles sur les deux themes, d'ou deux teintes
	   franchement opposees plutot que deux nuances d'une meme famille. */
	--courbe-dl:   #116600;
	--courbe-ul:   #cc4c02;

	--police: verdana, tahoma, arial, helvetica, sans-serif;
	--mono:   ui-monospace, "SF Mono", "Cascadia Mono", "DejaVu Sans Mono", menlo, consolas, monospace;
	--large:  1180px;
}

/* --------------------------------------------------------------------------
   2. Jetons — theme sombre
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--fond:        #1c1c1c;
		--bloc:        #262626;
		--alt:         #333333;
		--bord:        #565656;
		--bord-fin:    #414141;
		--tete:        #3a3a3a;
		--tete-txt:    #eaeaea;
		--texte:       #e8e8e8;
		--attenue:     #9d9d9d;
		--lien:        #e8e8e8;
		--survol:      #b5b5b5;
		--jauge:       #6f6f6f;
		--champ:       #1a1a1a;
		--actif:       #7a4030;
		--ok:          #7fc16a;
		--ok-fond:     #22301e;
		--alerte:      #d8a441;
		--alerte-fond: #33291a;
		--ko:          #e8797f;
		--ko-fond:     #331e20;
		--carte-eau:   #24333d;
		--carte-terre: #2c2c2a;
		--carte-trait: #6a6a6a;
		--carte-moi:   #453a24;
		--courbe-dl:   #7fc16a;
		--courbe-ul:   #ec7014;
	}
}
:root[data-theme="dark"] {
	color-scheme: dark;
	--fond:        #1c1c1c;
	--bloc:        #262626;
	--alt:         #333333;
	--bord:        #565656;
	--bord-fin:    #414141;
	--tete:        #3a3a3a;
	--tete-txt:    #eaeaea;
	--texte:       #e8e8e8;
	--attenue:     #9d9d9d;
	--lien:        #e8e8e8;
	--survol:      #b5b5b5;
	--jauge:       #6f6f6f;
	--champ:       #1a1a1a;
	--actif:       #7a4030;
	--ok:          #7fc16a;
	--ok-fond:     #22301e;
	--alerte:      #d8a441;
	--alerte-fond: #33291a;
	--ko:          #e8797f;
	--ko-fond:     #331e20;
	--carte-eau:   #24333d;
	--carte-terre: #2c2c2a;
	--carte-trait: #6a6a6a;
	--carte-moi:   #453a24;
	--courbe-dl:   #7fc16a;
	--courbe-ul:   #ec7014;
}

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

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

body {
	margin: 0;
	padding: 10px;
	background: var(--fond);
	color: var(--texte);
	font-family: var(--police);
	/* 13 px et non les 12 du forum : la page porte des tableaux de donnees
	   qu'on lit longtemps, la ou le forum affiche surtout des titres. La
	   famille et l'interligne sont ceux du forum, l'echelle est d'un cran. */
	font-size: 13px;
	line-height: 1.45;
}

a { color: var(--lien); text-decoration: none; }
a:hover { color: var(--survol); text-decoration: underline; }

h1, h2, h3 { font-family: inherit; }

code, kbd, samp, .mono { font-family: var(--mono); }

.page { max-width: var(--large); margin: 0 auto; }

/* --------------------------------------------------------------------------
   4. Barre de navigation et fil d'Ariane
   -------------------------------------------------------------------------- */
/* LA BARRE PORTE TOUT LE CATALOGUE depuis le retrait de la grille de tuiles :
   une douzaine de boutons au lieu de quatre. Elle passe donc a la ligne, et
   s'aligne a GAUCHE : alignes a droite, les boutons d'une derniere rangee
   incomplete flottaient au milieu de nulle part, loin du fil d'Ariane qui les
   suit. Les trois derniers -- langue, theme, dnstools -- sont pousses a droite
   par une marge automatique : ils ne sont pas des outils. */
/* Les services — langue, theme, dnstools. Alignes a DROITE et non justifies :
   trois boutons etires sur toute la largeur passeraient pour la barre
   principale, alors qu'ils ne mènent a aucun outil. */
.barre-services {
	display: flex; flex-wrap: wrap; justify-content: flex-end;
	align-items: center;
	gap: 4px; margin-bottom: 5px;
}

.barre {
	display: flex; flex-wrap: wrap; justify-content: flex-start;
	align-items: center;
	gap: 4px; margin-bottom: 8px;
}
.barre a, .barre button,
.barre-services a, .barre-services button {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 4px 9px;
	background: var(--bloc);
	border: 1px solid var(--bord);
	border-radius: 3px;
	color: var(--texte);
	font-family: inherit;
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}
.barre a:hover, .barre button:hover,
.barre-services a:hover, .barre-services button:hover { background: var(--alt); color: var(--texte); text-decoration: none; }
.barre a[aria-current="page"] { background: var(--actif); font-weight: bold; }
/* Les pictogrammes de la barre : la meme famille que ceux du catalogue, a la
   taille du texte qui les suit. */
.barre-services svg,
.barre svg { width: 14px; height: 14px; flex: 0 0 auto; opacity: .75; }
.barre a[aria-current="page"] svg { opacity: 1; }
.barre-services svg { opacity: .75; }
.barre .bascule svg { width: 13px; height: 13px; opacity: 1; }

.fil {
	border-bottom: 1px solid var(--attenue);
	padding-bottom: 5px;
	margin-bottom: 10px;
	font-weight: bold;
}
.fil a { text-decoration: none; }

/* ---------------------------------------------------------------------------
   LA BARRE SUR ECRAN ETROIT : UNE GRILLE JUSTIFIEE, AVEC LES LIBELLES
   ---------------------------------------------------------------------------
   Trois essais, et les deux premiers etaient mauvais :

   1. Libelles en ligne, flex : cinq rangees de hauteur inegale a 320 px, soit
      226 px avales avant le premier contenu.
   2. Pictogrammes seuls : compact (67 px) mais illisible -- onze glyphes sans
      un mot, et la derniere rangee collee a droite par le margin-left:auto des
      trois boutons utilitaires.

   3. Celui-ci : une GRILLE. Tous les boutons ont la meme largeur, les rangees
      se remplissent de gauche a droite, et les libelles restent entiers.

   repeat(auto-fill, ...) et NON auto-fit : auto-fit supprime les pistes vides
   et laisserait la derniere rangee etirer ses deux ou trois boutons sur toute
   la largeur. auto-fill garde les pistes, donc un bouton de derniere rangee a
   exactement la largeur des autres. C'est la meme lecon que la grille de
   tuiles, et elle vaut ici aussi.
   --------------------------------------------------------------------------- */
@media (max-width: 700px) {
	.barre {
		display: grid;
		/* QUATRE COLONNES FIXES, et non un auto-fill.
		   Onze outils sur quatre colonnes donnent 4 + 4 + 3 : trois rangees
		   dont la derniere est presque pleine. auto-fill donnait cinq colonnes
		   sur les ecrans larges, donc 5 + 5 + 1 -- une derniere rangee a un
		   seul bouton, qui a l'air d'un oubli. Le nombre de colonnes est donc
		   POSE, pas deduit de la place disponible. */
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 4px;
	}
	.barre a, .barre button {
		justify-content: center;
		/* LE CONTENU DU BOUTON PEUT PASSER A LA LIGNE, et c'est ce qui rend
		   quatre colonnes tenables jusqu'a 320 px.
		   « TRACEROUTE » en capitales demande environ 66 px a lui seul ; avec
		   son pictogramme a gauche il en faut 84, alors qu'une colonne n'en
		   offre que 70 sur un ecran de 320 px. Plutot qu'un point de rupture
		   de plus, on laisse le flex passer a la ligne : le pictogramme monte
		   AU-DESSUS du libelle exactement quand la place manque, et revient a
		   sa gauche des qu'elle existe. La grille egalise les hauteurs, donc
		   la rangee reste droite. */
		flex-wrap: wrap;
		padding: 8px 3px;
		font-size: 10px;
		gap: 1px 4px;
		min-width: 0;
		letter-spacing: .02em;
	}
	/* Aucun libelle n'est coupe : il passe a la ligne sous son pictogramme
	   plutot que de se faire tronquer. Ne pas ajouter de text-overflow ici --
	   un libelle en « TRACER… » ne renseigne personne. */
	.barre .libelle { white-space: nowrap; }
	.barre svg { width: 12px; height: 12px; }
}

/* --------------------------------------------------------------------------
   5. Blocs — la forme de base de toute la page
   -------------------------------------------------------------------------- */
.bloc {
	background: var(--bloc);
	border: 1px solid var(--bord);
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 10px;
}
.bloc > .titre {
	margin: 0;
	padding: 8px 12px;
	background: var(--tete);
	color: var(--tete-txt);
	font-size: 13px;
	font-weight: bold;
}
.bloc > .titre a { color: inherit; text-decoration: underline; }
.bloc > .int { padding: 9px 11px; }
.bloc > .note {
	margin: 0;
	padding: 7px 12px;
	background: var(--alt);
	border-top: 1px solid var(--bord);
	font-size: 11px;
	line-height: 1.5;
	color: var(--texte);
}

.colonnes { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.colonnes > * { flex: 1 1 320px; min-width: 0; }

/* --------------------------------------------------------------------------
   6. Tables de donnees
   -------------------------------------------------------------------------- */
.tab { width: 100%; border-collapse: collapse; }
.tab th, .tab td {
	padding: 4px 6px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--alt);
}
.tab tr:last-child > * { border-bottom: 0; }
.tab th {
	font-size: 11px;
	font-weight: normal;
	color: var(--attenue);
	white-space: nowrap;
	width: 1%;
}
.tab td.val { font-weight: bold; }
.tab td.num { text-align: right; white-space: nowrap; font-family: var(--mono); }
.tab .vide { color: var(--attenue); font-style: italic; font-weight: normal; }

/* Un tableau plus large que son bloc defile DANS son bloc, jamais la page. */
.defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.jauge { height: 8px; background: var(--alt); border-radius: 4px; overflow: hidden; min-width: 40px; }
.jauge i { display: block; height: 100%; background: var(--jauge); }

/* --------------------------------------------------------------------------
   7. Le bloc d'adresse — la reponse a la question du site
   -------------------------------------------------------------------------- */
.adresse { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.adresse .valeurs { flex: 1 1 240px; min-width: 0; }
.adresse .etiquette {
	font-size: 11px; color: var(--attenue);
	text-transform: uppercase; letter-spacing: .06em;
	margin-bottom: 2px;
}
.adresse .v4 {
	font-family: var(--mono);
	font-size: clamp(20px, 4.5vw, 30px);
	line-height: 1.15;
	word-break: break-all;
}
.adresse .v6 {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--attenue);
	word-break: break-all;
	margin-top: 3px;
}
.adresse .actions { display: flex; flex-direction: column; gap: 4px; }

.bouton {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 5px 10px;
	background: var(--alt);
	border: 1px solid var(--bord);
	border-radius: 3px;
	color: var(--texte);
	font-family: inherit; font-size: 11px;
	cursor: pointer;
	text-decoration: none;
}
.bouton:hover { background: var(--bloc); color: var(--texte); text-decoration: none; }
.bouton svg { width: 13px; height: 13px; }

/* --------------------------------------------------------------------------
   8. Formulaires
   -------------------------------------------------------------------------- */
form.saisie { display: flex; gap: 6px; flex-wrap: wrap; }
form.saisie > * { flex: 0 0 auto; }
form.saisie .champ { flex: 1 1 240px; min-width: 0; }

input[type="text"], input[type="url"], input[type="number"], select, textarea {
	width: 100%;
	padding: 5px 7px;
	background: var(--champ);
	color: var(--texte);
	border: 1px solid var(--bord);
	border-radius: 3px;
	font-family: inherit;
	font-size: 13px;
}
textarea { font-family: var(--mono); font-size: 12px; min-height: 150px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--survol); outline-offset: -1px; }

button.envoi {
	padding: 5px 14px;
	background: var(--tete); color: var(--tete-txt);
	border: 1px solid var(--bord); border-radius: 3px;
	font-family: inherit; font-size: 12px; font-weight: bold;
	cursor: pointer;
}
button.envoi:hover { background: var(--survol); }

/* --------------------------------------------------------------------------
   9. La grille des outils
   -------------------------------------------------------------------------- */
.groupe + .groupe { margin-top: 12px; }
.groupe > h3 {
	display: flex; align-items: center; gap: 8px;
	margin: 0 0 6px;
	font-size: 11px; font-weight: bold;
	text-transform: uppercase; letter-spacing: .07em;
	color: var(--attenue);
}
.groupe > h3::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--bord-fin); }

/* Nombre de colonnes FIXE, jamais deduit du contenu : auto-fit supprime les
   pistes vides et donnerait des tuiles de largeurs differentes d'un groupe a
   l'autre selon le nombre d'outils qu'il contient. */
.tuiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 6px;
}
.tuile {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 8px; row-gap: 1px;
	align-content: start;
	padding: 7px 9px;
	background: var(--alt);
	border: 1px solid var(--bord-fin);
	border-radius: 4px;
	color: var(--texte);
	text-decoration: none;
}
.tuile:hover { border-color: var(--bord); background: var(--bloc); color: var(--texte); text-decoration: none; }
.tuile svg { grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--attenue); margin-top: 2px; }
.tuile b { font-size: 12px; }
.tuile span { font-size: 11px; color: var(--attenue); line-height: 1.4; }

/* --------------------------------------------------------------------------
   10. La carte
   -------------------------------------------------------------------------- */
.carte { position: relative; background: var(--carte-eau); }
.carte svg { display: block; width: 100%; height: auto; }
/* vector-effect: non-scaling-stroke N'EST PAS UN DETAIL.
   L'epaisseur d'un trait SVG s'exprime en unites du viewBox, donc elle est
   divisee par le facteur de zoom. Le cadre des Etats-Unis fait 4 000 unites
   affichees sur 480 px : sans cette propriete, un trait de 0,25 unite mesure
   trois centiemes de pixel et AUCUNE frontiere ne se voit -- ce qui etait le
   cas au premier rendu. Avec elle, l'epaisseur est lue en pixels d'ecran et
   reste constante a tous les niveaux de zoom, ce qui est le comportement
   attendu d'une carte. */
.carte .terre,
.carte .region,
.carte .grille { vector-effect: non-scaling-stroke; }

.carte .terre  { fill: var(--carte-terre); stroke: var(--carte-trait); stroke-width: .7; stroke-linejoin: round; }
.carte .moi    { fill: var(--carte-moi); stroke-width: 1; }
.carte .region { fill: none; stroke: var(--carte-trait); stroke-width: .5; opacity: .65; }
.carte .grille { fill: none; stroke: var(--carte-trait); stroke-width: .5; opacity: .28; }

/* L'epingle et son disque de precision NE CHANGENT PAS entre les themes :
   c'est de la donnee, comme le degrade de la carte des membres du forum. */
.carte .halo    { fill: #ec7014; fill-opacity: .18; stroke: #cc4c02; stroke-opacity: .55; stroke-width: 1; vector-effect: non-scaling-stroke; }
.carte .epingle { fill: #cc4c02; stroke: #3a1a05; stroke-width: .5; }
.carte .epingle-oeil { fill: #ffffff; }

.carte .zoom { position: absolute; top: 6px; left: 6px; display: flex; flex-direction: column; }
.carte .zoom button {
	width: 22px; height: 22px; padding: 0;
	background: var(--bloc); color: var(--texte);
	border: 1px solid var(--bord);
	font-family: inherit; font-size: 14px; line-height: 1; cursor: pointer;
}
.carte .zoom button:first-child { border-radius: 3px 3px 0 0; border-bottom: 0; }
.carte .zoom button:last-child  { border-radius: 0 0 3px 3px; }
.carte .zoom button:hover { background: var(--alt); }

.carte .credit {
	position: absolute; right: 4px; bottom: 3px;
	padding: 1px 4px;
	background: color-mix(in srgb, var(--bloc) 85%, transparent);
	border: 1px solid var(--bord-fin);
	border-radius: 2px;
	font-size: 10px; color: var(--attenue);
}

/* --------------------------------------------------------------------------
   10 bis. La courbe du test de debit
   -------------------------------------------------------------------------- */
.courbe {
	position: relative;
	margin: 9px 0 0;
	border: 1px solid var(--bord-fin);
	border-radius: 4px;
	background: var(--alt);
	overflow: hidden;
}
/* La hauteur est posee ICI et non sur le canvas : le script la lit pour
   dimensionner le tampon en pixels reels (densite d'ecran comprise). Un canvas
   dimensionne par CSS seul rend une courbe floue sur un ecran 2x. */
.courbe canvas { display: block; width: 100%; height: 190px; }

.courbe-legende {
	display: flex; flex-wrap: wrap; gap: 4px 16px;
	padding: 5px 9px;
	border-top: 1px solid var(--bord-fin);
	background: var(--bloc);
	font-size: 11px;
}
.courbe-legende span { display: inline-flex; align-items: center; gap: 5px; }
.courbe-legende i {
	width: 14px; height: 3px; border-radius: 2px; flex: 0 0 auto;
}
.courbe-legende .dl i { background: var(--courbe-dl); }
.courbe-legende .ul i { background: var(--courbe-ul); }
.courbe-legende b { font-family: var(--mono); }

/* --------------------------------------------------------------------------
   11. Messages
   -------------------------------------------------------------------------- */
.aide { margin: 7px 0 0; font-size: 11px; line-height: 1.5; color: var(--attenue); }
.aide code { background: var(--alt); padding: 0 3px; border-radius: 2px; }

.message {
	padding: 8px 11px;
	border: 1px solid var(--bord-fin);
	border-radius: 4px;
	font-size: 12px;
	margin-bottom: 10px;
}
.message.ok     { background: var(--ok-fond);     border-color: var(--ok);     color: var(--texte); }
.message.alerte { background: var(--alerte-fond); border-color: var(--alerte); color: var(--texte); }
.message.ko     { background: var(--ko-fond);     border-color: var(--ko);     color: var(--texte); }

/* --------------------------------------------------------------------------
   12. Pied
   -------------------------------------------------------------------------- */
.pied {
	margin-top: 14px;
	padding-top: 8px;
	border-top: 1px solid var(--bord-fin);
	font-size: 11px;
	color: var(--attenue);
	display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center;
}
.pied a { color: var(--attenue); text-decoration: underline; }
.pied a:hover { color: var(--texte); }

/* --------------------------------------------------------------------------
   13. Ecrans etroits
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
	.tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	body { padding: 7px; }
	.tuiles { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
	.colonnes > * { flex: 1 1 100%; }
	.adresse .actions { flex-direction: row; }
}
@media (max-width: 760px) {
	/* 16 px N'EST PAS UN CHOIX ESTHETIQUE. Safari iOS agrandit la page des
	   qu'un champ recoit le focus si sa police descend sous 16 px : la mise en
	   page se decale et il faut repincer pour retrouver le bouton. La valeur
	   est ecrite en pixels et non en rem pour qu'une taille par defaut reduite
	   chez le visiteur ne repasse pas sous le seuil. */
	input[type="text"], input[type="url"], input[type="number"], select, textarea {
		font-size: 16px;
	}
	/* CIBLES TACTILES. Mesure a 390 px avant correction : 26 px de haut pour
	   un lien de pied, 32 px pour un bouton de barre, contre 44 px
	   recommandes au doigt. Le texte reste a sa taille, c'est la zone
	   cliquable qui grandit -- grossir le texte aurait deforme la charte. */
	.pied { gap: 2px 14px; }
	.pied a { display: inline-block; padding: 12px 0; }

	/* La barre de SERVICES ne compte que trois boutons : elle peut se payer
	   une vraie cible tactile sans couter une rangee. Celle des OUTILS est
	   reglee plus bas, dans la grille : a onze boutons, chaque pixel de
	   hauteur se paie en rangees. */
	.barre-services a, .barre-services button { padding: 10px 11px; }
}