/* ============================================================
   FPRO - base.css - commun a tous les sites, toutes directions
   Ne porte que la structure : grilles, positions, responsive,
   accessibilite, formulaires. L'allure (polices, couleurs, rayons,
   filets) vient de direction-N.css, les couleurs d'accent de themes.css.
   Version 5
   ============================================================ */

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

:root {
  --gouttiere: 24px;
  --largeur: 1120px;
  --largeur-texte: 62ch;
  --r: 12px;
  --t-rapide: .15s ease;
  --titres: Georgia, serif;
  --corps: system-ui, sans-serif;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--corps);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video { max-width: 100%; height: auto; display: block; }
img { background: var(--accent-clair); }

h1, h2, h3, h4 {
  font-family: var(--titres);
  line-height: 1.12;
  margin: 0 0 .5em;
  text-wrap: balance;
}
p { margin: 0 0 1em; }
p:last-child, ul:last-child, ol:last-child, dl:last-child, table:last-child { margin-bottom: 0; }
a { color: var(--accent-fonce); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
strong { font-weight: 650; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--accent-clair); color: var(--encre); }

/* --- utilitaires ---------------------------------------------------------- */

.contenant { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }
.evite { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lien-evitement { position: absolute; left: var(--gouttiere); top: -100px; z-index: 100; background: var(--accent); color: var(--accent-contraste); padding: 10px 16px; border-radius: 8px; transition: top var(--t-rapide); }
.lien-evitement:focus { top: 10px; }
.etiq { display: block; margin: 0 0 14px; }
.mention { font-size: .85rem; color: var(--encre-2); }
/* Sur un telephone etroit, un titre de metier peut etre plus large que
   l'ecran a lui seul : « Kinesitherapeute » fait seize lettres, et a la taille
   prevue il sortait de la page. Deux mesures, dans cet ordre. D'abord le titre
   descend d'un cran en dessous de 420 pixels : a cette taille, le mot le plus
   long du metier tient dans la colonne, et rien ne se coupe. Ensuite seulement,
   et uniquement si cela ne suffisait pas, le mot se coupe plutot que de faire
   defiler la page de travers ; on a vu « Kinesitherap / eute a Tours » avant
   d'ajouter la premiere mesure, et cela se lit comme une page cassee.
   La ligne de signature de l'enseigne s'efface aussi : la barre haute est
   collante, et trois lignes de nom plus deux de signature mangeaient un
   cinquieme de l'ecran. C'est la regle deja retenue pour la marque FPRO. */
@media (max-width: 420px) {
  .accueil h1 { font-size: clamp(1.9rem, 1.2rem + 3.6vw, 2.6rem); }
  .accueil h1, .section__tete h2 { overflow-wrap: anywhere; }
}
h1, h2, h3, .etiq, .accueil__sur { overflow-wrap: break-word; }

.mesure { max-width: var(--largeur-texte); }
.contenant.mesure { max-width: calc(var(--largeur-texte) + 2 * var(--gouttiere)); }
/* pages annexes (mentions, confidentialite) : un titre de page, pas un titre d'accueil */
.section .mesure h1 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.9rem); margin-bottom: 1em; }
.section .mesure h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); margin-top: 1.6em; }
[id] { scroll-margin-top: 84px; }

/* --- boutons -------------------------------------------------------------- */

.bouton {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 20px; min-height: 48px;
  border: 1px solid transparent; border-radius: var(--r);
  font-family: var(--corps); font-size: .95rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background var(--t-rapide), border-color var(--t-rapide), color var(--t-rapide), transform var(--t-rapide);
}
.bouton:active { transform: translateY(1px); }
.bouton svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bouton--plein { background: var(--accent); color: var(--accent-contraste); }
.bouton--plein:hover { background: var(--accent-fonce); color: var(--accent-contraste); }
.bouton--contour { border-color: var(--trait-fort); color: var(--encre); background: transparent; }
.bouton--contour:hover { border-color: var(--accent); color: var(--accent-fonce); background: var(--accent-clair); }
.bouton--discret { background: var(--accent-clair); color: var(--accent-fonce); }
.bouton--discret:hover { background: var(--accent); color: var(--accent-contraste); }
.boutons, .accueil__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- en-tete -------------------------------------------------------------- */

.entete { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--trait); }
/* 24 septembre : une marque plus haute que l'en-tete (nom manuscrit du fleuriste)
   ne doit jamais toucher le trait du bas. Huit pixels de marge, toujours. */
.entete__in { display: flex; align-items: center; gap: 20px; min-height: 68px; padding-block: 8px; }
/* La marque : le nom, sa ligne, et depuis la version 9 un logo facultatif.
   Le logo se pose a gauche, sur les deux rangees, et le nom reste ecrit : un
   logo accompagne un nom, il le remplace rarement, et la regle tient pour
   n'importe quelle forme de logo, carre, rond ou longue marque horizontale.
   Sans logo, la grille n'a qu'une colonne et rien ne change a l'ecran. */
.marque { color: var(--encre); text-decoration: none; margin-right: auto; line-height: 1.1;
  display: grid; grid-template-columns: auto; align-items: center; column-gap: 10px; }
.marque__nom { display: block; }
.marque__ligne { display: block; font-family: var(--corps); font-weight: 400; color: var(--encre-2); }
/* La barre haute est collante : sur un telephone etroit, trois lignes de nom
   plus deux de signature mangeaient un cinquieme de l'ecran. La signature
   s'efface, comme elle le fait deja pour la marque FPRO sur la vitrine. */
@media (max-width: 420px) { .marque__ligne { display: none; } }
.marque--logo { grid-template-columns: auto auto; }
.marque__logo { grid-row: 1 / span 2; grid-column: 1; display: block; height: 36px; }
.marque__logo img, .marque__logo svg { display: block; height: 100%; width: auto; max-width: 140px; object-fit: contain; }
.marque--logo .marque__nom, .marque--logo .marque__ligne { grid-column: 2; }
/* Un libelle de menu ne se coupe jamais en deux. Sans cette regle, les liens
   sont des elements flexibles qui retrecissent jusqu'a leur plus petit mot des
   que l'enseigne est longue : a 1600 pixels, une boulangerie affichait « Les /
   pains », « La / vitrine », « Le / fournil », et son numero de telephone
   coupe en deux dans le bouton d'appel. C'est la barre entiere qui passe a la
   ligne quand la place manque, jamais un mot. */
.nav { display: none; flex-wrap: wrap; }
.nav a { color: var(--encre-2); text-decoration: none; padding: 8px 12px; white-space: nowrap; }
.entete .bouton { white-space: nowrap; }
.nav a:hover { color: var(--encre); }
.entete .bouton { display: none; }
@media (min-width: 960px) {
  .nav { display: flex; gap: 2px; }
  .entete .bouton { display: inline-flex; }
  .nav { min-width: 0; }
}
/* Entre 960 et 1180 pixels, une enseigne longue, huit ou neuf entrees de
   menu et le bouton d'appel ne tiennent pas sur une ligne : la barre
   debordait de l'ecran, jusqu'a 103 pixels. Plutot que de masquer le bouton
   d'appel, qui est ce qui fait sonner le telephone, le menu passe a la ligne
   en dessous. La regle ne depend ni de la longueur de l'enseigne ni du
   nombre de rubriques : elle tient pour les seize metiers. */
@media (min-width: 960px) and (max-width: 1179px) {
  .entete__in { flex-wrap: wrap; row-gap: 0; }
  .nav { order: 3; flex-basis: 100%; justify-content: flex-start; margin-left: -12px; padding-bottom: 6px; }
}

/* Garde-fou commun a toutes les grilles.
   Une grille qui ne declare pas ses colonnes n'en a qu'une, implicite, et
   celle-ci se dimensionne sur son contenu : il suffit d'une adresse longue ou
   d'un tableau pour qu'elle pousse la page hors de l'ecran d'un telephone.
   « grid-auto-columns » ne touche QUE les colonnes implicites : une grille qui
   declare ses colonnes n'est pas concernee, et rien ne bouge chez elle. Les
   seize feuilles de metier comptent une centaine de grilles de ce genre ; les
   borner une par une aurait laisse passer la suivante.
   -------------------------------------------------------------------------- */
main *, .entete *, .pied * { grid-auto-columns: minmax(0, 1fr); }

/* La fiche « terme / valeur » sur une ligne, que huit metiers emploient sous
   des noms differents (remb__faits, urgence__faits, livraison__faits...).
   Quand la place manque, la valeur passe sous son terme au lieu de pousser la
   page hors de l'ecran. Un seul metier avait ete rustine dans son coin, ce qui
   est exactement le defaut que cet audit cherchait : une regle posee pour un
   pack et pas pour les quinze autres. Elle est ecrite ici, une fois. */
[class$="__faits"] > div { flex-wrap: wrap; }
[class$="__faits"] > div > * { min-width: 0; }
@media (max-width: 480px) {
  [class$="__faits"] > div { flex-direction: column; gap: 2px; }
  html [class$="__faits"] > div > dd { text-align: left; }
}

/* --- accueil -------------------------------------------------------------- */

.accueil { padding-block: clamp(40px, 6vw, 88px) clamp(36px, 5vw, 64px); }
/* Une colonne qui peut retrecir, et des elements qui l'acceptent.
   Sans « minmax(0, 1fr) », la colonne se dimensionne sur le contenu le plus
   large et ne descend jamais en dessous : un nom de commune insecable
   (« Aix-en-Provence ») suffisait alors a pousser toute la page hors de
   l'ecran sur un telephone. Le « min-width: 0 » leve la taille minimale
   automatique des elements de grille, qui annulait la meme correction. */
.accueil__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.accueil__in > *, .accueil__texte > * { min-width: 0; }
.accueil__actions { flex-wrap: wrap; }
.accueil h1 { margin-bottom: .3em; }
.accueil__sous { color: var(--encre-2); margin-bottom: 1em; }
.accueil__corps { max-width: 46ch; color: var(--encre-2); }
.accueil__corps p:last-child { margin-bottom: 0; }
/* Un palier doit se voir. Mesure du 14 septembre sur l'accueil centre : le
   titre laisse 22 px avant son sous-titre, le sous-titre 20 px avant le
   paragraphe, et le paragraphe 28 px avant une paire de boutons de 48 px de
   haut. Trois paliers presque egaux, dont le dernier precede le bloc le plus
   lourd de la page : l'oeil ne lit pas une respiration, il lit une ligne
   collee sous la precedente. Le pas avant les boutons vaut donc le double du
   pas entre deux lignes de texte, et les deux boutons se decollent l'un de
   l'autre. */
.accueil__actions { margin-top: 40px; gap: 16px; }
.accueil__media { position: relative; }
.portrait { margin: 0; overflow: hidden; background: var(--accent-clair); aspect-ratio: 4 / 5; width: 100%; max-width: 440px; margin-inline: auto; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.accueil__note { display: none; }
@media (min-width: 900px) {
  .accueil__in { grid-template-columns: 1.1fr .9fr; gap: 64px; }
  .portrait { margin-inline: 0 0; margin-left: auto; }
}

/* --- compositions d'accueil ------------------------------------------------
   La direction fait le caractere, la palette fait la couleur, la composition
   fait le plan. Trois plans possibles pour le meme contenu, tires au sort
   comme le reste : deux confreres de la meme ville ne tombent pas dessus en
   meme temps. Sur telephone, tout revient a une colonne de toute facon.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  /* image a gauche, texte a droite */
  html[data-compo="gauche"] .accueil__in { grid-template-columns: .9fr 1.1fr; }
  html[data-compo="gauche"] .accueil__texte { order: 2; }
  html[data-compo="gauche"] .accueil__media { order: 1; }
  html[data-compo="gauche"] .portrait { margin-left: 0; margin-right: auto; }
  html[data-compo="gauche"] .portrait img { object-position: center 22%; }
}

/* Entre le telephone et 900 px, la page reste sur une colonne, mais la photo
   est bornee a 440 px et se centrait, pendant que le titre et le sous-titre
   commencent au bord gauche. Cela faisait un decalage de plusieurs dizaines
   de pixels entre le haut du titre et le haut de la photo, sans raison
   visible : defaut vu par Krikor le 18 septembre. La photo suit desormais le
   texte. Le plan « bandeau » n est pas concerne, son texte est centre et sa
   photo doit l etre aussi. */
@media (max-width: 899.98px) {
  html[data-compo="droite"] .portrait,
  html[data-compo="gauche"] .portrait { margin-inline: 0 auto; }
}

/* accueil sans image : le titre porte la page. Le plan du client qui n'a pas
   encore envoye de photo, et de celui qui n'en veut pas.

   Un titre seul dans le coin haut gauche d'une page blanche ne se lit pas
   comme un parti pris, il se lit comme une image qui n'a pas charge. Le
   remede n'est pas de remplir le vide avec un dessin, c'est de le fermer :
   le haut de page devient un bandeau teinte qui va d'un bord a l'autre, et
   la bande de reperes qui le suit entre dans le meme bandeau. Le nom, la
   phrase, les trois chiffres utiles : c'est une page de titre, et il n'y
   manque rien. */
