/* ===========================================================================
   Densité des pages de la version 10
   ===========================================================================
   Trois corrections, groupées ici plutôt que dispersées dans six feuilles :
   ce sont des réglages de mise en page, ils se relisent et se règlent mieux
   côte à côte.

   1. LE BLOC DE FIN SEMBLAIT CHEVAUCHER LE CONTENU. Il n'y avait aucun
      chevauchement réel : son fond sombre commençait à ras de la dernière
      rangée de cartes, sans marge ni transition, et l'œil lisait la coupure
      comme un recouvrement. Il reçoit une marge haute et un liseré de
      séparation.

   2. TROP DE HAUTEUR PERDUE. Les paddings verticaux avaient été posés section
      par section, chacun raisonnable, mais leur addition faisait défiler dans
      le vide entre deux blocs. Ils sont resserrés d'environ un tiers.

   3. UN PEU PLUS DE LARGEUR. 1180 px sur un écran de 1440 laissait des marges
      inutilement larges. On passe à 1300 px — au-delà, les lignes de texte
      deviennent trop longues à lire, ce qui coûterait plus que le gain.

   Chargée par l'en-tête partagé, donc après les feuilles de page : ces règles
   l'emportent sur celles qu'elles corrigent, à spécificité égale.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Le bloc de fin se détache
   --------------------------------------------------------------------------- */
.p26-final {
  /* Il était collé au contenu précédent. La marge le sépare, le liseré marque
     la frontière sans ajouter une bande vide de plus. */
  margin-top: 4rem;
  border-top: 1px solid var(--line);
  /* 8rem/7rem était généreux pour une page d'accueil, trop pour une fin de
     page qu'on atteint après avoir déjà beaucoup défilé. */
  padding: 5rem 6vw 4.5rem;
}
.p26-final h2 { margin: 0.8rem 0 1rem; }
.p26-final p { margin-bottom: 1.8rem; }

/* La galerie et l'accueil ont leurs propres transitions vers ce bloc : elles
   n'ont pas besoin de la marge, qui y créerait une coupure là où il n'y en
   avait pas. */
.gallery ~ .p26-final,
.zone ~ .p26-final,
.faq ~ .p26-final,
/* La demande d'avis a son propre fond plein : la marge laissait voir une bande
   noire entre les deux blocs, comme si la page s'interrompait. */
.reviews ~ .p26-final { margin-top: 0; border-top: 0; }

/* ---------------------------------------------------------------------------
   2. Hauteurs resserrées
   --------------------------------------------------------------------------- */

/* Le bandeau de titre : il portait 4,5 rem de padding en haut ET la hauteur de
   la barre de navigation. */
.hero-page { padding-block: 0 1rem; }
.hero-page .page-hero {
  padding: 3rem 6vw 2.4rem;
  /* 900 px bridait le titre sur les grands ecrans. 1040 lui laisse de l air
     sans allonger le chapo : celui-ci garde sa mesure de 60 caracteres, reglee
     sur la lecture et non sur la place disponible. */
  max-width: 1040px;
}

/* Pages prestations */
.ps-editorial { padding-top: 3rem; }
.ps-travaux,
.ps-etapes,
.ps-realisations,
.ps-conseils,
.ps-faq,
.ps-autres { padding-top: 3rem; }
.ps-travaux h2,
.ps-etapes h2,
.ps-realisations h2,
.ps-conseils h2,
.ps-faq h2,
.ps-autres h2 { margin-bottom: 1.4rem; }
.ps-garanties { padding-top: 2.2rem; }
.ps-hero-visuel-seul { margin-top: 0; }

/* Fiche de réalisation */
.fr-tete { padding-top: 1.6rem; }
.fr-bloc { padding-top: 2.6rem; }
.fr-bloc h2 { margin-bottom: 1.1rem; }

/* Conseils */
.cs-hero, .cs-entete { padding-top: 1.6rem; }
.cs-tri { padding-top: 2rem; }
.cs-une { padding-top: 2.4rem; }
.cs-liste { padding-top: 2.6rem; }
.cs-vide { padding-top: 2.4rem; }