html[data-compo="aucun"] .accueil {
  background: var(--fond-2);
  padding-block: clamp(64px, 10vw, 150px) clamp(44px, 6vw, 84px);
}
html[data-compo="aucun"] .accueil__in { grid-template-columns: minmax(0, 1fr) !important; }
html[data-compo="aucun"] .accueil h1 { font-size: clamp(2.6rem, 1.9rem + 4.2vw, 5.2rem); max-width: 18ch; }
html[data-compo="aucun"] .accueil__sous { max-width: 52ch; font-size: 1.15rem; }
html[data-compo="aucun"] .accueil__corps { max-width: 60ch; columns: 1; }
html[data-compo="aucun"] .accueil + .chiffres {
  background: var(--fond-2);
  border-top: 1px solid var(--trait);
  padding-block: clamp(22px, 2.6vw, 34px);
}
@media (min-width: 900px) {
  /* Le nom a gauche, ce qu'on fait a droite : les deux moities du bandeau
     portent chacune quelque chose, et la place de l'image ne se devine plus.
     Les lignes sont posees a la main parce que le surtitre et la phrase
     d'accroche sont facultatifs : une rangee vide se referme toute seule,
     alors qu'un placement automatique decalerait la colonne de droite. */
  html[data-compo="aucun"] .accueil__texte {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    grid-template-rows: auto auto auto;
    column-gap: clamp(48px, 5vw, 88px);
    align-items: end;
  }
  html[data-compo="aucun"] .accueil__sur    { grid-area: 1 / 1 / 2 / 2; }
  html[data-compo="aucun"] .accueil h1      { grid-area: 2 / 1 / 3 / 2; max-width: none; }
  html[data-compo="aucun"] .accueil__sous   { grid-area: 3 / 1 / 4 / 2; margin-bottom: 0; }
  html[data-compo="aucun"] .accueil__corps  { grid-area: 1 / 2 / 4 / 3; columns: 1; max-width: 46ch; }
  html[data-compo="aucun"] .accueil__actions { grid-area: 4 / 1 / 5 / 3; margin-top: 48px; }
  html[data-compo="aucun"] .accueil__corps p:first-child { margin-top: 0; }
  html[data-compo="aucun"] .accueil__corps p:last-child { margin-bottom: 0; }
}

/* accueil pleine largeur : le texte au centre, l'image en bandeau dessous.
   Le plan qui convient a une photo de salle, de vitrine ou de chantier,
   c'est-a-dire tout ce qui est plus large que haut. */
html[data-compo="bandeau"] .accueil__in { grid-template-columns: minmax(0, 1fr) !important; gap: 36px; }
html[data-compo="bandeau"] .accueil__texte { max-width: 40rem; margin-inline: auto; text-align: center; }
html[data-compo="bandeau"] .accueil__corps { max-width: 54ch; margin-inline: auto; }
html[data-compo="bandeau"] .accueil__actions { justify-content: center; }
html[data-compo="bandeau"] .portrait { max-width: none; aspect-ratio: 21 / 9; margin-inline: 0; margin-left: 0; }
html[data-compo="bandeau"] .portrait img { object-position: center 45%; }
/* sur un telephone, une bande 21/9 ne fait plus que cent cinquante pixels de
   haut : on ne voit plus rien de la boutique. Le bandeau s'y ouvre en 3/2. */
@media (max-width: 699px) {
  html[data-compo="bandeau"] .portrait { aspect-ratio: 3 / 2; }
}

/* --- galerie ---------------------------------------------------------------
   Un seul composant, le meme pour les seize metiers : une grille de photos
   legendees, de une a quarante, que l'on ouvre en grand d'un clic.

   Aucun metier ne la redessine, et aucune table de cas ne la pilote (« 1 a 3
   photos ceci, 4 a 10 cela »). Le moteur pose deux nombres sur la grille,
   lus sur les photos reelles :
     --n      le nombre de photos
     --ratio  leur proportion mediane, de 0.8 (portrait) a 1.5 (paysage)
   Le nombre de colonnes en decoule par une formule continue : peu de photos
   font de grandes vignettes, beaucoup en font de petites, des photos en
   hauteur en rangent un peu plus par ligne. L'ecran fait le reste, puisqu'une
   vignette ne descend jamais sous 150 px ni ne depasse 380 px de haut : une
   ou deux photos ne s'etalent pas sur toute la largeur, et une rangee
   incomplete se cale a gauche, sur la meme ligne que le texte.

   Pour 1, 2, 5, 17 ou 40 photos, respectivement 1, 2, 3, 5 et 6 colonnes sur
   un grand ecran ; la meme grille se resserre d'elle-meme sur un telephone.
   -------------------------------------------------------------------------- */

.galerie__grille {
  --n: 6;
  --ratio: 1.33;
  --cols: 3;
  --ecart: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  /* Une rangee incomplete se calait au milieu. Sur ces pages rien d'autre
     n'est centre : l'etiquette, le titre, le texte et le nom de l'ensemble
     partent tous du meme bord gauche, et une ou deux photos partaient du
     milieu, a cent quatre-vingts pixels de leur propre titre. Defaut vu par
     Krikor le 18 septembre. Les photos gardent leur taille, elles ne
     s'etirent pas, elles suivent simplement la ligne du texte. Une rangee
     complete ne bouge pas, elle occupe deja toute la largeur. */
  justify-content: flex-start;
  gap: var(--ecart);
}
@supports (width: round(sqrt(4) * 1px, 1px)) {
  .galerie__grille {
    --cols: clamp(1, round(sqrt(var(--n)) * 1.2 / pow(var(--ratio), 0.35)), 6);
  }
}
/* Le compte de photos qui laisse la derniere seule sur sa rangee (trois en
   deux colonnes, cinq en deux, neuf en quatre) prend une colonne de plus,
   ou deux si une seule ne suffit pas. Vu le 17 septembre : trois bouquets
   d'une meme serie, deux en haut et un en bas, meme sur grand ecran. Les
   navigateurs sans mod() gardent la composition d'avant. */
@supports (width: mod(5px, 2px)) {
  .galerie__grille {
    --c: clamp(1, round(sqrt(var(--n)) * 1.2 / pow(var(--ratio), 0.35)), 6);
    --o1: calc(1 - min(1, abs(mod(var(--n), var(--c)) - 1)));
    --o2: calc(1 - min(1, abs(mod(var(--n), calc(var(--c) + 1)) - 1)));
    --cols: calc(var(--c) + var(--o1) * (1 + var(--o2)));
  }
}
.galerie__item {
  flex: 0 0 auto;
  /* le plafond suit la proportion : une vignette ne depasse jamais 380 px de haut */
  width: min(calc(380px * var(--ratio)), max(150px, calc((100% - var(--ecart) * (var(--cols) - 1)) / var(--cols))));
}
/* Sur telephone, une galerie de trois, cinq ou sept photos posait la
   derniere seule, au centre d'une rangee de deux. La premiere prend alors
   toute la largeur et les suivantes vont par deux : aucune rangee
   orpheline, et la photo d'ouverture y gagne. Au-dela, la composition
   automatique ne change pas. */
@media (max-width: 599.98px) {
  .galerie__item:first-child:nth-last-child(odd):not(:only-child) { width: 100%; }
}
.galerie__item figure { margin: 0; }
.galerie__lien { display: block; border-radius: var(--r-carte, 14px); }
.galerie__lien:hover img { filter: brightness(1.03); }
.galerie__item img {
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio);
  object-fit: cover;
  border-radius: var(--r-carte, 14px);
  border: 1px solid var(--trait);
  background: var(--accent-clair);
}
.galerie__item figcaption {
  margin-top: 10px;
  font-size: .92rem;
  color: var(--encre-2);
  line-height: 1.45;
}
.galerie__note { margin-top: 24px; }

/* --- visionneuse -----------------------------------------------------------
   La photo en grand, telle quelle, sur fond sombre. Un dialog natif : le
   focus reste dedans, Echap ferme, le fond ne defile plus. Trois boutons
   ronds, discrets, et rien d'autre. */
.visionneuse {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  background: transparent;
  color: #fff;
}
.visionneuse::backdrop { background: rgba(12, 12, 12, .93); }
.visionneuse__in {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 56px 64px 24px;
}
.visionneuse__img {
  max-width: 100%;
  max-height: calc(100vh - 120px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  background: #222;
}
.visionneuse__legende {
  margin: 0;
  max-width: 70ch;
  text-align: center;
  font-size: .95rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .85);
}
.visionneuse__compteur {
  position: fixed;
  top: 20px;
  left: 20px;
  font-size: .85rem;
  color: rgba(255, 255, 255, .7);
}
.visionneuse__bouton {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(0, 0, 0, .4);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.visionneuse__bouton:hover { background: rgba(255, 255, 255, .18); }
.visionneuse__bouton:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.visionneuse__bouton--prec { left: 12px; }
.visionneuse__bouton--suiv { right: 12px; }
.visionneuse__bouton--fermer { top: 12px; right: 12px; transform: none; }
.visionneuse__bouton svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body:has(.visionneuse[open]) { overflow: hidden; }
@media (max-width: 699px) {
  .visionneuse__in { padding: 56px 12px 20px; }
  .visionneuse__bouton--prec, .visionneuse__bouton--suiv { top: auto; bottom: 14px; transform: none; }
  .visionneuse__img { max-height: calc(100vh - 150px); }
}
@media print {
  .visionneuse { display: none; }
}

/* --- chiffres cles --------------------------------------------------------
   Une bande de deux a quatre reperes. Sous 700 px, un repere par ligne : la
   grille de deux colonnes posait le troisieme repere seul sur une seconde
   rangee, deux en haut, un en bas, le defaut vu le 17 septembre sur le
   fleuriste a 390 px. Entre 700 et 900 px, autant de colonnes que de
   reperes, sauf quatre, qui font deux rangees de deux. Au-dela de 900 px,
   le bloc des grilles creuses, plus bas, ramene la rangee au nombre de
   reperes. Aucune largeur ne laisse un repere orphelin. */

.chiffres__in { display: grid; grid-template-columns: minmax(0, 1fr); }
/* Le bandeau porte lui-meme un trait en haut et un en bas. Mettre a zero le
   creux du premier et du dernier repere collait le texte contre ces deux
   traits : « 11 h » posait directement sur la ligne, defaut vu par Krikor le
   18 septembre sur son telephone. Le creux est donc le meme partout, et la
   bande respire pareil en haut, au milieu et en bas. */
.chiffre { padding: 18px 0; border-top: 1px solid var(--trait); }
.chiffre:first-child { border-top: 0; }
/* Un repere est court, mais rien n'oblige le client a etre court : plusieurs
   metiers acceptent jusqu'a soixante-dix caracteres dans ce champ, et leur
   propre exemple en fait soixante-cinq. En « nowrap », une phrase de cette
   longueur sortait de l'ecran et emportait la page avec elle. Seul le numero
   de telephone, qui est un lien, garde son insecabilite. */
.chiffre b { display: block; font-family: var(--titres); line-height: 1.1; margin-bottom: 4px; white-space: normal; }
.chiffre b a { white-space: nowrap; }
.chiffre b a { text-decoration: none; color: inherit; }
.chiffre span { display: block; font-size: .82rem; color: var(--encre-2); }
@media (min-width: 700px) {
  .chiffres__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres__in:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chiffre, .chiffre:first-child, .chiffre:last-child { padding: 22px 20px 20px 24px; border-top: 0; border-left: 1px solid var(--trait); }
  .chiffre:first-child { border-left: 0; padding-left: 0; }
  .chiffre b { margin-bottom: 6px; }
}
@media (min-width: 700px) and (max-width: 899.98px) {
  .chiffres__in:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres__in:has(> :nth-child(4)) .chiffre:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  .chiffres__in:has(> :nth-child(4)) .chiffre:nth-child(n + 3) { border-top: 1px solid var(--trait); }
}
@media (min-width: 900px) {
  .chiffres__in { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .chiffre:nth-child(n) { border-top: 0; border-left: 1px solid var(--trait); padding-left: 24px; }
  .chiffre:nth-child(1) { border-left: 0; padding-left: 0; }
}

/* --- sections ------------------------------------------------------------- */

.section { padding-block: clamp(40px, 5.6vw, 84px); }
.section__tete h2 { margin-bottom: .6em; }
.section__corps { max-width: var(--largeur-texte); }
.section__corps > :last-child { margin-bottom: 0; }

.texte-media__in, .texte-lieu__in, .contact__in { display: grid; gap: 40px; }

/* Le numero dans la section contact : pose par le gabarit, jamais par le
   texte de la variante, pour qu'aucun metier ne s'en trouve prive. */
.contact__tel { margin: 18px 0 0; font-size: 1.22rem; font-weight: 600; letter-spacing: .01em; }
.contact__tel a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.contact__tel a:hover { opacity: .72; }
/* L'email, pose par le gabarit a cote du numero (23 septembre) : il prend la
   couleur de la rubrique, comme le numero. Sans cela, le lien gardait la couleur
   des liens du site et devenait illisible sur le contact sombre de la direction 2
   (contraste mesure : 1,6 a 1,9). */
.contact__mail { margin: 10px 0 0; }
.contact__mail a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; overflow-wrap: anywhere; }
.contact__mail a:hover { opacity: .72; }
/* 24 septembre : les reperes du Contact heritent la couleur du bloc. Sur la
   direction 2, le Contact est fonce : encre sur encre, invisible (vu au
   controle de contraste du comparateur des douze metiers). */
.contact__reperes { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 4px; font-size: .92em; color: inherit; }
.contact__reperes b { color: inherit; font-weight: 600; }
.figure { margin: 0; overflow: hidden; }
.figure figcaption { font-size: .9rem; color: var(--encre-2); margin-top: 10px; }
.citation { margin: 28px 0 0; }
/* citation d'une section en texte seul : elle suit la colonne du corps */
.texte__citation { max-width: var(--largeur-texte); }
.lieu { align-self: start; }
.lieu h3 { margin-bottom: .4em; }
.lieu .mention { margin: 20px 0 0; }
@media (min-width: 900px) {
  .texte-media__in { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .texte-lieu__in { grid-template-columns: 1.2fr .8fr; gap: 64px; }
  .contact__in { grid-template-columns: .9fr 1.1fr; gap: 64px; }
}

/* --- contenus produits par les blocs de texte ----------------------------- */

table { border-collapse: collapse; width: 100%; }
.t td, .h td { padding: 12px 0; border-top: 1px solid var(--trait); vertical-align: baseline; }
.t tr:last-child td, .h tr:last-child td { border-bottom: 1px solid var(--trait); }
.t td:last-child { text-align: right; white-space: nowrap; font-family: var(--titres); }
/* Le prix reste insecable, le libelle peut se couper, et si l'ensemble ne
   tient toujours pas, c'est le tableau qui defile, jamais la page. */
.t td, .h td { overflow-wrap: break-word; }
.section__corps:has(> .t), .section__corps:has(> .h) { overflow-x: auto; }
.h td:first-child { color: var(--encre-2); width: 38%; }
.h tr[data-aujourdhui] td { font-weight: 650; color: var(--encre); }

ul.motifs, ul.infos-tarifs, ul.coordonnees { list-style: none; margin: 0 0 1em; padding: 0; }
ul.motifs li { padding: 12px 0; border-bottom: 1px solid var(--trait); }
ul.motifs { border-top: 1px solid var(--trait); }
ul.infos-tarifs li, ul.coordonnees li { padding: 5px 0 5px 18px; position: relative; color: var(--encre-2); font-size: .95rem; }
ul.infos-tarifs li::before, ul.coordonnees li::before { content: ''; position: absolute; left: 0; top: .85em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.reserve { font-size: .9rem; color: var(--encre-2); margin-top: 20px; }
.adresse-forte { font-family: var(--titres); margin: 24px 0 8px; }
.tel-fort { font-family: var(--titres); margin: 0 0 .2em; line-height: 1.1; }
.tel-fort a { text-decoration: none; color: var(--encre); }
.urgence { font-size: .9rem; color: var(--encre-2); }
/* la rubrique « Dépannage » du plombier s'appelle aussi urgence : elle garde
   la taille et la couleur ordinaires, seule la mention de sante reste en petit (21 septembre) */
:where(.section).urgence { font-size: inherit; color: var(--encre); }
dl.pratique { margin: 0 0 1em; display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; }
dl.pratique dt { color: var(--encre-2); }
dl.pratique dd { margin: 0; }

.services { display: grid; gap: 14px; }
.service { padding: 24px; border: 1px solid var(--trait); }
.service__cle { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-fonce); margin-bottom: 8px; }
.service h3 { margin-bottom: .35em; }
.service p { margin: 0; color: var(--encre-2); font-size: .95rem; }
.cartes .section__corps { max-width: none; }
@media (min-width: 720px) { .services { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .services { grid-template-columns: repeat(3, 1fr); } }

.tarifs-fort { display: grid; gap: 12px; }
.tarif-carte { padding: 20px; border: 1px solid var(--trait); display: flex; flex-direction: column; gap: 10px; }
.tarif-carte__prix { font-family: var(--titres); font-size: 1.6rem; }
@media (min-width: 720px) { .tarifs-fort { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }

/* --- formulaire ----------------------------------------------------------- */

.form .champ { margin-bottom: 16px; }
.form label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; }
.form input[type="text"], .form input[type="email"], .form textarea {
  width: 100%; border: 1px solid var(--trait-fort); background: var(--surface);
  padding: 12px 14px; font: inherit; color: var(--encre); border-radius: var(--r);
}
.form input:focus, .form textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-clair); }
.form textarea { min-height: 130px; resize: vertical; }
.consentement { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: var(--encre-2); margin: 8px 0 18px; }
.consentement input { margin-top: 4px; flex: none; }
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form button { font: inherit; }
.form__retour { margin-top: 12px; font-size: .95rem; }
.form__retour:empty { display: none; }
.form__retour.ok { color: var(--accent-fonce); }
.form__retour.ko { color: var(--alerte); }

/* --- pied ----------------------------------------------------------------- */

.pied { border-top: 1px solid var(--trait); padding-block: 48px 110px; font-size: .92rem; color: var(--encre-2); }
.pied__grille { display: grid; gap: 32px; }
.pied h2 { font-family: var(--corps); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--encre); margin-bottom: 12px; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { padding: 2px 0; }
.pied .h td { padding: 4px 0; border: 0; font-size: .9rem; }
/* 24 septembre : la regle « derniere ligne soulignee » des tableaux pesait plus
   que « border: 0 » du pied de page, et tirait un trait a 4 px sous « Dimanche ». */
.pied .h tr:last-child td { border-bottom: 0; }
/* La ligne legale ferme la page. Bornee a 72 caracteres sans etre centree,
   elle se collait au bord gauche : mesure du 14 septembre, 24 px a gauche et
   610 px de vide a droite sous un pied dont tout le reste est aligne. Une
   phrase seule, en fin de page, se pose au milieu de la mesure, et son filet
   avec elle. */
.pied__legal {
  margin: 36px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--trait);
  max-width: 72ch;
  font-size: .85rem;
  text-align: center;
}
@media (min-width: 800px) {
  .pied__grille { grid-template-columns: 1fr 1.2fr 1fr; }
  .pied { padding-bottom: 48px; }
}