/* Inspirations */
.ins-tete, .ins-fiche-tete { padding-top: 1.6rem; }
.ins-filtres-zone { padding-top: 1.8rem; }
.ins-liste { padding-top: 1.2rem; }
.ins-bloc { padding-top: 2.4rem; }

/* ---------------------------------------------------------------------------
   3. Un peu plus de largeur
   ---------------------------------------------------------------------------
   Les colonnes de TEXTE gardent leur largeur en « ch » : elles sont réglées
   sur la longueur de ligne confortable à la lecture, pas sur la place
   disponible. Seuls les conteneurs de grilles et de cartes s'élargissent.
   --------------------------------------------------------------------------- */
.ps-hero,
.ps-editorial,
.ps-travaux,
.ps-etapes,
.ps-realisations,
.ps-conseils,
.ps-faq,
.ps-garanties,
.ps-autres,
.fr-tete,
.fr-bloc,
.cs-cta,
.cs-entete,
.cs-visuel,
.cs-outil,
.cs-liens,
.cs-realisations,
.cs-suite,
.ins-tete,
.ins-filtres-zone,
.ins-liste,
.ins-fiche-tete,
.ins-bloc,
.outils-v10-grille,
.confiance-inner { max-width: 1300px; }

.p26-final-inner { max-width: 820px; }

/* Sur les écrans intermédiaires, l'élargissement n'a pas lieu d'être : la
   place manque déjà. */
@media (max-width: 1360px) {
  .ps-hero, .ps-editorial, .ps-travaux, .ps-etapes, .ps-realisations,
  .ps-conseils, .ps-faq, .ps-garanties, .ps-autres,
  .fr-tete, .fr-bloc,
  .cs-cta, .cs-entete, .cs-visuel, .cs-outil, .cs-liens, .cs-realisations, .cs-suite,
  .ins-tete, .ins-filtres-zone, .ins-liste, .ins-fiche-tete, .ins-bloc,
  .outils-v10-grille, .confiance-inner { max-width: 1180px; }
}

@media (max-width: 700px) {
  /* Sur mobile, resserrer davantage ferait se toucher les blocs : on garde de
     l'air, c'est le seul endroit où il sert vraiment à séparer. */
  .p26-final { padding: 3.6rem 1.5rem 3.2rem; margin-top: 2.6rem; }
  .hero-page .page-hero { padding: 2.2rem 1.5rem 1.8rem; }
}

/* ===========================================================================
   Section « Des outils et des repères » — accueil
   ===========================================================================
   Elle était sur un aplat noir, alignée à gauche, et coupait la page en deux.
   Elle reprend maintenant le traitement des autres sections de l'accueil : le
   fond chaud et son halo la rattachent à la section des prestations, juste
   au-dessus, et son en-tête est centré comme partout ailleurs.
   =========================================================================== */

.outils-v10 { position: relative; overflow: hidden; padding-block: 4rem; }

.outils-v10 .head {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
}
.outils-v10 .head .eyebrow { display: block; margin-bottom: 0.9rem; }
.outils-v10 .head h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.12;
  margin: 0 0 0.9rem;
}
.outils-v10 .head p {
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0 auto;
  max-width: 62ch;
}

.outils-v10-grille { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------------
   Bouton vers la page zone d'intervention, sous la liste des communes
   ---------------------------------------------------------------------------
   Bouton PLEIN, pas un contour : sur le fond bleu de cette section, un bouton
   secondaire se confond avec les pastilles de communes juste au-dessus. Il
   passait inapercu.
   --------------------------------------------------------------------------- */
.zone-plus { margin-top: 2rem; }

.zone-plus-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.9rem;
  font-size: 1rem;
  font-weight: 600;
  /* Une lueur ocre, assez large pour se detacher du bleu sans faire clignoter
     la section. Elle respire lentement — le regard la trouve, elle ne le
     poursuit pas. */
  box-shadow: 0 0 0 0 rgba(232, 162, 61, 0.45), 0 10px 26px rgba(0, 0, 0, 0.3);
  animation: zonePulse 3.4s ease-in-out infinite;
}
@keyframes zonePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 162, 61, 0.40), 0 10px 26px rgba(0, 0, 0, 0.3); }
  50%      { box-shadow: 0 0 0 10px rgba(232, 162, 61, 0), 0 10px 26px rgba(0, 0, 0, 0.3); }
}