/* --- barre d'actions mobile ------------------------------------------------ */

.barre-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  background: var(--surface); border-top: 1px solid var(--trait);
}
.barre-mobile a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 12px; font-size: .78rem; font-weight: 600; text-decoration: none; color: var(--encre); }
.barre-mobile a:first-child { background: var(--accent); color: var(--accent-contraste); }
.barre-mobile svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 800px) { .barre-mobile { display: none; } }

/* Sur telephone, la barre du pouce porte deja Appeler, Ecrire, Devis : les
   memes boutons en haut de page faisaient doublon (vu sur les exemples de la
   page d'accueil de fpro.fr, « Appeler » deux fois cote a cote). Quand la
   barre est la, l'accueil n'affiche plus sa rangee de boutons. Sans barre,
   les boutons du haut restent : ils sont alors le seul acces. */
@media (max-width: 799px) {
  body:has(.barre-mobile) .accueil__actions { display: none; }
}

/* --- impression ----------------------------------------------------------- */

@media print {
  .entete, .barre-mobile, .form, .lien-evitement { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 24px; }
}

/* ===========================================================================
   Version 13 - la variete de mise en page entre sites d'un meme metier
   ===========================================================================
   Mesure du 15 septembre : deux sites d'un meme metier partageaient 79 % de
   leur geometrie de blocs sur ordinateur et jusqu'a 89 % sur telephone, alors
   meme que la palette, la typographie et la composition d'accueil differaient
   deja. La couleur changeait, la page non.

   Quatre reglages s'ajoutent ici. Aucun ne touche a l'ordre des rubriques, a
   la police ou a la palette : ce sont des ecarts d'espacement, de bordure et
   de disposition, tires par site comme l'est la couleur.

   Regle tenue partout ci-dessous : rien qui reduise la lisibilite. Aucune
   nouvelle couleur de texte, aucune taille de police touchee, aucune rubrique
   obligatoire deplacee, et la fiche de contact reste au meme endroit quelle
   que soit sa disposition.
   ------------------------------------------------------------------------- */

/* --- 1. le rythme vertical -------------------------------------------------
   Le meme contenu respire differemment. « ample » aere, « serre » resserre,
   « courant » est ce que la version 12 faisait deja. L'ecart reste modere :
   au-dela, ce n'est plus un rythme, c'est une autre page.
   -------------------------------------------------------------------------- */
:root[data-rythme="ample"] .section   { padding-block: clamp(48px, 6.2vw, 92px); }
:root[data-rythme="ample"]  { --gouttiere: 28px; --r: 16px; }
:root[data-rythme="ample"] .section__tete { margin-bottom: 32px; }

:root[data-rythme="serre"] .section   { padding-block: clamp(40px, 5.6vw, 84px); }
:root[data-rythme="serre"]  { --gouttiere: 20px; --r: 8px; }
:root[data-rythme="serre"] .section__tete { margin-bottom: 32px; }
:root[data-rythme="serre"] .contenant { max-width: 1040px; }

/* Sur telephone, les trois rythmes se resserrent vers une meme valeur : un
   ecran de 390 px n'a pas la place d'etre ample, et le faire quand meme donne
   une page ou l'on scrolle sans rien lire. */
/* 22 septembre : l'air entre les rubriques, choisi par Krikor au comparateur
   (niveau 2, « comme fpro.fr »). Le 21, en chassant les grands vides, on avait
   resserre d'un cran de trop : 20 a 28 px par rubrique sur telephone, 14 a 20 px
   entre un titre et son texte. Le rythme ample descendait meme sous le rythme
   courant sur telephone (28 px contre 40). Les trois rythmes gardent leur
   difference sur grand ecran et se rejoignent a 40 px sur telephone. */
:root .section__tete, :root[data-rythme] .section__tete { margin-bottom: 32px; }
.section__corps > p:not(:last-child), .section__corps > ul:not(:last-child) { margin-bottom: 1.4em; }
@media (max-width: 760px) {
  :root .section, :root[data-rythme] .section { padding-block: 40px; }
  :root .section__tete, :root[data-rythme] .section__tete { margin-bottom: 26px; }
}

/* --- 2. la forme des blocs mis en avant ------------------------------------
   Les listes de garanties, de reperes et de cartes portent la meme bordure sur
   tous les sites. Trois formes, toutes construites sur les variables de la
   palette : aucune couleur nouvelle n'est introduite.
   -------------------------------------------------------------------------- */
/* Le fond clair s'accompagne de son encre.
   Sans cette ligne, le controle de contraste a trouve un prix illisible chez
   le plombier : la rubrique d'urgence est peinte en sombre par sa composition,
   son texte est donc clair, et poser dessous un fond clair donnait du clair
   sur clair, a 1,08 de rapport. Une carte qui change de fond doit emporter son
   encre avec elle. */
:root[data-cartes="plein"] .garanties__liste > li,
:root[data-cartes="plein"] .cheveux__familles > li,
:root[data-cartes="plein"] [class$="__faits"] > div,
:root[data-cartes="plein"] .tarif-carte {
  background: var(--accent-clair);
  border-color: transparent;
  color: var(--encre);
}
/* :root redouble pour passer devant les packs, qui eclaircissent les
   etiquettes dans une rubrique sombre (plombier, rubrique d'urgence en
   direction 1 : 1,06 de contraste, vu le 22 septembre). */
:root:root[data-cartes="plein"] .garanties__liste > li *,
:root:root[data-cartes="plein"] .cheveux__familles > li *,
:root:root[data-cartes="plein"] [class$="__faits"] > div *,
:root:root[data-cartes="plein"] .tarif-carte * {
  color: inherit;
}
:root[data-cartes="souligne"] .garanties__liste > li,
:root[data-cartes="souligne"] .cheveux__familles > li,
:root[data-cartes="souligne"] .tarif-carte {
  border: 0;
  border-bottom: 2px solid var(--trait);
  border-radius: 0;
  padding-inline: 0;
}
/* 24 septembre (Krikor) : une ligne de faits qui prend un fond doit prendre aussi
   sa marge interieure. Sans elle, « Delai habituel / Dans la journee » touchait
   les bords de son fond chez le plombier. Le harnais mesure maintenant l'ecart
   entre un texte et les bords de toute boite coloree ou bordee. */
:root:root[data-cartes="plein"] [class$="__faits"] > div {
  padding: 11px 14px;
  border-radius: 10px;
}
:root[data-cartes="plein"] [class$="__faits"] > div + div {
  margin-top: 6px;
}
/* Meme defaut sur les garanties : la carte pleine gardait les marges de la
   liste nue (0 en haut, a droite, en bas), texte au bord du fond. */
:root:root[data-cartes="plein"] .cheveux__familles > li {
  padding: 14px 16px;
  border-radius: 10px;
}
:root:root[data-cartes="plein"] .garanties__liste > li {
  padding: 14px 16px 14px 44px;
  border-radius: 10px;
}
:root:root[data-cartes="plein"] .garanties__liste > li::before {
  left: 14px;
  top: 19.6px;
}
/* 24 septembre : en forme soulignee, le texte touchait le trait (3 px) et la
   puce des garanties chevauchait la premiere lettre du titre (padding-inline 0). */
:root[data-cartes="souligne"] .garanties__liste > li,
:root[data-cartes="souligne"] .cheveux__familles > li,
:root[data-cartes="souligne"] .tarif-carte { padding-bottom: 14px; }
:root[data-cartes="souligne"] .garanties__liste > li { padding-left: 30px; }
:root[data-cartes="souligne"] [class$="__faits"] > div {
  border: 0;
  border-left: 3px solid var(--accent);
  border-radius: 0;
  padding-left: 12px;
}

/* --- 3. la fiche de contact ------------------------------------------------
   Deux dispositions seulement, et la rubrique ne bouge pas de place : elle
   reste la derniere, avec le meme titre et le meme lien de navigation. Seule
   la colonne change de cote de l'ecran. Le telephone, lui, empile dans les
   deux cas : il n'a jamais eu deux colonnes.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  :root[data-contact="dessus"] .contact__in { grid-template-columns: 1fr; gap: 36px; }
  :root[data-contact="dessus"] .contact__fiche,
  :root[data-contact="dessus"] .contact__in > aside {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    align-items: start;
  }
}

/* --- 5. la largeur de lecture et la densite des grilles --------------------
   Premier essai des trois axes ci-dessus : la geometrie des pages n'avait
   bouge que d'un point, de 79 a 78 % de recouvrement. L'explication tient en
   une phrase : espacements et bordures se voient a l'oeil mais pesent peu dans
   la forme d'une page, et une page plus aeree reste la meme page une fois sa
   hauteur ramenee a l'echelle.

   Ce qui change vraiment une silhouette, c'est la largeur du texte et le
   nombre de colonnes d'une grille. Les deux restent dans la grille posee : on
   ne sort pas de la largeur maximale du projet, et une grille ne descend
   jamais sous deux colonnes sur grand ecran, sous peine de faire une page qui
   n'en finit pas.
   -------------------------------------------------------------------------- */
:root[data-rythme="ample"]  { --largeur: 1180px; --largeur-texte: 66ch; }
:root[data-rythme="serre"]  { --largeur: 1040px; --largeur-texte: 58ch; }

@media (min-width: 1000px) {
  /* « plein » compte large, « souligne » compte serre : la meme liste de
     cartes tient en trois colonnes chez l'un et en deux chez l'autre. */
  :root[data-cartes="plein"] .services,
  :root[data-cartes="plein"] .prestations__grille,
  :root[data-cartes="plein"] .cheveux__grille,
  :root[data-cartes="plein"] .garanties__liste {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  }
  :root[data-cartes="souligne"] .services,
  :root[data-cartes="souligne"] .prestations__grille,
  :root[data-cartes="souligne"] .cheveux__grille,
  :root[data-cartes="souligne"] .garanties__liste {
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  }
}

/* --- 6. les bandes de fond ------------------------------------------------
   Le levier qui manquait.

   Les cinq reglages precedents changent ce qu'il y a DANS les rubriques ;
   mesure faite, la silhouette de la page n'avait bouge que de deux points, de
   73 a 71 % de recouvrement. C'est logique : une page reste une pile de bandes
   pleine largeur, et deplacer une bordure ne change pas une pile.

   Ce qui change une silhouette, c'est l'alternance des fonds. Une rubrique sur
   deux posee sur une surface differente decoupe la page en paliers visibles au
   premier coup d'oeil, la ou une page d'un seul fond se lit comme un long
   rouleau.

   Deux fonds seulement, tous deux pris dans la palette du metier : --fond, qui
   est le fond de page, et --surface, qui sert deja aux cartes et a l'entete.
   Aucune couleur nouvelle, donc aucun contraste a recalculer sur le texte
   courant. Les rubriques obligatoires ne sont pas concernees : l'accueil et le
   contact gardent le traitement que leur direction leur donne.
   -------------------------------------------------------------------------- */
:root[data-bandes="alternee"] .section:nth-of-type(even):not(.accueil):not(.contact) {
  background: var(--surface);
}
:root[data-bandes="alternee"] .section:nth-of-type(even):not(.accueil):not(.contact) + .section {
  background: transparent;
}
:root[data-bandes="tierce"] .section:nth-of-type(3n + 2):not(.accueil):not(.contact) {
  background: var(--surface);
}
/* « sans » ne pose aucune regle : c'est la page d'un seul fond, celle que la
   version 12 rendait, et elle reste une des trois possibilites. */

/* --- 7. le cote de l'image dans les rubriques a deux colonnes --------------
   Le dernier levier de geometrie disponible sans toucher a l'ordre des
   rubriques. Les bandes de fond changent la couleur d'une page, pas sa forme :
   la mesure de recouvrement des blocs ne les voit pas, et elle a raison, ce
   sont les memes rectangles. Inverser l'image et le texte, en revanche,
   deplace vraiment les rectangles.

   L'inversion se fait par l'ordre visuel seul, jamais par l'ordre du document :
   un lecteur d'ecran et une tabulation au clavier suivent le meme chemin dans
   les deux cas. Et sous 900 px, ou tout s'empile, l'image reprend sa place
   au-dessus du texte : sur telephone, une image poussee apres trois paragraphes
   ne se voit plus.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  :root[data-media="inverse"] .texte-media__in > :first-child,
  :root[data-media="inverse"] .texte-lieu__in > :first-child { order: 2; }
  :root[data-media="inverse"] .texte-media__in > :last-child,
  :root[data-media="inverse"] .texte-lieu__in > :last-child { order: 1; }
  :root[data-media="inverse"] .texte-media__in { grid-template-columns: .85fr 1.15fr; }
  :root[data-media="inverse"] .texte-lieu__in { grid-template-columns: .8fr 1.2fr; }
}

/* --- 8. les mots plus longs que leur colonne -------------------------------
   Sous les chiffres, la legende tient en deux ou trois mots, et « accompagnement »
   mesure a lui seul 111 px la ou la colonne en fait 106 sur un ecran de 360.
   Le mot sortait alors de son cadre de cinq pixels. Rien de spectaculaire, mais
   c'est le genre de detail qui fait mal fini, et il se corrige en une ligne :
   une colonne etroite a le droit de couper un mot trop long.
   -------------------------------------------------------------------------- */
.chiffre span, .service p, .prix__libelle, .garanties__liste > li span {
  overflow-wrap: break-word;
}

/* 27 septembre : dans une ligne de prix, le libelle doit aussi pouvoir retrecir
   sous son mot le plus long (Debroussaillement poussait le prix hors de sa carte
   au telephone). Seul un mot trop long pour sa colonne est coupe. */
.prix .prix__libelle { min-width: 0; overflow-wrap: anywhere; }
/* 27 septembre : quand le prix est long (a partir de 1 350 euros, 32 euros par
   personne), le libelle n avait au telephone qu une colonne etroite, trois a cinq
   lignes. Le prix passe alors sous son libelle ; un prix court reste a cote, et
   rien ne change quand la ligne a la place. */
.prix__liste > .prix { flex-wrap: wrap; row-gap: 2px; }
.prix__liste > .prix > .prix__libelle { flex: 1 1 11em; }

/* ------------------------------------------------ boutons, 16 septembre
   Trois defauts vus sur telephone, et rien d'exotique : le texte pas centre
   quand le bouton s'etire, la barre du bas trop haute, et ses cases collees
   sans separation. C'est ce qu'un visiteur voit en premier.
*/
.bouton { justify-content: center; text-align: center; }

/* Le filet entre les cases est le fond qui transparait dans un ecart d'un
   pixel : une bordure aurait decale la derniere case d'un pixel. */
.barre-mobile { column-gap: 1px; background: var(--trait); padding-bottom: env(safe-area-inset-bottom, 0px); }
.barre-mobile a { background: var(--surface); justify-content: center; padding: 7px 6px 9px; gap: 3px; font-size: .72rem; line-height: 1.15; }
.barre-mobile svg { width: 19px; height: 19px; }

/* --------------------------------------------------------------------------
   Deux corrections du 16 septembre au soir, apres relecture des sites publies.
   -------------------------------------------------------------------------- */

/* Personne ne lit une ligne de cent cinquante signes. Les rubriques communes
   passent deja par .mesure ; certaines rubriques de metier posaient leur texte
   a nu dans le conteneur. Mesure chez le fleuriste : 165 signes sur les
   mentions, 121 sur une phrase de rubrique, contre 56 a 71 dans le corps.
   Les paragraphes qui portent un bouton ou une image sont epargnes : ce sont
   des rangees de mise en page, pas du texte a lire. */
main p:not(:has(.bouton)):not(:has(img)) { max-width: var(--largeur-texte); }

/* L'en-tete ne porte plus de bouton d'action : elle ne bouge pas, et sa
   navigation mene a la rubrique Contact comme aux autres. Decision du
   16 septembre : une en-tete epuree vaut mieux qu'un bouton qui apparait. */


/* --- le pied et la barre du pouce ne disent pas deux fois la meme chose ----
Sur telephone, la barre du pouce est fixe juste sous le pied de page : le
visiteur y lit « Devis » a dix pixels du lien « Demander un devis » du pied.
Sur ordinateur la barre n'existe pas, et le lien du pied est le seul rappel
en bas de page. On garde donc l'un ou l'autre, jamais les deux. */
@media (max-width: 799px) {
  .pied__action { display: none; }
}


/* ==========================================================================
   Version 18 - la densite : garder la richesse, reduire la place inutile
   ==========================================================================
   Mesure du 16 septembre, sur un ecran large. Chez le plombier, les huit
   rubriques consommaient a elles seules 2 112 px de respiration verticale,
   soit 28 % de la hauteur de la page, et la rubrique « Zone d'intervention »
   occupait 493 px pour 47 mots, dont 374 px de marges et de titre. Le contenu
   n'etait pas de trop : c'est que tout etait developpe au meme niveau, du plus
   important au plus secondaire.

   Le moteur marque donc « dense » les rubriques secondaires de cette fiche-la
   (Assembler::marquerDensite, d'apres ce que le professionnel a reellement
   rempli, jamais d'apres le metier seul, jamais la rubrique mise en avant ni
   les rubriques obligatoires). Ici on ne fait que leur donner moins de place :
   meme texte, memes listes, memes images, meme ordre, meme HTML. Rien n'est
   retire, rien n'est replie, rien n'est masque : le visiteur et Google lisent
   la page entiere. Une rubrique dense se lit comme un complement, pas comme un
   chapitre de plus.
   -------------------------------------------------------------------------- */

:root .section--dense                      { padding-block: clamp(36px, 4.2vw, 60px); }
:root[data-rythme="ample"] .section--dense { padding-block: clamp(36px, 4.2vw, 60px); }
:root[data-rythme="serre"] .section--dense { padding-block: clamp(36px, 4.2vw, 60px); }
@media (max-width: 760px) { :root .section--dense, :root[data-rythme] .section--dense { padding-block: 34px; } }

/* le titre reste un titre, mais d'un cran en dessous des rubriques pleines */
.section--dense .section__tete h2 { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.5rem); margin-bottom: .35em; }
.section--dense .section__tete .etiq { margin-bottom: 8px; }

:root[data-rythme="ample"] .section--dense .section__tete { margin-bottom: 18px; }
:root[data-rythme="serre"] .section--dense .section__tete { margin-bottom: 12px; }
:root[data-direction="3"] .section--dense .section__tete { margin-bottom: 18px; }

/* le texte garde sa taille : on resserre l'interligne des blocs, pas la lecture */
.section--dense p { margin-bottom: .75em; }
.section--dense .services { gap: 10px; }
.section--dense .service { padding: 18px; }
.section--dense .citation { margin-top: 18px; }
.section--dense .t td, .section--dense .h td { padding-block: 9px; }
.section--dense .figure figcaption { margin-top: 7px; }

/* Une image qui ne se charge pas ne doit pas ecraser la colonne de texte :
   sans min-width, la largeur intrinseque de l'image absente impose sa taille
   a la colonne et le texte se retrouve sur trois mots de large. */
.texte-media__in > *, .texte-lieu__in > *, .contact__in > * { min-width: 0; }


/* --- le menu sur petit ecran ---------------------------------------------
   Sous 960 px, le menu de bureau est masque et rien ne le remplacait : un
   visiteur au telephone n'avait aucun moyen de rejoindre une rubrique sans
   faire defiler toute la page, et entre 800 et 959 px il n'y avait ni menu ni
   barre du pouce (vu par Krikor le 17 septembre). Un bouton « Menu » ouvre le
   meme menu, en colonne, sous l'en-tete, et le referme. La barre du pouce ne
   bouge pas : elle sert a agir, le menu sert a se deplacer. Version 21. */
.entete__menu { display: none; align-items: center; gap: 8px; margin-left: auto; padding: 8px 14px; border: 1px solid var(--trait); border-radius: 999px; background: transparent; color: var(--encre); font: inherit; font-size: .92rem; line-height: 1; cursor: pointer; }
.entete__menu svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; display: block; }
.entete__menu .entete__menu-fermer { display: none; }
.entete--ouverte .entete__menu .entete__menu-ouvrir { display: none; }
.entete--ouverte .entete__menu .entete__menu-fermer { display: block; }
@media (max-width: 959px) {
  .entete__menu { display: inline-flex; flex: 0 0 auto; }
  /* la marque cede la place au bouton plutot que de le renvoyer a la ligne :
     un nom long se plie sur deux lignes, le bouton reste a sa droite */
  .entete__in { flex-wrap: wrap; gap: 12px; }
  .marque { flex: 1 1 0; min-width: 0; }
  .entete--ouverte .nav { display: flex; flex-direction: column; flex-basis: 100%; width: 100%; padding: 4px 0 12px; }
  .entete--ouverte .nav a { padding: 12px 0; border-top: 1px solid var(--trait); white-space: normal; }
}


/* --- les ensembles de la galerie -----------------------------------------
   Une photo peut porter le nom d'un ensemble (un chantier, un avant-apres,
   une serie). Les photos du meme nom forment un bloc titre, avec sa propre
   composition ; sans nom, un seul bloc, la galerie d'avant. 17 septembre. */
.galerie__nom { font-size: 1.15rem; margin: 0 0 14px; color: var(--encre); }
.galerie__grille + .galerie__nom { margin-top: 40px; }
.section--dense .galerie__grille + .galerie__nom { margin-top: 26px; }


/* --- sur telephone, la photo d'accueil sous le titre ------------------------
   A une colonne, l'accueil posait tout le texte (titre, ligne, adresse,
   paragraphe, boutons) puis la photo : le visiteur lisait un ecran de texte
   avant de voir le visage, la vitrine ou l'assiette. Decision du 17
   septembre : le titre reste premier, la photo vient juste apres lui et sa
   ligne, le paragraphe ensuite. Le bloc de texte passe en display: contents
   pour que ses enfants se rangent avec la photo dans la meme colonne ; le
   texte centre des compositions en bandeau se transmet par heritage. La
   photo est plafonnee en hauteur pour que le texte reste a portee de pouce.
   Sur ordinateur (800 px et plus), rien ne change. */