.zone-plus-fleche { transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1); }
.zone-plus-btn:hover .zone-plus-fleche,
.zone-plus-btn:focus-visible .zone-plus-fleche { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .zone-plus-btn { animation: none; }
  .zone-plus-fleche { transition: none; }
  .zone-plus-btn:hover .zone-plus-fleche { transform: none; }
}

/* ===========================================================================
   Liens du contenu et cartes colorées — pages v10
   =========================================================================== */

/* Les liens visités reprenaient le violet par défaut du navigateur, jamais
   redéfini pour le corps de texte : sur un fond sombre il jurait avec toute la
   palette. Ocre dans les deux états, souligné pour rester repérable sans
   dépendre de la seule couleur. */
.ps-intro a,
.ps-colonne a,
.fr-texte a {
  color: var(--ocre);
  text-decoration-color: rgba(232, 162, 61, 0.5);
  text-underline-offset: 3px;
}
.ps-intro a:visited,
.ps-colonne a:visited,
.fr-texte a:visited { color: var(--ocre); }
.ps-intro a:hover,
.ps-colonne a:hover,
.fr-texte a:hover { text-decoration-color: var(--ocre); }

/* Un lien court ne doit pas se couper en deux : le soulignement paraît cassé
   et le libellé devient difficile à lire. */