@media (max-width: 799px) {
  .accueil__in:has(> .accueil__media) { row-gap: 0; }
  .accueil__in:has(> .accueil__media) .accueil__texte { display: contents; }
  .accueil__in:has(> .accueil__media) .accueil__texte > * { order: 3; }
  .accueil__in:has(> .accueil__media) .accueil__texte > .accueil__sur,
  .accueil__in:has(> .accueil__media) .accueil__texte > h1,
  .accueil__in:has(> .accueil__media) .accueil__texte > .accueil__sous { order: 1; }
  .accueil__in:has(> .accueil__media) .accueil__media { order: 2; margin: 18px 0 26px; }
  .accueil__in:has(> .accueil__media) .accueil__sous { margin-bottom: 0; }
  .accueil__in:has(> .accueil__media) .portrait { max-height: 62vh; }
}


/* --- 22 septembre : trois choix de plus, pour que deux sites ne se
   ressemblent plus au premier coup d'oeil ---------------------------------
   Krikor : « quasiment tout est similaire ». Le nom en haut a gauche, le
   meme bloc titre + phrase + deux boutons, la meme petite etiquette au-dessus
   de chaque titre. Trois reglages s'ajoutent, tires au hasard pour chaque
   site et modifiables en un clic dans Ajuster :
     1. l'en-tete   (data-entete)  : classique, centre, epure
     2. le haut de page (data-accueil) : cote, plein, partage, titre
     3. les titres  (data-titres)  : etiquette, trait, numero
   Une valeur absente vaut la forme d'avant : aucun site deja en ligne ne
   change sans qu'on le lui demande.
   -------------------------------------------------------------------------- */

/* --- 1. l'en-tete centre : le nom au milieu, le menu en dessous ---------- */
@media (min-width: 960px) {
  html[data-entete="centre"] .entete__in { flex-direction: column; justify-content: center; gap: 4px; padding-block: 16px 6px; min-height: 0; }
  html[data-entete="centre"] .marque { margin: 0 auto; text-align: center; justify-items: center; }
  html[data-entete="centre"] .marque--logo { text-align: left; }
  html[data-entete="centre"] .nav { justify-content: center; order: 0; flex-basis: auto; margin-left: 0; padding-bottom: 0; }
  html[data-entete="centre"] [id] { scroll-margin-top: 128px; }
}
@media (min-width: 960px) and (max-width: 1179px) {
  html[data-entete="centre"] .entete__in { flex-wrap: nowrap; }
}
/* sur telephone : le nom au centre, le bouton reduit a son icone a droite */
@media (max-width: 959px) {
  html[data-entete="centre"] .entete__in { position: relative; justify-content: center; }
  html[data-entete="centre"] .marque { flex: 0 1 auto; margin: 0 auto; padding-inline: 52px; text-align: center; justify-items: center; }
  html[data-entete="centre"] .marque--logo { text-align: left; }
  html[data-entete="centre"] .entete__menu { position: absolute; right: var(--gouttiere); top: 14px; padding: 9px; }
  html[data-entete="centre"] .entete__menu span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html[data-entete="centre"] .entete--ouverte .nav { text-align: center; }
  html[data-entete="centre"] .entete--ouverte .nav a { text-align: center; }
}

/* --- 1 bis. l'en-tete epure : le nom, et un seul bouton Menu partout ------
   Sur ordinateur aussi, le menu se replie derriere son bouton et s'ouvre en
   panneau sous l'en-tete, a droite. Une page qui commence par un nom et
   presque rien d'autre. */
@media (min-width: 960px) {
  /* 27 septembre : un nom sur deux lignes commencait a 4 px du haut de l en-tete */
  html[data-entete="epure"] .entete__in { position: relative; min-height: 76px; padding-block: 12px; }
  html[data-entete="epure"] .entete__menu { display: inline-flex; flex: 0 0 auto; }
  html[data-entete="epure"] .nav { display: none; }
  html[data-entete="epure"] .entete--ouverte .nav {
    display: flex; flex-direction: column; position: absolute; top: calc(100% + 1px); right: var(--gouttiere);
    min-width: 280px; padding: 10px 0; background: var(--surface); border: 1px solid var(--trait);
    border-top: 0; border-radius: 0 0 14px 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .10);
  }
  html[data-entete="epure"] .entete--ouverte .nav a { padding: 11px 24px; border-radius: 0; }
  html[data-entete="epure"] .marque { font-size: 1.5rem; }
}
html[data-entete="epure"] .entete { border-bottom-color: transparent; }
/* sur telephone aussi, l'en-tete epure garde son caractere : le nom plus present,
   sans sa ligne, et un bouton sans cadre, en petites capitales */
@media (max-width: 959px) {
  html[data-entete="epure"] .marque { font-size: 1.3rem; }
  html[data-entete="epure"] .marque__ligne { display: none; }
  html[data-entete="epure"] .entete__menu { border-color: transparent; padding-inline: 4px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }
}

/* --- 2. le haut de page en plein ecran : la photo, et le titre dessus ------
   L'image couvre toute la largeur et presque toute la hauteur de l'ecran. Un
   degrade sombre la couvre en bas et a gauche, pour que le texte blanc se
   lise quelle que soit la photo. Le fond de la rubrique est sombre lui aussi :
   si l'image tarde, le titre reste lisible. */
html[data-accueil="plein"] .accueil {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: clamp(520px, 84vh, 880px);
  padding-block: 0 !important;
  /* en attendant la photo : sa propre teinte, assombrie (posee par le moteur) */
  background: color-mix(in srgb, var(--teinte-photo, #15171b) 40%, #0b0c0e) !important; color: #fff; text-align: left;
}
html[data-accueil="plein"] .accueil .accueil__in {
  display: block; position: static;
  padding-block: clamp(120px, 16vh, 180px) clamp(48px, 8vh, 96px);
}
html[data-accueil="plein"] .accueil .accueil__texte { display: block; max-width: 46rem; text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
html[data-accueil="plein"] .accueil .bouton { text-shadow: none; }
/* un bouton plein de couleur sombre (palette brume, ardoise) se perdait sur
   la photo assombrie : un liseré clair le detache, sans changer sa couleur.
   Vu au parcours client du 22 septembre. */
html[data-accueil="plein"] .accueil .bouton--plein { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7); }
html[data-accueil="plein"] .accueil .accueil__media { position: absolute; inset: 0; z-index: -1; margin: 0 !important; order: 0; }
html[data-accueil="plein"] .accueil .portrait {
  position: absolute; inset: 0; width: 100% !important; height: 100%; max-width: none !important; max-height: none !important;
  aspect-ratio: auto !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important; background: transparent;
}
html[data-accueil="plein"] .accueil .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
html[data-accueil="plein"] .accueil .accueil__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 12, 16, .10) 0%, rgba(10, 12, 16, .28) 45%, rgba(10, 12, 16, .82) 90%, color-mix(in srgb, var(--teinte-photo, #15171b) 40%, #0b0c0e) 100%),
    linear-gradient(90deg, rgba(10, 12, 16, .62) 0%, rgba(10, 12, 16, 0) 70%);
}
html[data-accueil="plein"] .accueil h1,
html[data-accueil="plein"] .accueil .accueil__sur { color: #fff; }
html[data-accueil="plein"] .accueil h1 em { color: inherit; }
html[data-accueil="plein"] .accueil .accueil__sous,
html[data-accueil="plein"] .accueil .accueil__corps { color: rgba(255, 255, 255, .9); }
html[data-accueil="plein"] .accueil .accueil__corps a { color: #fff; }
html[data-accueil="plein"] .accueil .accueil__note { display: none; }
html[data-accueil="plein"] .accueil .bouton--contour { color: #fff; border-color: rgba(255, 255, 255, .75); background: transparent; }
html[data-accueil="plein"] .accueil .bouton--contour:hover { color: #15171b; background: #fff; border-color: #fff; }
html[data-accueil="plein"] .accueil .bouton--discret { color: #fff; background: rgba(255, 255, 255, .16); }
html[data-accueil="plein"] .accueil .bouton--discret:hover { color: #15171b; background: #fff; }
/* la direction 3 est centree : elle le reste, texte au milieu de la photo */
html[data-direction="3"][data-accueil="plein"] .accueil { text-align: center; }
html[data-direction="3"][data-accueil="plein"] .accueil .accueil__texte { margin-inline: auto; }
html[data-direction="3"][data-accueil="plein"] .accueil .accueil__media::after {
  background: linear-gradient(180deg, rgba(10, 12, 16, .30) 0%, rgba(10, 12, 16, .45) 50%, rgba(10, 12, 16, .80) 100%);
}
/* un metier qui ouvre sur un portrait : on garde le visage dans le cadre */
html[data-accueil="plein"] .accueil .portrait img[src*="portrait"] { object-position: center 22%; }
/* sur telephone : la photo prend l'ecran, le texte se pose en bas */
@media (max-width: 799px) {
  html[data-accueil="plein"] .accueil { min-height: min(640px, 80svh); }
  html[data-accueil="plein"] .accueil .accueil__in { padding-block: 120px 36px; }
  html[data-accueil="plein"] .accueil .accueil__in .accueil__texte { display: block; }
  html[data-accueil="plein"] .accueil .accueil__in .accueil__texte > * { order: 0; }
  /* la photo garde la hauteur d'un ecran ; un texte long continue dessous,
     sur la teinte sombre, au lieu d'etirer la photo jusqu'au flou */
  html[data-accueil="plein"] .accueil .accueil__in .accueil__media { order: 0; margin: 0 !important; bottom: auto; height: min(80svh, 700px); }
  html[data-accueil="plein"] .accueil .accueil__in .portrait { max-height: none; }
  html[data-accueil="plein"] .accueil .accueil__in .accueil__sous { margin-bottom: .9em; }
  /* sur telephone le texte couvre le milieu de la photo, pas seulement le
     bas : le voile s'assombrit plus tot, pour qu'une photo claire (une salle
     aux grandes fenetres) laisse lire le texte blanc. Vu le 22 septembre. */
  html[data-accueil="plein"] .accueil .accueil__media::after,
  html[data-direction="3"][data-accueil="plein"] .accueil .accueil__media::after {
    background: linear-gradient(180deg, rgba(10, 12, 16, .18) 0%, rgba(10, 12, 16, .45) 32%, rgba(10, 12, 16, .72) 62%, rgba(10, 12, 16, .88) 90%, color-mix(in srgb, var(--teinte-photo, #15171b) 40%, #0b0c0e) 100%);
  }
}

/* --- 3. l'ecran partage : la photo d'un cote, bord a bord, le texte de l'autre
   La photo occupe toute une moitie de l'ecran, jusqu'au bord. Le texte garde
   l'alignement des autres rubriques : son bord exterieur tombe sur le bord
   du contenant. */
@media (min-width: 1100px) {
  html[data-accueil="partage"] .accueil { padding-block: 0 !important; text-align: left; }
  html[data-accueil="partage"] .accueil .accueil__in {
    max-width: none; padding: 0; gap: 0; align-items: stretch;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    min-height: clamp(440px, 40vw, 700px);
  }
  /* une photo en hauteur (un portrait) demande une moitie d'ecran plus haute,
     sinon le cadre lui coupe la tete et les pieds */
  html[data-accueil="partage"][data-photo="haute"] .accueil .accueil__in { min-height: clamp(560px, 62vw, 920px); }
  html[data-accueil="partage"] .accueil .accueil__texte {
    order: 1; align-self: center;
    padding-block: clamp(56px, 8vh, 112px);
    padding-left: max(var(--gouttiere), calc((100vw - var(--largeur)) / 2 + var(--gouttiere)));
    padding-right: clamp(32px, 5vw, 88px);
  }
  html[data-accueil="partage"] .accueil .accueil__media { order: 2; position: relative; margin: 0 !important; min-height: 100%; }
  html[data-accueil="partage"][data-compo="gauche"] .accueil .accueil__media { order: 1; }
  html[data-accueil="partage"][data-compo="gauche"] .accueil .accueil__texte {
    order: 2;
    padding-left: clamp(32px, 5vw, 88px);
    padding-right: max(var(--gouttiere), calc((100vw - var(--largeur)) / 2 + var(--gouttiere)));
  }
  html[data-accueil="partage"] .accueil .portrait {
    position: absolute; inset: 0; width: 100% !important; height: 100%; max-width: none !important; max-height: none !important;
    aspect-ratio: auto !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important;
  }
  html[data-accueil="partage"] .accueil .portrait img { width: 100%; height: 100%; object-fit: cover; }
  html[data-direction="3"][data-accueil="partage"] .accueil .accueil__texte { text-align: center; }
  html[data-direction="3"][data-accueil="partage"] .accueil .accueil__actions { justify-content: center; }
}
html[data-accueil="partage"] .accueil .accueil__note { display: none; }
/* sous 1100 px : une seule colonne. La photo passe sous le titre, touche les
   deux bords, et garde ses proportions (au plus les trois quarts de l'ecran
   en hauteur). Deux moities de 450 px couperaient une photo en largeur de
   moitie. */
@media (max-width: 1099px) {
  html[data-accueil="partage"] .accueil { padding-bottom: clamp(24px, 4vw, 40px) !important; }
  html[data-accueil="partage"] .accueil .accueil__in { grid-template-columns: minmax(0, 1fr) !important; }
  html[data-accueil="partage"] .accueil .accueil__in .accueil__media { order: 2; }
  html[data-accueil="partage"] .accueil .accueil__in .accueil__media { margin-inline: calc(-1 * var(--gouttiere)) !important; }
  html[data-accueil="partage"] .accueil .accueil__in .portrait {
    width: 100% !important; max-width: none !important; max-height: 72svh !important; aspect-ratio: auto !important;
    border: 0 !important; border-radius: 0 !important; margin: 0 !important;
  }
  html[data-accueil="partage"] .accueil .accueil__in .portrait { background: transparent; }
  html[data-accueil="partage"] .accueil .accueil__in .portrait img { width: auto; max-width: 100%; height: auto; max-height: 72svh; margin-inline: auto; object-fit: contain; }
}

/* --- 4. les titres de rubrique ----------------------------------------------
   « etiquette » : la petite etiquette en capitales au-dessus du titre (la
   forme d'avant). « trait » : un court trait de couleur a la place.
   « numero » : les rubriques numerotees, 01, 02, 03. L'etiquette ne
   disparait que si un titre est la pour prendre le relais. */
html[data-titres="trait"] .section__tete:has(> h2:not(:empty)) > .etiq,
html[data-titres="numero"] .section__tete:has(> h2:not(:empty)) > .etiq { display: none; }
html[data-titres="trait"] .section:not(.section--dense) .section__tete:has(> h2:not(:empty))::before {
  content: ''; display: block; width: 48px; height: 3px; border-radius: 2px;
  background: var(--titre-trait, var(--accent)); margin-bottom: 20px;
}
html[data-titres="numero"] main { counter-reset: rubrique; }
html[data-titres="numero"] .section:not(.section--dense) .section__tete:has(> h2:not(:empty)) { counter-increment: rubrique; }
html[data-titres="numero"] .section:not(.section--dense) .section__tete:has(> h2:not(:empty))::before {
  content: counter(rubrique, decimal-leading-zero); display: block; width: max-content; min-width: 2.6em;
  font-family: var(--corps); font-size: .85rem; font-weight: 600; letter-spacing: .12em; line-height: 1;
  color: var(--titre-marque, var(--accent-fonce)); padding-bottom: 10px; margin-bottom: 18px; border-bottom: 1px solid currentColor;
}
/* sur fond sombre (rubrique d'accent de la direction 1, contact de la
   direction 2) : la teinte claire, passee par deux variables pour ne pas se
   battre avec la specificite des regles ci-dessus */
html[data-direction="1"] .section--accent:not(.section--encadre), html[data-direction="2"] .contact { --titre-marque: var(--accent-clair); --titre-trait: var(--accent-clair); }
html[data-direction="3"][data-titres] .section__tete::before { margin-inline: auto; }
html[data-direction="3"][data-titres] .texte-media .section__tete::before { margin-inline: 0; }

/* >>> grilles creuses : genere, ne pas editer a la main >>> */
/* Ramene chaque grille au nombre d elements qu elle porte vraiment.
   Deux tuiles dans une rangee de quatre restaient calees a gauche,
   avec la moitie de la rangee vide : le defaut du 15 septembre. */
@media (min-width: 900px) {
  :root .accueil__in:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
  html[data-compo="gauche"] .accueil__in:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
  html[data-compo="aucun"] .accueil__texte:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
  :root .chiffres__in:not(:has(> :nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root .chiffres__in:not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root .chiffres__in:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
  :root .texte-media__in:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
  :root .texte-lieu__in:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
  :root .contact__in:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
  :root[data-media="inverse"] .texte-media__in:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
  :root[data-media="inverse"] .texte-lieu__in:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 700px) {
  :root .chiffres__in:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
  :root .chiffres__in:has(> :nth-child(3)):not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root .chiffres__in:has(> :nth-child(3)):not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 700px) and (max-width: 899.98px) {
  :root .chiffres__in:has(> :nth-child(4)):not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 720px) {
  :root .services:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1000px) {
  :root .services:not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root .services:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 800px) {
  :root .pied__grille:not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root .pied__grille:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
}
:root .marque--logo:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
html[data-compo="aucun"] .accueil__in:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
html[data-compo="bandeau"] .accueil__in:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
:root dl.pratique:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
:root .barre-mobile:not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root .barre-mobile:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
/* La rangee orpheline : trois cartes dans deux colonnes, deux en haut
   et une seule en bas. Le defaut du 17 septembre, vu sur le fleuriste.
   Quand le compte d elements laisse un seul element sur la derniere
   rangee, la grille prend une colonne de plus (ou de moins) pour que la
   derniere rangee en porte au moins deux. Colonnes egales seulement :
   une mise en page texte et image n est pas une grille de cartes. */
@media (min-width: 720px) {
  :root .services:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root .services:has(> :nth-child(5):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root .services:has(> :nth-child(7):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :root .services:has(> :nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root .services:has(> :nth-child(11):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root .services:has(> :nth-child(13):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  :root .services:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :root .services:has(> :nth-child(7):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :root .services:has(> :nth-child(10):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :root .services:has(> :nth-child(13):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* <<< grilles creuses <<< */


/* ===========================================================================
Les bandes de fond calculees par le moteur (22 septembre)

Assembler::bandesAlternees() pose data-fond sur chaque rubrique libre, en
tenant compte des rubriques en couleur et encadrees, pour que deux voisines
n'aient jamais le meme fond. Ces deux regles l'emportent sur le compte de
rang de la version 13, qui ignorait les fonds imposes.
=========================================================================== */
.section[data-fond="alt"] { background: var(--bande, var(--surface)) !important; }
.section[data-fond="page"] { background: transparent !important; }
.section[data-fond="fond2"] { background: var(--fond-2) !important; }

/* ===========================================================================
22 septembre : relecture des quatre demos.

1. Les ensembles d'une galerie se posent cote a cote quand la place le
   permet : chacun prend une part de la largeur proportionnelle a son nombre
   de photos. Deux photos puis une seule laissaient la moitie droite vide.
2. Une photo seule, en paysage, seule dans la galerie : le moteur lui donne
   la proportion 2,2 et elle occupe toute la largeur, en bandeau.
=========================================================================== */
@media (min-width: 900px) {
  .galerie__ensembles { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 40px; row-gap: 36px; }
  .galerie__ensembles > .galerie__ensemble { flex: var(--n) 1 0; min-width: min(100%, calc(var(--n) * 230px)); }
  .galerie__ensembles > .galerie__ensemble > .galerie__grille { max-width: none; }
}
.galerie__ensemble > .galerie__nom:first-child { margin-top: 0; }
.galerie__ensemble + .galerie__ensemble { margin-top: 36px; }
@media (min-width: 900px) { .galerie__ensembles > .galerie__ensemble + .galerie__ensemble { margin-top: 0; } }
.galerie .galerie__ensemble > .galerie__grille[style*="--ratio:2.20"] { max-width: none; }
.galerie .galerie__ensemble > .galerie__grille[style*="--ratio:2.20"] > .galerie__item { width: 100%; }

/* 22 septembre : le souffle des rubriques, resserre d'un cran pour les trois
   rythmes. Chaque rubrique porte son souffle en haut ET en bas : entre deux
   rubriques, le vide est donc le double. Mesure sur les demos a 1440 px :
   jusqu'a 239 px entre la fin d'un texte et le titre suivant. Les valeurs
   ci-dessus le ramenent sous 200 px, et le harnais le surveille desormais. */

/* Le dernier bloc d'une rubrique ne porte pas de marge basse : elle
   s'ajoutait au souffle de la rubrique, jusqu'a 30 px de vide de plus. */
.section .contenant :where(p, ul, ol, dl, figure, blockquote, table):last-child { margin-bottom: 0; }


/* --- audit du 23 septembre : la case de consentement du formulaire ---------
   C'est un label : la regle .form label (plus forte que .consentement seul)
   lui imposait sa marge de 6 px, si bien que le bouton Envoyer collait a la
   phrase, et en direction 3 elle passait en petites capitales espacees,
   illisible sur trois lignes. Une phrase se lit en minuscules, et le bouton
   respire. */
.form label.consentement {
  font-size: .85rem; font-weight: 400; letter-spacing: 0; text-transform: none;
  line-height: 1.5; margin: 14px 0 24px;
}

/* --- le premier ecran tient dans l'ecran (22 septembre, nuit) --------------
   Vu par Krikor sur la fleuriste, sur un ordinateur portable : la photo du
   bandeau commencait a 550 px, sous un titre de 350 px, et on n'en voyait
   que le haut. La direction 1 lui donnait en plus la forme d'un dome (son
   arche est faite pour un portrait en hauteur), et la direction 3 la
   reduisait a une ellipse de 220 px (son medaillon).
   Regle : une photo plus large que haute garde toute la largeur et un simple
   arrondi, quelle que soit la direction. Sur ordinateur, le titre se
   resserre et la photo prend la hauteur qui reste dans l'ecran. Le plein
   ecran et l'ecran partage ne depassent plus la hauteur de l'ecran. Le
   harnais mesure la part visible de la photo au premier ecran. */
:root:root[data-compo="bandeau"] .accueil .portrait {
  width: 100%; max-width: none; border-radius: var(--r-grand, 18px); aspect-ratio: 21 / 9;
}
@media (max-width: 699px) {
  :root:root[data-compo="bandeau"] .accueil .portrait { aspect-ratio: 3 / 2; }
}
@media (min-width: 800px) {
  :root:root[data-compo="bandeau"] .accueil .accueil__in { row-gap: 28px; }
  :root:root[data-compo="bandeau"] .accueil .accueil__media { order: 2; margin: 0; }
}
@media (min-width: 960px) {
  :root:root[data-compo="bandeau"] .accueil { padding-top: clamp(28px, 5svh, 72px); }
  :root:root[data-compo="bandeau"] .accueil .accueil__texte { max-width: 60rem; }
  :root:root[data-compo="bandeau"] .accueil h1 { font-size: clamp(2.5rem, 1.4rem + 2.4vw, 3.6rem); }
  :root:root[data-compo="bandeau"] .accueil .accueil__actions { margin-top: 28px; }
  /* la hauteur qui reste dans l'ecran ; la largeur suit, au plus 2,6 fois la
     hauteur, pour qu'un petit ecran montre la photo presque entiere au lieu
     d'une bande etroite qui en garde un tiers */
  :root:root[data-compo="bandeau"] .accueil .portrait {
    --haut-bandeau: clamp(240px, calc(100svh - 450px), 540px);
    aspect-ratio: auto; height: var(--haut-bandeau); width: min(100%, calc(var(--haut-bandeau) * 2.6)); margin-inline: auto !important;
  }
}
@media (min-width: 800px) {
  :root:root[data-accueil="plein"] .accueil { min-height: clamp(480px, calc(100svh - 90px), 880px); }
  :root:root[data-accueil="plein"] .accueil .accueil__in { padding-block: clamp(72px, 12svh, 180px) clamp(40px, 6svh, 96px); }
}
@media (min-width: 1100px) {
  :root:root[data-accueil="partage"] .accueil .accueil__in { min-height: clamp(420px, min(40vw, calc(100svh - 90px)), 700px); }
  :root:root[data-accueil="partage"][data-photo="haute"] .accueil .accueil__in { min-height: clamp(480px, min(62vw, calc(100svh - 90px)), 920px); }
}

/* le portrait a cote du titre (4/5, 550 px de haut) depassait le bas d'un
   petit portable : il prend au plus la hauteur qui reste dans l'ecran */
@media (min-width: 960px) {
  :root:root:not([data-accueil="plein"]):not([data-accueil="partage"]):not([data-compo="bandeau"]) .accueil .portrait {
    max-height: max(360px, calc(100svh - 170px));
  }
}
@media (min-width: 1100px) {
  :root:root[data-accueil="partage"] .accueil .accueil__texte { padding-block: clamp(36px, 7svh, 112px); }
}

/* texte centre au-dessus du bandeau : la ligne sous le titre a une largeur
   plafonnee, elle se centre elle aussi (vue a gauche sur le restaurant) */
:root:root[data-compo="bandeau"] .accueil .accueil__sous { margin-inline: auto; }

/* plein ecran sur telephone (22 septembre, nuit) : le bloc etait force a
   640 px et le texte pose en bas ; sur le restaurant, 264 px de lampe et de
   rideau avant le titre (vu par Krikor). Le bloc suit maintenant son texte,
   avec un plancher, et le haut garde juste assez de photo pour l'ambiance.
   Le voile suit la hauteur du bloc, pour rester sombre sous le texte. */
@media (max-width: 799px) {
  :root:root[data-accueil="plein"] .accueil { min-height: min(460px, 62svh); }
  :root:root[data-accueil="plein"] .accueil .accueil__in { padding-top: clamp(110px, 20svh, 170px); }
  :root:root[data-accueil="plein"] .accueil .accueil__in .accueil__media { bottom: 0; height: auto; max-height: min(80svh, 700px); }
}

/* Le bouton Menu du telephone mesurait 36 a 38 px de haut (audit design du
   23 septembre, 192 combinaisons a 390 px). Une cible tactile se touche du
   pouce : 44 px au moins, la recommandation des deux grands systemes. */
.entete__menu { min-height: 44px; min-width: 44px; justify-content: center; }

/* ------------------------------------------------------------------------
   24 septembre (Krikor) : l'ecart entre l'etiquette et son titre est le meme
   dans toutes les rubriques. Il variait de 4 a 18 px sur une meme page : les
   rubriques denses donnaient 8 px de marge a l'etiquette au lieu de 14 a 16,
   et le rythme de la page changeait encore la valeur. Le titre porte
   maintenant l'ecart, en partie en em : un grand titre a une ligne plus
   haute, l'em la compense. Le harnais mesure l'ecart rubrique par rubrique.
   ------------------------------------------------------------------------ */
html:not([data-titres="numero"]):not([data-titres="trait"]) .section__tete > .etiq { margin-bottom: 0 !important; }
/* La hauteur au-dessus des lettres d'un titre depend de sa police : mesuree
   pour chacun des neuf duos (direction et jeu de caracteres), en part de la
   taille du titre. Sans elle, Newsreader donnait 18 a 23 px au lieu de 14. */
html { --compense-titre: .165; }
html[data-direction="1"][data-typo="b"] { --compense-titre: .09; }
html[data-direction="2"][data-typo="b"] { --compense-titre: .07; }
html[data-direction="2"][data-typo="c"], html[data-direction="3"][data-typo="a"], html[data-direction="3"][data-typo="c"] { --compense-titre: -.03; }
html:not([data-titres="numero"]):not([data-titres="trait"]) .section__tete > .etiq + h2 { margin-top: calc(14px + var(--compense-titre) * 1em) !important; }

/* Style de titres « pastille » (24 septembre, choisi par Krikor a la place du
   trait) : l'etiquette posee dans une petite pastille de la teinte claire du
   site. Dans une rubrique en couleur, claire ou foncee, la pastille n'a pas
   de fond, seulement un contour de la couleur du texte : jamais clair sur
   clair (un fond teinte donnait 3,9 sur le vert du fleuriste). */
/* 29 septembre (Krikor : « les pastilles… elles ont la même couleur que certains
   fonds de rubriques, la pastille elle se voit pas »). La pastille avait la teinte
   claire du site, celle aussi de bien des fonds de rubrique : sur le catalogue du
   psychologue (29 palettes, trois directions), 383 pastilles sur 783 se
   confondaient avec leur fond (contraste sous 1,1). Elle mele maintenant un
   cinquieme de la couleur du site a cette teinte claire : un cran plus soutenue
   que les fonds clairs, elle reste claire sur une rubrique sombre (contact de la
   direction 2), et son texte fonce se lit. Mesure sur les 29 palettes et les 16
   metiers, dans les trois directions : 1,19 au moins avec son fond, 4,9 au moins
   pour son texte. La premiere ligne sert aux navigateurs sans color-mix. */
html[data-titres="pastille"] .section__tete > .etiq {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--accent-clair);
  background: color-mix(in srgb, var(--accent) 20%, var(--accent-clair));
  color: var(--accent-fonce);
  font-weight: 600;
}
html[data-titres="pastille"] .section__tete > .etiq::before { display: none !important; }
html[data-titres="pastille"] .section--accent .section__tete > .etiq {
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 50%, transparent);
  color: inherit;
}
html[data-direction="3"][data-titres="pastille"] .section:not(.texte-media) .section__tete > .etiq { margin-inline: auto; }


/* ------------------------------------------------------------------------
   25 septembre (Krikor) : une photo en fond de rubrique, au choix du client,
   sur la ou les rubriques qu'il veut. Cinq facons de la poser, essayees dans
   fpro.fr/admin/comparateur-photo-fond.html. Chacune tient avec la pire photo
   possible (toute blanche derriere un texte clair, toute noire derriere un
   texte fonce) : le harnais le mesure (photosEnFondLisibles).
   Les couleurs de la page sont relevees a la racine (--pf-*) : dans une
   rubrique, les mises en page redefinissent parfois l'encre et le fond.
   :is(#pf, .section--photo) porte le poids d'un identifiant : une regle de
   metier ecrite sur l'id d'une rubrique ne doit pas effacer la photo.
   ------------------------------------------------------------------------ */
:root { --pf-encre: var(--encre); --pf-fond: var(--fond); --pf-accent-fonce: var(--accent-fonce); }
.section--photo { --pf-fond-rubrique: var(--pf-fond); }
html[data-direction="2"] .contact.section--photo { --pf-fond-rubrique: var(--pf-encre); }
html body :is(#pf, .section--photo).section {
  background-color: #1a1a1a !important;
  background-image: linear-gradient(var(--pf-voile, transparent), var(--pf-voile, transparent)), var(--photo-fond) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.section--photo.photo-fond--sombre { --pf-voile: rgba(14, 14, 14, .7); }
.section--photo.photo-fond--couleur { --pf-voile: var(--pf-accent-fonce); }
html body :is(#pf, .section--photo).section.photo-fond--couleur {
  background-color: var(--pf-accent-fonce) !important;
  background-image: var(--photo-fond) !important;
  background-blend-mode: multiply;
}
.section--photo.photo-fond--encart { --pf-voile: transparent; }
html body :is(#pf, .section--photo).section.photo-fond--encart { padding-block: clamp(40px, 7vw, 96px) !important; }
.section--photo.photo-fond--encart > .contenant {
  background: color-mix(in srgb, var(--pf-fond-rubrique) 95%, transparent) !important;
  border-radius: 16px;
  padding: clamp(22px, 4vw, 48px) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .2);
}
@media (max-width: 600px) {
  .section--photo.photo-fond--encart > .contenant { margin-inline: 12px !important; width: auto !important; }
}
/* 27 septembre : a 88 %, trois textes passaient sous 4,5 avec la pire photo
   (4,24 a 4,39 : electricien, macon, fleuriste). A 92 % : 4,67 au plus juste. */
.section--photo.photo-fond--filigrane { --pf-voile: color-mix(in srgb, var(--pf-fond-rubrique) 92%, transparent); }
/* le texte secondaire prend l encre principale : sur le voile clair, le gris ne tient pas avec la pire photo. Par la variable, pas par la couleur : un encadre qui porte son propre fond (ligne mise en avant, pastille de couleur) garde la sienne. */
.section--photo.photo-fond--filigrane { --encre-2: var(--pf-encre); }
.section--photo.photo-fond--filigrane .section__tete > .etiq { color: var(--pf-accent-fonce) !important; }
html[data-direction="2"] .contact.section--photo.photo-fond--filigrane :where(p, li, dd, dt, small, label, td, th, figcaption),
html[data-direction="2"] .contact.section--photo.photo-fond--filigrane .section__tete > .etiq { color: inherit !important; }
html body :is(#pf, .section--photo).section.photo-fond--tete {
  background-color: var(--pf-fond-rubrique) !important;
  background-image: none !important;
  position: relative;
  padding-top: calc(clamp(180px, 26vw, 340px) + clamp(28px, 4vw, 48px)) !important;
}
.section--photo.photo-fond--tete::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(180px, 26vw, 340px);
  background: linear-gradient(to bottom, transparent 50%, var(--pf-fond-rubrique) 100%), var(--photo-fond) center / cover no-repeat;
  pointer-events: none;
}
.section--photo.photo-fond--tete > .contenant { position: relative; }
.section--photo:is(.photo-fond--sombre, .photo-fond--couleur) {
  color: #fff !important;
  --encre: #fff;
  --encre-2: rgba(255, 255, 255, .88);
  --encre-contraste: #fff;
  --titre-marque: #fff;
  --titre-trait: #fff;
  --surface: rgba(0, 0, 0, .24);
  --accent-clair: rgba(0, 0, 0, .24);
  --trait: rgba(255, 255, 255, .34);
  --trait-fort: #fff;
  --fond: transparent;
  --fond-2: transparent;
  --bande: transparent;
}
/* un bouton ou un encadre qui porte son propre fond garde ses couleurs */
.section--photo:is(.photo-fond--sombre, .photo-fond--couleur) :where(p, li, span, dd, dt, h2, h3, h4, small, em, strong, b, i, a, td, th, figcaption, blockquote, cite, label, .etiq):not(:where(.bouton, .bouton *, .lieu *)) { color: #fff !important; }
.section--photo:is(.photo-fond--sombre, .photo-fond--couleur) :is(input, textarea, select) { background: #fff !important; color: #1a1a1a !important; }
.section--photo:is(.photo-fond--sombre, .photo-fond--couleur) .bouton--plein { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
/* le bouton discret : une pastille blanche, texte de la couleur foncee du site */
.section--photo:is(.photo-fond--sombre, .photo-fond--couleur) .bouton--discret { background: #fff !important; color: var(--pf-accent-fonce) !important; }
.section--photo:is(.photo-fond--sombre, .photo-fond--couleur) .bouton--discret:hover { background: var(--accent) !important; color: var(--accent-contraste) !important; }
html[data-titres="pastille"] .section--photo:is(.photo-fond--sombre, .photo-fond--couleur) .section__tete > .etiq { background: transparent !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55) !important; }

/* Le cadrage de la photo en fond (25 septembre, Krikor) : le client choisit
   la partie montree quand la rubrique recadre la photo, le haut, le milieu
   ou le bas. */
html body :is(#pf, .section--photo).section.photo-cadrage--haut { background-position: center top !important; }
html body :is(#pf, .section--photo).section.photo-cadrage--bas { background-position: center bottom !important; }
.section--photo.photo-fond--tete.photo-cadrage--haut::before { background-position: 0 0, center top; }
.section--photo.photo-fond--tete.photo-cadrage--bas::before { background-position: 0 0, center bottom; }


/* 25 septembre : le numero de rubrique dans une rubrique en couleur.
   La mise en page 1 le peignait en --accent-clair, pense pour un fond accent.
   Les rubriques signature des metiers (aplat sombre, teinte claire) changent ce fond :
   le numero devenait invisible (1,0 a 1,4). Il prend la couleur du texte du bloc,
   comme la pastille. Poids d'un identifiant pour passer devant la regle du style numero. */
html[data-titres="numero"] :is(#pf, .section--accent) .section__tete::before { color: inherit; }


/* 25 septembre : le menu ouvert sur telephone, le meme sur tous les sites (Krikor, choix 1 : traits droits).
   Les liens gardaient la forme du menu d'ordinateur : arrondi (999 px en mise en page 1,
   10 px en 2), si bien que le trait au-dessus de chaque rubrique se courbait au bout ; en
   mise en page 3, l'ecart de 22 px entre les liens decalait chaque mot vers son trait du haut,
   et le texte passait en encre pleine. Ici : traits droits sur toute la largeur, un de plus
   sous la derniere rubrique, pas d'ecart entre les liens, texte en encre secondaire. */
@media (max-width: 959px) {
  html body .entete--ouverte .nav { gap: 0; row-gap: 0; }
  html body .entete--ouverte .nav a { border-radius: 0; color: var(--encre-2); }
  html body .entete--ouverte .nav a:last-child { border-bottom: 1px solid var(--trait); }
}


/* 25 septembre : le nom du site et sa petite ligne, centres l'un sur l'autre (Krikor).
   Un nom long s'allongeait vers la droite, jusqu'au menu. Le bloc reste a sa place a gauche :
   sa colonne ne depasse pas 21 rem (ni la place disponible sur telephone), un nom plus long
   passe a la ligne en lignes equilibrees, et chaque ligne est centree sur les autres. */
html body .marque { grid-template-columns: fit-content(21rem); justify-content: start; justify-items: center; text-align: center; }
html body .marque--logo { grid-template-columns: auto fit-content(21rem); }
html body .marque__nom { text-wrap: balance; }


/* 25 septembre : dans une galerie en plusieurs ensembles, les photos d'une meme
   rangee ont la meme taille (Krikor : « une photo plus petite que les autres, ca ne
   va pas du tout »). Vu sur le plombier (deux photos et une seule), le fleuriste
   (trois et une) et le restaurant (deux et une) : la photo seule suivait sa propre
   regle de largeur. Quand le moteur pose galerie__ensembles--rang (quatre photos au
   plus), la largeur se calcule sur la rangee entiere : (largeur - ecarts) / nombre
   de photos, bornee comme deux photos seules (460 px de haut). */
@media (min-width: 900px) {
  .galerie__ensembles.galerie__ensembles--rang { container-type: inline-size; flex-wrap: nowrap; }
  .galerie__ensembles--rang > .galerie__ensemble { flex: 0 0 auto !important; min-width: 0 !important; }
  .galerie__ensembles--rang .galerie__grille { flex-wrap: nowrap; }
  .galerie__ensembles--rang .galerie__grille > .galerie__item.galerie__item {
    width: min(calc(460px * var(--ratio-rang, var(--ratio, 1))), calc((100cqw - (var(--t) - var(--e)) * var(--ecart, 18px) - (var(--e) - 1) * 40px) / var(--t))) !important;
  }
  .galerie__ensembles--rang .galerie__item img { aspect-ratio: var(--ratio-rang, var(--ratio)); }
}

/* 26 septembre, les titres sur telephone (Krikor : « sur mobile, les titres
   prennent beaucoup de place », « il y a des titres qui sont trop gros »).
   La regle du telephone (.accueil h1 sous 420 px) laissait passer les grands
   telephones : a 428-430 px (iPhone Plus, Pro Max), le titre d'accueil
   reprenait sa taille d'ordinateur, 44 a 49 px sur trois ou quatre lignes,
   et le haut de page « Grand titre, sans photo » gardait 47 px meme a
   390 px. Une seule echelle maintenant pour tout ce qui est plus etroit
   qu'un ordinateur, quels que soient la mise en page, le haut de page et le
   metier : 31 a 33 px sur telephone, 38 a 48 px sur tablette (35 a 37 px
   sur telephone pour le grand titre sans photo). Les intertitres suivent
   (25 a 26 px sur telephone au lieu de 27 a 32 ; les rubriques denses
   gardent leur petit titre), le sous-titre de l'accueil passe de 20 a 18 px (mises en page 1 et 3), et
   un nom long dans l'entete (plus de 24 signes, classe marque--long posee
   par Template.php) perd un cran sur telephone, deux au-dela de 32 signes
   (marque--tres-long), au lieu de s'etaler sur trois lignes. Le harnais le mesure a 390 et a 430 px. */
@media (max-width: 959px) {
  html:root body .accueil h1 { font-size: clamp(1.85rem, 1.25rem + 3vw, 3rem); }
  html:root[data-compo="aucun"] body .accueil h1 { font-size: clamp(2.05rem, 1.35rem + 3.6vw, 3.6rem); }
  html:root body main h2 { font-size: clamp(1.45rem, 1.05rem + 2vw, 2.1rem); }
}
@media (max-width: 599px) {
  /* 20 px en mises en page 1 et 3 ; la 2 garde ses 16 px */
  html:root:not([data-direction="2"]) body .accueil__sous { font-size: 1.125rem; }
  /* jamais sous 16 px : en mise en page 2, le nom part deja de 17,6 px */
  html:root body .marque--long .marque__nom { font-size: max(1rem, .86em); line-height: 1.15; }
  html:root body .marque--tres-long .marque__nom { font-size: max(1rem, .78em); }
}

/* 26 septembre, suite : le titre d'accueil sur ordinateur. Krikor voyait
   encore de gros titres dans les apercus de la page d'accueil de fpro.fr,
   qui montrent les sites en mise en page d'ordinateur (1 280 px). Le titre
   d'accueil y faisait 70 a 83 px, jusqu'a cinq lignes dans la colonne de
   texte d'un haut de page a photo a cote (« Le Fournil de la Doutre,
   boulangerie a Valence »), trois lignes sur la moitie de la photo du
   restaurant. Il est plafonne a 58 px : 45 px a 960, 52 a 1 280, 56 a
   1 440. Le grand titre sans photo garde un cran de plus (65 a 70 px au
   lieu de 83). */
@media (min-width: 960px) {
  html:root body .accueil h1 { font-size: clamp(2.6rem, 1.5rem + 2.2vw, 3.6rem); }
  html:root[data-compo="aucun"] body .accueil h1 { font-size: clamp(3rem, 1.8rem + 2.8vw, 4.4rem); }
}

/* 26 septembre, le texte sur la photo plein ecran (choix de Krikor : n°3 sur
   telephone et sur ordinateur, « un peu au-dessus du milieu »). Le texte
   etait pose en bas de la photo (flex-end) : sur telephone, pres de 170 px
   de photo vide au-dessus du titre, « trop d'espace en haut de la photo ».
   Il est maintenant centre dans la photo, avec moins d'air au-dessus qu'en
   dessous : le centre que l'oeil percoit. Le voile suit le texte, plus
   sombre en haut qu'avant : le texte reste lisible meme sur une photo toute
   blanche (garde-fou au harnais, sur la pire photo possible). */
:root:root:root[data-accueil="plein"] .accueil { align-items: center; }
@media (max-width: 799px) {
  :root:root:root[data-accueil="plein"] .accueil .accueil__in { padding-top: clamp(56px, 9svh, 88px); padding-bottom: clamp(80px, 13svh, 120px); }
  :root:root:root[data-accueil="plein"] .accueil .accueil__media::after { background: linear-gradient(180deg, rgba(10, 12, 16, .42) 0%, rgba(10, 12, 16, .62) 16%, rgba(10, 12, 16, .66) 60%, rgba(10, 12, 16, .84) 100%); }
}
@media (min-width: 800px) {
  :root:root:root[data-accueil="plein"] .accueil .accueil__in { padding-top: clamp(56px, 9svh, 140px); padding-bottom: clamp(96px, 15svh, 220px); }
  :root:root:root[data-accueil="plein"] .accueil .accueil__media::after { background: linear-gradient(180deg, rgba(10, 12, 16, .38) 0%, rgba(10, 12, 16, .62) 18%, rgba(10, 12, 16, .66) 60%, rgba(10, 12, 16, .84) 100%), linear-gradient(90deg, rgba(10, 12, 16, .55) 0%, rgba(10, 12, 16, 0) 70%); }
  :root:root:root[data-accueil="plein"][data-direction="3"] .accueil .accueil__media::after { background: linear-gradient(180deg, rgba(10, 12, 16, .42) 0%, rgba(10, 12, 16, .62) 18%, rgba(10, 12, 16, .66) 60%, rgba(10, 12, 16, .84) 100%); }
}

/* 26 septembre, les boutons d'une rubrique a photo en fond sombre ou en
   couleur. L'encre y devient blanche et le fond transparent ; or la mise en
   page 3 peint le bouton plein avec l'encre pour fond et le fond pour
   texte : « Envoyer » s'ecrivait en transparent sur du blanc (contact du
   plombier). Le bouton plein y garde la couleur du metier, comme en mises
   en page 1 et 2 ; au survol, un bouton a contour passe en blanc avec un
   texte fonce, jamais transparent. */
html:root .section--photo:is(.photo-fond--sombre, .photo-fond--couleur) .bouton--plein { background: var(--accent); border-color: var(--accent); color: var(--accent-contraste); }
html:root .section--photo:is(.photo-fond--sombre, .photo-fond--couleur) .bouton--plein:hover { background: var(--accent-fonce, var(--accent)); border-color: var(--accent-fonce, var(--accent)); color: var(--accent-contraste); }
html:root .section--photo:is(.photo-fond--sombre, .photo-fond--couleur) .bouton--contour:hover { background: #fff; border-color: #fff; color: var(--pf-accent-fonce, #15171b); }

/* 26 septembre : pas de mot seul sur la derniere ligne d'un paragraphe
   (vu chez le paysagiste, mise en page 3, texte centre). Les titres sont
   deja en « balance ». :where() garde la specificite a zero : une regle de
   mise en page ou de metier l'emporte toujours. Un navigateur qui ne
   connait pas la valeur l'ignore, sans autre effet. */
:where(main) :where(p, li, dd, figcaption, blockquote) { text-wrap: pretty; }

/* 26 septembre : la photo en fond de rubrique attend que sa rubrique
   approche de l'ecran, sur les sites publies (Publisher::differerPhotosFond).
   Tant que pf-proche n'est pas posee, pas de photo : la rubrique garde sa
   couleur et son voile, comme avec la pire photo que mesure le harnais. */
html.pf-differe .section--photo:not(.pf-proche) { --photo-fond: none !important; }

/* 26 septembre : au telephone, la photo en fond prend sa variante de 960 px
   (Assembler::photosEnFond la nomme quand elle existe). La regle d'attente
   ci-dessus, plus precise, passe devant tant que la rubrique est loin. */
@media (max-width: 699px) {
  html .section--photo[style*="--photo-fond-tel"] { --photo-fond: var(--photo-fond-tel) !important; }
}


/* === 27 septembre : alignements ============================================
   Krikor : « chez le psychologue, la photo est parfaitement alignee avec le
   texte en haut de la page ; verifie les alignements, les espaces, les
   marges ». Mesure sur les dix-sept sites a 390, 900, 960, 1024, 1280, 1440
   et 1920 px. Cinq ecarts, corriges ci-dessous ; le reste tombait juste. */

/* 1. Photo a cote du texte : elle prend la hauteur du texte. Le cadre 4/5
   fixe (550 px de haut a 1 440 px) depassait le texte de 30 a 222 px selon
   les demos : osteopathe 222 px au-dessus du titre, professeur 69 px en haut
   et en bas, traiteur 65 px ; a 900 px, c'est le texte qui depassait (kine
   46 px). Le haut de la photo tombe sur le haut du titre, son bas sur le bas
   des boutons. Le cadre reste entre le 4/3 couche et le 2/3 debout, pour
   qu'un texte tres court ou tres long ne donne ni une bande ni une colonne,
   et la photo est calee plus haut (5 %) pour garder la tete d'un portrait
   dans un cadre plus large que haut (a 12 %, les cheveux de l'osteopathe
   touchaient encore le bord : vu par Krikor). Ordinateur seulement : sur telephone,
   rien ne change. La mise en page 3 (petite photo ronde au-dessus du titre)
   et le bandeau ne sont pas concernes. */
@media (min-width: 900px) {
  html[data-accueil="cote"]:not([data-direction="3"]):not([data-compo="bandeau"]):not([data-compo="aucun"]) .accueil__media {
    align-self: stretch;
    container-type: inline-size;
  }
  html[data-accueil="cote"]:not([data-direction="3"]):not([data-compo="bandeau"]):not([data-compo="aucun"]) .accueil__media .portrait {
    position: relative;
    aspect-ratio: auto;
    height: 100%;
    min-height: calc(min(100cqi, 440px) * .75);
    max-height: calc(min(100cqi, 440px) * 1.5);
  }
  html[data-accueil="cote"]:not([data-direction="3"]):not([data-compo="bandeau"]):not([data-compo="aucun"]) .accueil__media .portrait img {
    position: absolute;
    inset: 0;
    object-position: center 5%;
  }
}

/* 2. Ecran partage : le bord du texte se calculait sur 100vw, qui compte la
   barre de defilement quand elle prend de la place (Windows). Le texte
   tombait 7 px plus loin que l'en-tete et les rubriques (photographe : 158
   au lieu de 151 a 1 440 px ; plombier et electricien, 8 px du cote droit).
   La colonne fait la moitie exacte de la page, barre non comprise : le
   calcul part d'elle. */
@media (min-width: 1100px) {
  html[data-accueil="partage"] .accueil .accueil__texte {
    padding-left: max(var(--gouttiere), calc(100% - var(--largeur) / 2 + var(--gouttiere)));
  }
  html[data-accueil="partage"][data-compo="gauche"] .accueil .accueil__texte {
    padding-left: clamp(32px, 5vw, 88px);
    padding-right: max(var(--gouttiere), calc(100% - var(--largeur) / 2 + var(--gouttiere)));
  }
}

/* 3. Menu de l'en-tete : les liens ont 12 px de marge interieure pour leur
   pastille de survol, et le dernier (« Contact ») finissait 12 px avant le
   bord ou s'arretent la photo et les rubriques. Le menu deborde d'autant :
   le mot tombe sur le bord, la pastille dans la gouttiere. La mise en page 3
   (liens sans pastille) est deja juste. */
@media (min-width: 960px) {
  html[data-entete="classique"]:not([data-direction="3"]) .entete__in > .nav:last-child { margin-inline-end: -12px; }
}

/* 4. Rubrique texte en deux colonnes (mise en page 1 : titre a gauche, texte
   a droite) : la marge de 32 px sous le titre, utile quand il est au-dessus
   du texte, allongeait la rangee quand il etait plus haut que lui. 40 px de
   vide de plus en bas qu'en haut (coiffeur, « Bon a savoir » : 218 px entre
   deux rubriques, harnais). */
@media (min-width: 900px) {
  :root[data-direction="1"] .texte__in:has(> :nth-child(2)) > .section__tete { margin-bottom: 0; }
}

/* 5. Nom du site sur deux lignes : sa colonne est bornee a 21 rem (regle du
   25 septembre, plus haut), et un nom plus long passe a la ligne en lignes
   equilibrees, plus courtes que la colonne et centrees dedans. Tout le bloc
   glissait vers la droite du bord ou commencent le titre et les rubriques :
   59 px pour le psychologue a 1 440 px, 24 px sur telephone. site.24.js
   mesure la plus longue ligne et la donne ici ; sans lui, rien ne change. */
html body .marque { grid-template-columns: fit-content(min(21rem, var(--marque-col, 21rem))); }
html body .marque--logo { grid-template-columns: auto fit-content(min(21rem, var(--marque-col, 21rem))); }


/* 27 septembre, le soir : sur un telephone tres dense (trois points par pixel,
   iPhone recent), la photo du haut de l'ecran partage ne faisait que les deux
   tiers de l'ecran, centree, pendant que le texte part du bord (vu par Krikor
   sur le plombier). Sa largeur suivait la taille annoncee au navigateur pour
   lui faire choisir une variante legere (Assembler::densitePlafonnee : 66,7 %
   de l'ecran), et non l'ecran. Elle prend maintenant toute la largeur, bord a
   bord comme prevu ; une photo tres haute est coupee a 72 % de la hauteur de
   l'ecran au lieu de retrecir. Le harnais le verifie (photo du haut sur un
   telephone dense). */
@media (max-width: 1099px) {
  html[data-accueil="partage"] .accueil .accueil__in .portrait img { width: 100%; max-width: none; margin-inline: 0; object-fit: cover; }
}

/* 28 septembre : photo a cote du texte, sur ordinateur, la paire au centre et
   le meme ecart des deux cotes (Krikor : "il faut qu'il soit centre... les
   deux doivent etre similaires a gauche et a droite") ; choisi par lui le 28
   dans le comparateur : la paire au centre, ecart C (137 px sur un grand
   ecran). Le script
   (accueilCote, site.24.js) pose la largeur de la plus longue ligne du texte
   et celle de la photo, et marque le haut de page (data-mesure) ; sans lui,
   rien ne change. L'ecart ne depasse jamais la place qui reste : un texte
   large remplit la ligne, comme avant, sans passer a la ligne. Mise en page 3
   (petite photo ronde) non concernee ; au telephone, la photo passe sous le
   texte. */
@media (min-width: 900px) {
  html[data-accueil="cote"]:not([data-direction="3"]) .accueil .accueil__in[data-mesure] { grid-template-columns: minmax(0, var(--texte-large)) minmax(0, var(--photo-large)); column-gap: min(clamp(80px, 9.5vw, 136px), calc(100% - var(--texte-large) - var(--photo-large))); justify-content: center; }
  html[data-accueil="cote"][data-compo="gauche"]:not([data-direction="3"]) .accueil .accueil__in[data-mesure] { grid-template-columns: minmax(0, var(--photo-large)) minmax(0, var(--texte-large)); }
}

/* Le cadrage d'une photo propre au telephone (28 septembre, Ajuster : « Cadrer
   autrement sur telephone ») : le moteur le pose en ligne sur la photo, en
   --cadre-tel, et il passe ici devant le cadrage commun. */
@media (max-width: 699px) {
 img[style*="--cadre-tel"] { object-position: var(--cadre-tel) !important; }
}