.lien-insecable { white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Cartes teintées par la prestation vers laquelle elles mènent
   ---------------------------------------------------------------------------
   Le fond reprend la couleur de la page de destination, très diluée : assez
   pour qu'on distingue les métiers d'un coup d'œil, assez peu pour que le
   texte garde son contraste. Au survol, la teinte se renforce légèrement.
   --------------------------------------------------------------------------- */
.ps-cartes-colorees .ps-carte {
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--accent, #3E7CB1) 14%, transparent) 0%,
      color-mix(in srgb, var(--accent, #3E7CB1) 5%, transparent) 55%,
      transparent 100%),
    var(--card);
  border-color: color-mix(in srgb, var(--accent, #3E7CB1) 26%, var(--line));
  transition: background 0.28s ease, border-color 0.28s ease, transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ps-cartes-colorees .ps-carte:hover,
.ps-cartes-colorees .ps-carte:focus-within {
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--accent, #3E7CB1) 24%, transparent) 0%,
      color-mix(in srgb, var(--accent, #3E7CB1) 9%, transparent) 55%,
      transparent 100%),
    var(--card);
  border-color: color-mix(in srgb, var(--accent, #3E7CB1) 55%, var(--line));
}
/* Le titre prend la teinte de sa prestation : le lien devient identifiable
   avant même d'être lu. */
.ps-cartes-colorees .ps-carte h3 a { color: var(--accent, var(--ink)); }
.ps-cartes-colorees .ps-carte h3 a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .ps-cartes-colorees .ps-carte { transition: none; }
}

/* Carte entièrement cliquable : le lien occupe tout le cadre, le texte garde
   sa couleur de lecture — un paragraphe entier en couleur de lien serait
   illisible et laisserait croire que chaque mot mène ailleurs. */
.ps-carte-lien { padding: 0; }
.ps-carte-lien > a {
  display: block;
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.ps-carte-lien > a:focus-visible { outline: 2px solid var(--accent, var(--ocre)); outline-offset: 3px; border-radius: 10px; }
.ps-carte-lien h3 { color: var(--accent, var(--ink)); }
.ps-carte-lien p { color: var(--ink-soft); }

.ps-carte-fleche {
  display: block;
  margin-top: 0.9rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent, var(--ocre));
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.ps-carte-lien:hover .ps-carte-fleche,
.ps-carte-lien:focus-within .ps-carte-fleche { opacity: 1; transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .ps-carte-fleche { transition: none; opacity: 1; transform: none; }
}

/* ===========================================================================
   4. Rythme vertical des pages héritées de la version 9
   ===========================================================================
   Le point 2 plus haut avait resserré les pages CRÉÉES en version 10. Les
   pages reprises de la version 9 — accueil, prestations, galerie, devis,
   mentions légales, marques — gardaient leur rythme d'origine, et il est
   nettement plus large.

   CE QU'ON VOYAIT, CONCRÈTEMENT
   Entre la dernière ligne d'une section et le titre de la suivante, l'accueil
   comptait 96 px de fond vide, puis un séparateur de 90 à 110 px, puis encore
   96 px de fond vide : près de 300 px, soit un tiers d'écran, sans rien à
   lire. Répété neuf fois sur la page, cela fait plus de deux écrans entiers
   passés à faire défiler du vide, et cela donne l'impression que le contenu
   est maigre alors qu'il ne l'est pas.

   CE QU'ON CHANGE
   Les paddings verticaux passent de 6 rem à 4 rem, et les séparateurs de
   90-110 px à 56 px. Le total d'une jonction tombe de ~300 px à ~184 px : les
   sections restent nettement distinctes — c'est le rôle du séparateur et du
   changement de fond, pas celui du vide — mais on ne défile plus pour rien.

   CE QU'ON NE TOUCHE PAS
   - Le bandeau d'accueil (.hero) : sa hauteur EST le décor.
   - La pile de cartes de « Comment ça se passe » (.process) : sa hauteur est
     lue par le script pour faire avancer les cartes au défilement.
   - Le mobile : en dessous de 700 px, les blocs se touchent déjà presque, et
     l'espace y est le seul séparateur qui reste lisible.
   =========================================================================== */

.figures,
.prestations,
.simulator,
.reviews,
.gallery,
.zone,
.devis,
.faq,
.engagements,
.artisan,
.p26-service { padding-block: 4rem; }

/* Les bandeaux de tête gardent plus d'air que les sections courantes — c'est
   la première chose qu'on voit — mais 8 et 9 rem venaient s'ajouter à la
   hauteur de la barre de navigation, déjà réservée par .nav-spacer. */
.p26-hero { padding-block: 6rem 3.5rem; }
.legal-masthead { padding-block: 6rem 3rem; }
.legal-body { padding-block: 3rem 4rem; }
.final-cta { padding-block: 6rem 4.5rem; }

/* Nos marques : même rythme que les autres pages, il était réglé à part.
   Son propre point de rupture est à 900 px, pas à 700 : on le reprend tel
   quel, sinon la règle ci-dessous l'emporterait entre les deux et la page
   serait plus aérée sur tablette que sur ordinateur. */
.mq-hero { padding-block: 6rem 3.5rem; }
.mq-liste { padding-block: 3.5rem 2.5rem; }
.mq-mot { padding-block: 2.8rem 3.2rem; }

@media (max-width: 900px) {
  .mq-hero { padding-block: 4rem 2.8rem; }
  .mq-liste { padding-block: 2.8rem 1.8rem; }
}

/* Séparateurs organiques. Leur SVG est en preserveAspectRatio="none" : réduire
   la hauteur les aplatit, ce qui adoucit la vague au lieu de la déformer. */
.divider svg { height: 56px; }
.divider-brush,
.divider-brush svg { height: 56px; }

/* Le bandeau défilant est une respiration, pas une section : il n'a pas besoin
   d'autant de marge que les blocs qu'il sépare. */
.marquee { padding-block: 0.55rem; }

/* « Comment ça se passe » : la pile de cartes avance au défilement, et sa
   course EST la hauteur de la section. 360 svh demandaient 2,6 écrans de
   défilement pour quatre cartes — près de 0,7 écran par carte, pendant lequel
   rien d'autre n'arrive. 300 svh en demandent 2, ce qui reste largement assez
   lent pour lire chaque étape.

   Le script (assets/script.js, « PROCESS ») lit cette hauteur au lieu de la
   supposer : « course = section.offsetHeight - vh ». La changer ici suffit,
   il n'y a rien à ajuster de l'autre côté.

   La condition « prefers-reduced-motion: no-preference » n'est pas décorative :
   quand le visiteur demande moins d'animation, style.css remet la section en
   « height:auto » et les cartes s'empilent normalement. Sans cette condition,
   la règle ci-dessous, chargée après, lui réimposerait 300 svh — une section
   de trois écrans avec le contenu tassé en haut et deux écrans de vide. */
@media (min-width: 701px) and (prefers-reduced-motion: no-preference) {
  .process { height: 300vh; height: 300svh; }
}
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .process { height: 290vh; height: 290svh; }
}

@media (max-width: 700px) {
  /* Sur mobile, les sections s'empilent en pleine largeur : c'est le blanc
     vertical, et lui seul, qui dit où l'une finit et où l'autre commence.
     Le resserrement y est donc plus mesuré, et les séparateurs gardent assez
     de hauteur pour rester lisibles à 375 px de large. */
  .figures,
  .prestations,
  .simulator,
  .reviews,
  .gallery,
  .zone,
  .devis,
  .faq,
  .engagements,
  .artisan,
  .p26-service { padding-block: 3.2rem; }

  .p26-hero { padding-block: 5rem 3rem; }
  .legal-masthead { padding-block: 4.5rem 2.5rem; }
  .final-cta { padding-block: 4.5rem 3.5rem; }

  .divider svg { height: 44px; }
  .divider-brush,
  .divider-brush svg { height: 44px; }
}

/* ===========================================================================
   5. Cibles tactiles des pages v10
   ===========================================================================
   Les commandes communes à tout le site — bouton du menu, points du carrousel,
   liens du pied de page — sont traitées dans style.css : c'est la seule
   feuille que TOUTES les pages chargent, pages d'erreur comprises, qui elles
   ne passent pas par l'en-tête partagé. Ne restent ici que les appels à
   l'action propres aux pages ajoutées en version 10.

   Même principe qu'ailleurs : la zone touchable grandit, le dessin ne bouge
   pas, et rien ne change à la souris.
   =========================================================================== */

@media (max-width: 800px) {
  /* Tous des appels à l'action seuls sur leur ligne — pas des liens au fil du
     texte, qui eux doivent garder le rythme du paragraphe. Ils mesuraient de
     15 à 22 px de haut. */
  .p26-more,
  .cs-carte-lien,
  .cs-lien-plus,
  .ins-lien-fiche { display: inline-block; padding-block: 0.55rem; }

  /* Listes de navigation : le sommaire d'un article de conseil, les ambiances
     voisines d'une fiche d'inspiration. Chaque entrée occupe sa ligne, et n'en
     remplissait que 12 à 20 px. Ce ne sont pas des liens au fil du texte : ils
     se traitent comme des entrées de menu.

     Les liens réellement INSÉRÉS DANS UN PARAGRAPHE — numéro de téléphone des
     mentions légales, adresse de la CNIL, lien vers l'hébergeur — ne sont
     volontairement pas touchés : les épaissir décalerait les interlignes du
     texte courant, et la norme WCAG 2.5.8 les exempte pour cette raison.

     La page de connexion ne charge pas cette feuille : son lien de retour est
     traité dans espace-client.css. */
  .cs-sommaire a,
  .ins-autres a { display: inline-block; padding-block: 0.5rem; }

  /* Le nom de catégorie au-dessus du titre d'un article est un lien vers la
     liste filtrée — 12 px de haut, en petites capitales. */
  .cs-eyebrow a { display: inline-block; padding-block: 0.45rem; }
}

/* ===========================================================================
   Fiche d'une réalisation : occuper la largeur plutôt que la longueur
   ===========================================================================
   Les blocs étaient dans une colonne de 1000 px et les textes limités à 74
   caractères. Sur une fiche de chantier, ce réglage — juste pour un article
   qu'on lit d'un trait — produisait une page très haute où l'on défilait
   beaucoup pour peu de contenu.

   Les blocs passent donc en pleine largeur utile, et ceux qui s'y prêtent
   s'organisent en colonnes. Le corps de texte, lui, garde une mesure lisible :
   c'est la LARGEUR DU BLOC qui augmente, pas la longueur des lignes.
   =========================================================================== */

.fr-tete,
.fr-bloc { max-width: 1300px; }

/* « Le chantier » : centré, sur la plus grande largeur possible. C'est le
   texte que le visiteur lit en premier après les photos. */
.fr-bloc.fr-texte { max-width: 1100px; }
.fr-bloc.fr-texte h2 { text-align: center; }
.fr-bloc.fr-texte p { max-width: 90ch; margin-inline: auto; text-align: center; }
.fr-bloc.fr-texte .fr-chapo { font-size: 1.14rem !important; max-width: 80ch; }

/* Les listes de constats et de travaux s'étalent en colonnes au lieu de
   s'empiler : six lignes côte à côte tiennent dans la hauteur de deux. */
.fr-constats { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.fr-puces { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.fr-couleurs { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.fr-produits { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* Les chiffres techniques s'alignent sur une seule ligne tant que la place le
   permet, au lieu de descendre les uns sous les autres. */
.fr-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.4rem 2rem; }

/* L'avis client reste centré et lisible : un témoignage étalé sur 1300 px se
   lit mal, et il gagne à se détacher du reste. */
.fr-avis figure { max-width: 80ch; margin-inline: auto; }
.fr-avis figcaption { text-align: center; }

@media (max-width: 700px) {
  .fr-bloc.fr-texte p { text-align: left; }
  .fr-bloc.fr-texte h2 { text-align: left; }
}

/* ===========================================================================
   Galerie et fiche : un seul fond, teinté par la prestation
   ===========================================================================
   Sur la fiche d'un chantier, la zone des photos portait « bg-warm » et le
   reste de la page le fond sombre du site : la coupure se voyait en plein
   milieu, comme si deux pages avaient été collées.

   Les deux pages partagent désormais un fond unique, très légèrement teinté
   par la couleur de la prestation dont relève le chantier — celle-là même
   qu'emploie sa page prestation. Parcourir « façade » et parcourir
   « revêtements de sol » ne donnent donc pas la même page, et la fiche
   prolonge visuellement la prestation d'où le visiteur arrive le plus souvent.

   La teinte est posée en variable --fond-accent sur <body> par chaque page.
   =========================================================================== */

.fiche-teintee {
  background:
    radial-gradient(120% 70% at 50% 0%,
      color-mix(in srgb, var(--fond-accent, #E8A23D) 11%, transparent) 0%,
      transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* Meme precaution que .p26-bg dans prestations.css : le fixed-attachment est
   capricieux sur mobile, iOS notamment. En dessous de 900px on repasse en
   defilement normal — la teinte reste, elle suit simplement la page. */
@media (max-width: 900px) {
  .fiche-teintee { background-attachment: scroll; }
}

/* La zone des photos n'a plus son fond propre : elle laisse voir celui de la
   page. C'est tout l'objet de la correction. */
.fiche-teintee .detail-galerie,
.fiche-teintee .gallery { background: transparent; }

/* Le liseré de la galerie reprend la teinte, très discrètement : il marque la
   limite du bloc sans réintroduire la coupure qu'on vient de retirer. */
.fiche-teintee .detail-galerie {
  border-block: 1px solid color-mix(in srgb, var(--fond-accent, #E8A23D) 18%, transparent);
}

/* Les cartes et blocs posés sur ce fond prennent un soupçon de la même teinte,
   sinon ils flottent en gris au milieu d'une page colorée. */
.fiche-teintee .fr-produits li,
.fiche-teintee .fr-avis blockquote {
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--fond-accent, #E8A23D) 7%, transparent),
      transparent 60%),
    var(--card);
}

/* L'étiquette de catégorie et le liseré de l'avis suivent aussi la teinte :
   ce sont les deux endroits où la couleur dit quelque chose. */
.fiche-teintee .fr-etiquette-forte {
  background: var(--fond-accent, var(--ocre));
  border-color: var(--fond-accent, var(--ocre));
}
.fiche-teintee .fr-avis blockquote { border-left-color: var(--fond-accent, var(--ocre)); }