/* ==========================================================================
   LA VITRINE xtracopy.com DANS LE STYLE DE xtra-easy.com (08/10/2026).

   Benoît : « refais la page d'accueil de xtracopy [...] tu fais un style le
   même que sur xtra-easy ». Le langage est celui de l'accueil et des pages
   produit de xtra-easy (accueil.css, vitrine.css, tarifs.css) : le crème de
   la page, des cartes blanches au bord kraft et à l'ombre douce, les titres
   de section en vert et de taille raisonnable, l'orange qui ne fait que
   marquer, les illustrations en carton découpé posées sur un disque kraft,
   les pointillés de découpe, les montants en JetBrains Mono.

   UN SEUL FICHIER POUR LES TROIS GABARITS (index, index_nl, index_en), qui
   ont la même structure et ne diffèrent que par leurs textes. Il remplace le
   gros <style> en ligne de <helmet> et la plupart des styles en ligne.

   LES SCRIPTS GARDENT LEURS STYLES EN LIGNE. prices.js (lignes de prix,
   accordéons, livraisons) et hours.js (jours du calendrier) écrivent leur
   HTML avec des style="..." pensés pour l'ancien habit sombre : un style en
   ligne ne cède qu'à !important. Chaque !important de ce fichier écrase donc
   un style en ligne d'un de ces scripts, et seulement celui-là.

   Polices : la Work Sans de xtra-easy, titres et texte (fichiers repris de
   xtra-easy dans police/, déclarés dans police/polices.css), et la
   JetBrains Mono des montants. La Bricolage Grotesque et la Geist restent
   déclarées mais ne sont plus demandées par la page.
   ========================================================================== */

:root {
  --xc-vert: #1e6243;
  --xc-vert-fonce: #174f35;
  --xc-vert-voile: #e8f1ec;
  --xc-orange: #e8720a;
  --xc-orange-texte: #b0530a;
  --xc-encre: #1b1a17;
  --xc-texte: #3b4540;
  --xc-doux: #59645e;
  --xc-creme: #faf7f2;
  --xc-blanc: #ffffff;
  --xc-kraft: #e7d9c4;
  --xc-kraft-fonce: #c8ab82;
  --xc-kraft-fond: #f3e6d3;
  --xc-kraft-texte: #8a6a3f;
  --xc-bandeau: #faf3e8;
  --xc-trait: #ecdfcb;
  --xc-pied: #23272b;
  --xc-ombre: 0 1px 2px rgba(92, 64, 28, .05), 0 10px 24px -18px rgba(92, 64, 28, .35);
  --xc-ombre-haute: 0 1px 2px rgba(92, 64, 28, .06), 0 18px 32px -18px rgba(92, 64, 28, .45);
  --xc-sortie: cubic-bezier(.22, 1, .36, 1);
  --xc-police: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --xc-police-titre: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --xc-mono: 'JetBrains Mono', ui-monospace, monospace;
  --xc-barre-h: 64px;
}

html {
  scroll-behavior: smooth;
  background: var(--xc-creme);
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--xc-creme);
  color: var(--xc-texte);
  font-family: var(--xc-police);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* La page, sa colonne, et l'air entre deux blocs : assez pour changer de
   sujet, pas plus (Benoît : « il y a trop de blanc, toujours »). */
.xc {
  width: 100%;
  background: var(--xc-creme);
  color: var(--xc-texte);
  font-family: var(--xc-police);
  font-size: 1rem;
  line-height: 1.5;
  overflow-x: clip;
}

.xc__in {
  max-width: 1210px;
  margin: 0 auto;
  padding: 0 20px;
}

.xc-section {
  padding-bottom: clamp(48px, 5.5vw, 72px);
}

/* Les ancres du menu s'arrêtent sous la barre collante. */
.xc section[id] { scroll-margin-top: calc(var(--xc-barre-h) + 16px); }

/* --------------------------------------------------------------------------
   TITRES, CHAPEAUX, BOUTONS, PASTILLES : les briques de xtra-easy.
   -------------------------------------------------------------------------- */
/* La taille des titres de section de xtra-easy : 25,6 px au grand écran. */
.xc-titre {
  margin: 0;
  font-family: var(--xc-police-titre);
  font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.15;
  color: var(--xc-vert);
  text-wrap: balance;
}

/* Un titre et sa phrase, posés au-dessus d'un bloc. */
.xc-tete {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.xc-chapo {
  margin: 0;
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--xc-doux);
  text-wrap: pretty;
}

/* .xc-tete--duo posait le titre à gauche et sa phrase à droite : la phrase
   partait plus haut que le titre et se lisait en escalier. Comme sur
   xtra-easy, le titre puis la phrase dessous, partout. */

.xc-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 11px 22px;
  border: 1.5px solid var(--xc-vert);
  border-radius: 12px;
  background: var(--xc-vert);
  color: #fff;
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms var(--xc-sortie), border-color 160ms var(--xc-sortie), color 160ms var(--xc-sortie);
}

.xc-bouton:hover,
.xc-bouton:focus-visible {
  background: var(--xc-vert-fonce);
  border-color: var(--xc-vert-fonce);
  color: #fff;
}

.xc-bouton:focus-visible,
.xc a:focus-visible,
.xc button:focus-visible,
.xc summary:focus-visible {
  outline: 2px solid var(--xc-vert);
  outline-offset: 3px;
}

/* Le second bouton : le contour vert, sur blanc. */
.xc-bouton--contour {
  background: var(--xc-blanc);
  color: var(--xc-vert);
  border-color: var(--xc-kraft-fonce);
}

.xc-bouton--contour:hover,
.xc-bouton--contour:focus-visible {
  background: var(--xc-vert-voile);
  border-color: var(--xc-vert);
  color: var(--xc-vert);
}

.xc-fleche { transition: transform 220ms var(--xc-sortie); }
.xc-bouton:hover .xc-fleche,
.xc-lien:hover .xc-fleche { transform: translateX(3px); }

/* Un lien d'action en vert, « Commander en ligne → ». */
.xc-lien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--xc-vert);
  font-size: .93rem;
  font-weight: 700;
  text-decoration: none;
}

.xc-lien:hover,
.xc-lien:focus-visible {
  color: var(--xc-vert-fonce);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Une étiquette arrondie vert pâle : « Sur demande », « Gratuit ». */
.xc-pastille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--xc-vert-voile);
  color: var(--xc-vert);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.2;
  white-space: nowrap;
}

/* La carte de base : blanche, bord kraft, ombre douce. */
.xc-carte {
  min-width: 0;
  background: var(--xc-blanc);
  border: 1px solid var(--xc-kraft);
  border-radius: 18px;
  box-shadow: var(--xc-ombre);
}

/* L'ILLUSTRATION EN CARTON SUR SON DISQUE KRAFT, comme les cartes de
   xtra-easy (.xa-carte__visuel). Le disque est un pseudo-élément : l'image
   seule porte le sens, et rien n'est chargé de plus. */
.xc-visuel {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--xc-visuel, 88px);
  aspect-ratio: 1;
}

.xc-visuel::before {
  content: '';
  position: absolute;
  inset: 9% 9% 5%;
  border-radius: 50%;
  background: var(--xc-kraft-fond);
  box-shadow: inset 0 0 0 1px rgba(200, 171, 130, .35);
}

.xc-visuel img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 320ms var(--xc-sortie);
}

/* Une illustration qui remplit tout son carré (l'ordinateur) : réduite,
   elle laisse voir son disque comme les autres. */
.xc-visuel--petit img { width: 80%; height: 80%; }

/* Les icônes au trait (coordonnées, présentation) : un masque SVG peint de
   la couleur du texte, posé sur un rond kraft. */
.xc-ico {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--xc-kraft-fond);
  color: var(--xc-orange-texte);
}

.xc-ico::before {
  content: '';
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--xc-ico) center / contain no-repeat;
  mask: var(--xc-ico) center / contain no-repeat;
}

.xc-ico--lieu { --xc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
.xc-ico--tel { --xc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.96.4 1.9.7 2.8a2 2 0 0 1-.45 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.45c.9.3 1.84.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
.xc-ico--mail { --xc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.xc-ico--facebook { --xc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E"); }
.xc-ico--instagram { --xc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='.6'/%3E%3C/svg%3E"); }
.xc-ico--horloge { --xc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.xc-ico--imprimante { --xc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6'/%3E%3Crect x='3' y='9' width='18' height='8' rx='2'/%3E%3Cpath d='M6 14h12v7H6z'/%3E%3C/svg%3E"); }
.xc-ico--colis { --xc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='m3 8 9 5 9-5M12 13v8'/%3E%3C/svg%3E"); }
.xc-ico--etoile { --xc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.6 5.6 6.1.7-4.5 4.2 1.2 6L12 16.6l-5.4 2.9 1.2-6-4.5-4.2 6.1-.7z'/%3E%3C/svg%3E"); }

/* La coche verte des atouts et des listes. */
.xc-coches {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.xc-coches li {
  position: relative;
  padding-left: 30px;
  line-height: 1.4;
}

.xc-coches li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .02em;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--xc-vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.4 2.7 2.7L12 5.6'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* La version discrète, dans les cartes : la coche seule, plus petite. */
.xc-coches--fines { gap: 5px; }

.xc-coches--fines li {
  padding-left: 24px;
  font-size: .88rem;
  color: var(--xc-encre);
}

.xc-coches--fines li::before {
  top: .15em;
  width: 16px;
  height: 16px;
  background-color: var(--xc-vert-voile);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231e6243' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.4 2.7 2.7L12 5.6'/%3E%3C/svg%3E");
  background-size: 12px;
}

/* --------------------------------------------------------------------------
   LA BARRE DU HAUT : blanche, filet kraft, collante.
   -------------------------------------------------------------------------- */
.xc-barre {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--xc-kraft);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
}

.xc-barre__in {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--xc-barre-h);
}

.xc-marque {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--xc-encre);
  text-decoration: none;
}

.xc-marque img {
  display: block;
  width: 42px;
  height: 42px;
}

/* La signature de xtra-easy : « Xtra » en vert, « Copy » en orange (1,2 rem
   en gras, assez gros pour que l'orange se lise sur le blanc), puis la
   ville en gris. */
.xc-marque__nom {
  font-family: var(--xc-police-titre);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1;
  color: var(--xc-vert);
  white-space: nowrap;
}

.xc-marque__copy { color: var(--xc-orange); }
.xc-marque__ville { color: var(--xc-doux); font-size: .95rem; font-weight: 500; }

#nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: .93rem;
  font-weight: 600;
  color: var(--xc-encre);
}

#nav-links > a {
  text-decoration: none;
  transition: color 160ms var(--xc-sortie);
}

#nav-links > a:hover { color: var(--xc-vert); }

#nav-links > a.active {
  color: var(--xc-vert);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--xc-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* LE CHOIX DE LA LANGUE : trois cases, comme sur xtra-easy. La langue de la
   page porte aria-pressed="true". lang.js pose en ligne une opacité et un
   soulignement sur chaque bouton : on les neutralise. */
.xc-langues {
  display: inline-flex;
  border: 1px solid var(--xc-kraft-fonce);
  border-radius: 8px;
  overflow: hidden;
}

.xc-langues .lang-btn {
  min-width: 36px;
  padding: 5px 9px;
  border: 0;
  border-left: 1px solid var(--xc-kraft);
  background: var(--xc-blanc);
  color: var(--xc-texte);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600 !important;
  letter-spacing: .02em;
  opacity: 1 !important;
  text-decoration: none !important;
  cursor: pointer;
}

.xc-langues .lang-btn:first-child { border-left: 0; }
.xc-langues .lang-btn:hover { background: var(--xc-vert-voile); color: var(--xc-vert); }

.xc-langues .lang-btn[aria-pressed='true'] {
  background: var(--xc-vert);
  color: #fff;
}

.xc-barre__droite {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* La pastille « Ouvert · ferme à 18h00 » (hours.js écrit le texte et la
   couleur du point). */
#nav-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--xc-kraft);
  border-radius: 999px;
  background: var(--xc-blanc);
  color: var(--xc-encre);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 160ms var(--xc-sortie);
}

#nav-status-btn:hover { border-color: var(--xc-kraft-fonce); }

#status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #79c26a;
}

#nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px 8px;
  border: 0;
  background: none;
  cursor: pointer;
}

#nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--xc-encre);
  transition: transform .25s, opacity .25s;
}

#nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#nav-toggle.open span:nth-child(2) { opacity: 0; }
#nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Sous 1200 px, la pastille d'horaires et la ville quittent la barre (en
   néerlandais, « Gesloten · opent morgen om 8h00 » faisait passer un lien
   sur deux lignes à 1160 px) ; les cinq entrées et la langue y tiennent
   encore jusqu'à 992 px (un portable, une tablette à l'horizontale). En
   dessous, le menu passe en bouton. */
@media (max-width: 1199.98px) {
  #nav-status-btn { display: none !important; }
  .xc-marque__ville { display: none; }
  #nav-links { gap: 18px; }
}

@media (max-width: 991.98px) {
  .xc-marque__ville { display: inline; }
  #nav-toggle { display: flex; }

  #nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 0 14px;
    background: var(--xc-blanc);
    border-bottom: 1px solid var(--xc-kraft);
    box-shadow: 0 14px 24px -16px rgba(92, 64, 28, .45);
  }

  #nav-links.open { display: flex; }

  #nav-links > a {
    padding: 13px 20px;
    border-bottom: 1px dashed var(--xc-trait);
    font-size: 1rem;
  }

  #nav-links > a.active { text-decoration: none; }

  .xc-langues { align-self: flex-start; margin: 14px 20px 0; }
}

@media (max-width: 359.98px) {
  .xc-marque__ville { display: none; }
}

/* --------------------------------------------------------------------------
   1. LE HAUT : le titre, une phrase, les quatre atouts en coches, deux
   boutons ; le comptoir en carton découpé sur son disque kraft.
   -------------------------------------------------------------------------- */
.xc-haut { padding: 28px 0 44px; }

.xc-haut__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  isolation: isolate;
}

.xc-haut__texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* La taille du titre de xtra-easy : 38 px au grand écran, 26 au téléphone. */
.xc-haut__titre {
  margin: 0;
  font-family: var(--xc-police-titre);
  font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--xc-encre);
  text-wrap: balance;
}

.xc-haut__ville {
  position: relative;
  display: inline-block;
  color: var(--xc-vert);
}

/* Le trait orange sous « Tournai », repris de l'ancien haut de page. */
.xc-haut__trait {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  width: 100%;
  height: 12px;
}

.xc-haut__sous {
  margin: 0;
  max-width: 54ch;
  font-size: clamp(1.02rem, .97rem + .25vw, 1.14rem);
  line-height: 1.55;
  color: var(--xc-texte);
  text-wrap: pretty;
}

.xc-haut__sous span:first-child {
  color: var(--xc-encre);
  font-weight: 600;
}

.xc-haut__atouts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px 22px;
  margin: 2px 0 0;
}

.xc-haut__atouts li {
  font-size: .97rem;
  font-weight: 600;
  color: var(--xc-encre);
}

@media (min-width: 360px) {
  .xc-haut__atouts { grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 14px; }
  .xc-haut__atouts li { font-size: .93rem; }
}

@media (min-width: 600px) {
  .xc-haut__atouts { column-gap: 22px; }
  .xc-haut__atouts li { font-size: .97rem; }
}

.xc-haut__boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

@media (max-width: 479.98px) {
  .xc-haut__boutons { align-self: stretch; flex-direction: column; }
}

/* Le comptoir : centré et réduit au téléphone, à droite dès 700 px. Le
   disque kraft se glisse derrière, comme la photo du magasin sur
   xtra-easy : un vrai cercle, centré sur la boutique (elle occupe la
   droite de l'image, son milieu est vers 58 %), un peu plus large qu'elle
   pour en faire le tour. */
.xc-haut__visuel {
  position: relative;
  justify-self: center;
  width: min(100%, 290px);
  margin: 0;
}

.xc-haut__visuel::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 13%;
  top: -5%;
  width: 90%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--xc-kraft-fond);
  box-shadow: inset 0 0 0 1px rgba(200, 171, 130, .3);
}

.xc-haut__visuel img {
  display: block;
  width: 100%;
  height: auto;
  animation: xc-pose 900ms var(--xc-sortie) both;
}

@keyframes xc-pose {
  from { opacity: .001; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: none; }
}

/* Dès la tablette verticale, deux colonnes : le texte et le comptoir côte
   à côte au lieu d'un comptoir isolé sous les boutons. */
@media (min-width: 700px) {
  .xc-haut__grille {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 28px;
  }
  .xc-haut__visuel { width: 100%; max-width: 340px; justify-self: end; }
}

@media (min-width: 992px) {
  .xc-haut { padding: 44px 0 64px; }
  .xc-haut__grille {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 4vw, 64px);
  }
  .xc-haut__visuel { width: 100%; max-width: 500px; justify-self: end; }
}

/* --------------------------------------------------------------------------
   2. LE COMPTOIR : le texte à gauche, les quatre repères dans une carte.
   -------------------------------------------------------------------------- */
.xc-centre {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.xc-centre__texte {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.xc-centre__texte p {
  margin: 0;
  max-width: 62ch;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--xc-texte);
  text-wrap: pretty;
}

.xc-centre__texte p + p { color: var(--xc-doux); }
.xc-centre__texte strong { color: var(--xc-encre) !important; font-weight: 600; }

/* Le second morceau du titre, « qui rend service. », en orange. Il était
   souligné et se lisait comme un lien : la couleur suffit. */
.xc-centre .xc-titre span + span { color: var(--xc-orange-texte); }

.xc-reperes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 6px 18px;
  list-style: none;
}

.xc-reperes li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--xc-kraft);
}

.xc-reperes li:last-child { border-bottom: 0; }

.xc-reperes h3 {
  margin: 0 0 3px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--xc-encre);
}

.xc-reperes p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--xc-doux);
  text-wrap: pretty;
}

@media (min-width: 700px) {
  .xc-reperes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    padding: 6px 22px;
  }
  .xc-reperes li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

@media (min-width: 992px) {
  .xc-centre {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 4vw, 56px);
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   3. LES SERVICES : des cartes blanches, chacune son illustration. La
   première, l'impression, prend deux colonnes.
   -------------------------------------------------------------------------- */
.xc-services {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .xc-services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .xc-service--une { grid-column: 1 / -1; }
}

@media (min-width: 1100px) {
  .xc-services { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .xc-service--une { grid-column: span 2; }
}

.xc-service {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 20px 20px;
  transition: transform 220ms var(--xc-sortie), box-shadow 220ms var(--xc-sortie), border-color 160ms var(--xc-sortie);
}

.xc-service:hover {
  border-color: var(--xc-kraft-fonce);
  box-shadow: var(--xc-ombre-haute);
  transform: translateY(-2px);
}

.xc-service:hover .xc-visuel img { transform: scale(1.05) rotate(-1.5deg); }

.xc-service__tete {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: -6px;
  --xc-visuel: 92px;
}

.xc-service__tete > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.xc-service__titre {
  margin: 0;
  font-family: var(--xc-police-titre);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--xc-encre);
  text-wrap: balance;
}

/* Un titre sans pastille (la Loterie) descend de la hauteur d'une pastille
   et de son écart : il s'aligne sur les titres de ses voisines. */
.xc-service__tete > div > .xc-service__titre:first-child { padding-top: var(--xc-pastille-h, 28px); }

.xc-service__texte {
  margin: 0;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--xc-doux);
  text-wrap: pretty;
}

/* Le pied d'une carte : la phrase en vert, l'avertissement, la citation. */
.xc-service__pied {
  margin-top: auto;
  padding-top: 4px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--xc-vert);
}

.xc-service__avert {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--xc-doux);
  font-weight: 500;
}

.xc-service__avert::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--xc-orange);
}

.xc-service__citation {
  font-family: var(--xc-police-titre);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--xc-encre);
}

/* Les formats de l'impression, en petites étiquettes kraft. */
.xc-etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}

.xc-etiquettes > span {
  padding: 4px 11px;
  border: 1px solid var(--xc-kraft);
  border-radius: 999px;
  background: var(--xc-bandeau);
  color: var(--xc-encre);
  font-size: .8rem;
  font-weight: 500;
  white-space: nowrap;
}

/* L'IMPRESSION, LA CARTE LARGE : l'illustration en grand à gauche, le
   titre, la phrase et les formats à droite. L'en-tête s'efface
   (display: contents) pour que ses deux enfants entrent dans la grille. */
@media (min-width: 700px) {
  .xc-service--une {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-content: center;
    column-gap: 26px;
    row-gap: 10px;
    align-items: start;
    padding: 20px 28px 22px 18px;
  }
  .xc-service--une .xc-service__tete { display: contents; }
  .xc-service--une .xc-visuel { grid-column: 1; grid-row: 1 / span 3; align-self: center; width: 150px; }
  .xc-service--une .xc-service__tete > div { grid-column: 2; grid-row: 1; padding-top: 6px; }
  .xc-service--une .xc-service__texte { grid-column: 2; grid-row: 2; max-width: 66ch; font-size: .98rem; }
  .xc-service--une .xc-etiquettes { grid-column: 2; grid-row: 3; padding-top: 6px; }
  .xc-service--une .xc-service__titre { font-size: 1.4rem; }
}

/* Au grand écran, la carte large est calée sur la hauteur de sa voisine :
   l'illustration grandit pour la remplir au lieu de flotter dans le vide. */
@media (min-width: 1100px) {
  .xc-service--une { grid-template-columns: 200px minmax(0, 1fr); column-gap: 30px; }
  .xc-service--une .xc-visuel { width: 200px; }
}

/* --------------------------------------------------------------------------
   4. LES TARIFS : la grille des pages produit de xtra-easy (tarifs.css).
   -------------------------------------------------------------------------- */
.xc-tarifs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

@media (min-width: 700px) {
  .xc-tarifs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .xc-prix--reliures,
  .xc-prix--abonnements { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .xc-tarifs { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
  .xc-prix--nb,
  .xc-prix--couleur { grid-column: span 3; }
  .xc-prix--plans,
  .xc-prix--options,
  .xc-prix--reliures { grid-column: span 2; }
  .xc-prix--abonnements { grid-column: 1 / -1; }
}

.xc-prix {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* L'en-tête : un bandeau kraft clair, le titre en vert. */
.xc-prix__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 66px;
  padding: 14px 22px;
  background: var(--xc-bandeau);
  border-bottom: 1px dashed var(--xc-kraft);
}

.xc-prix__titre {
  margin: 0;
  font-family: var(--xc-police-titre);
  font-size: clamp(1.08rem, 1rem + .3vw, 1.22rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--xc-vert);
}

.xc-prix__pastille {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--xc-encre);
  color: #fff;
  font-family: var(--xc-police-titre);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* La pastille couleur aux teintes de la maison, comme sur xtra-easy. */
.xc-prix__pastille--couleur {
  background: linear-gradient(135deg, #e8720a 0%, #f6cf6a 52%, #4f9a76 100%);
  color: var(--xc-encre);
  font-size: 18px;
}

.xc-prix__corps { padding: 6px 22px 8px; }

.xc-prix__pied {
  margin-top: auto;
  padding: 10px 22px 18px;
}

/* LES LIGNES DE PRIX : celles du gabarit (sans style) et celles de
   prices.js (en ligne), habillées pareil. */
.xc-prix__grille > div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 4px 16px !important;
  align-items: center !important;
  padding: 11px 0 !important;
  border-bottom: 1px dashed var(--xc-trait) !important;
}

.xc-prix__grille > div > div:first-child {
  font-size: .93rem !important;
  color: var(--xc-texte);
}

.xc-prix__grille > div > div:last-child {
  font-family: var(--xc-mono);
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--xc-encre) !important;
  white-space: nowrap;
  word-spacing: -.3em;
}

/* LE PALIER LE PLUS BAS, sur un voile vert, le montant en vert gras. Il
   était en rouge, la couleur d'une erreur. */
.xc-prix__grille > div:last-child {
  margin: 6px -12px 0;
  padding: 11px 12px !important;
  border-bottom: 0 !important;
  border-radius: 12px;
  background: var(--xc-vert-voile);
}

.xc-prix__grille > div:last-child > div:first-child {
  color: var(--xc-vert);
  font-weight: 600;
}

.xc-prix__grille > div:last-child > div:last-child {
  color: var(--xc-vert) !important;
  font-weight: 700 !important;
}

/* LES ACCORDÉONS (formats de plans, papiers, autres services, reliures) :
   ceux du gabarit et ceux de prices.js. Le comportement reste celui de
   <details>, seul l'habit change. */
.xc details.gf-format { border-bottom: 1px dashed var(--xc-trait); }
.xc details.gf-format:last-child { border-bottom: 0; }

.xc details.gf-format > summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 2px;
  padding: 13px 0;
  color: var(--xc-encre) !important;
  font-size: .95rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: color 160ms ease;
}

.xc details.gf-format > summary::-webkit-details-marker { display: none; }

.xc details.gf-format > summary:hover,
.xc details.gf-format[open] > summary { color: var(--xc-vert) !important; }

/* Le « + » devient une pastille ronde, verte. */
.xc details.gf-format > summary::after {
  content: '+';
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-left: auto;
  align-self: center;
  border-radius: 50%;
  background: var(--xc-vert-voile);
  color: var(--xc-vert);
  font-family: var(--xc-mono);
  font-size: 16px;
  line-height: 1;
}

.xc details.gf-format[open] > summary::after {
  content: '\2212';
  background: var(--xc-vert);
  color: #fff;
}

/* Les précisions dans les intitulés (« par feuille A4 », « N&B & Couleur ») :
   le second span du gabarit, le span en ligne de prices.js. */
.xc details.gf-format > summary > span + span,
.xc details.gf-format > summary > span[style] {
  color: var(--xc-doux) !important;
  font-size: .76rem !important;
  font-weight: 400 !important;
}

/* Les lignes dans les accordéons. */
.xc details.gf-format .gf-rows { padding-bottom: 8px; }

.xc details.gf-format .gf-rows > div,
.xc details.gf-format ul > li {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 16px !important;
  padding: 8px 0 !important;
  border-bottom: 1px dashed var(--xc-trait) !important;
  font-size: .88rem !important;
  color: var(--xc-texte);
}

.xc details.gf-format .gf-rows > div:last-child,
.xc details.gf-format ul > li:last-child { border-bottom: 0 !important; }

.xc details.gf-format .gf-rows > div > div:first-child {
  font-size: .88rem !important;
  color: var(--xc-texte) !important;
}

.xc details.gf-format .gf-rows > div > div:last-child,
.xc details.gf-format ul > li > span:last-child {
  flex: 0 0 auto;
  font-family: var(--xc-mono);
  font-size: .9rem !important;
  font-weight: 500;
  color: var(--xc-encre) !important;
  white-space: nowrap;
  word-spacing: -.3em;
}

.xc details.gf-format ul { margin: 0 !important; padding: 0 0 8px !important; list-style: none; }

/* « inclus » et « Gratuit » restent en vert. */
.xc details.gf-format ul > li > span.xc-gratuit,
.xc details.gf-format ul > li > span[style*='1e6243'] { color: var(--xc-vert) !important; font-weight: 600; }

/* La note sous les formats de plans (gabarit et prices.js). */
.xc-note,
#price-rows-tubes > div:last-child:not(details) {
  margin-top: 10px !important;
  color: var(--xc-doux) !important;
  font-size: .8rem !important;
  line-height: 1.5;
}

/* Les abonnements : le bandeau, la phrase, deux colonnes de paliers. */
.xc-prix--abonnements .xc-prix__tete { justify-content: flex-start; gap: 14px; }

/* L'image sur son disque kraft, comme toutes les autres de la page. */
.xc-prix--abonnements .xc-prix__tete .xc-visuel {
  --xc-visuel: 78px;
  margin: -10px 0 -10px -10px;
}

/* Au grand écran, trois colonnes : la phrase, la note et le lien de
   commande, puis le noir et blanc, puis la couleur. La carte ne s'étire
   plus sur toute la largeur pour trois paliers N&B. Le corps s'efface
   (display: contents) pour que ses enfants entrent dans la grille de la
   carte, à côté du pied. */
@media (min-width: 1024px) {
  .xc-prix.xc-prix--abonnements {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: 40px;
    align-items: start;
  }
  .xc-prix--abonnements .xc-prix__tete { grid-column: 1 / -1; }
  .xc-prix--abonnements .xc-prix__corps { display: contents; }
  .xc-prix--abonnements .xc-abo__phrase { grid-column: 1; grid-row: 2; margin-left: 22px; }
  .xc-prix--abonnements .xc-abo__note { grid-column: 1; grid-row: 3; margin-left: 22px; }
  .xc-prix--abonnements .xc-prix__pied { grid-column: 1; grid-row: 4; margin-top: 0; padding-top: 14px; }
  .xc-prix--abonnements .xc-abo__colonnes { grid-column: 2; grid-row: 2 / span 3; margin: 0 22px 16px 0; padding-top: 4px; }
}

.xc-abo__phrase {
  margin: 14px 0 6px;
  max-width: 78ch;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--xc-doux);
}

.xc-abo__colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px 36px;
}

@media (min-width: 700px) {
  .xc-abo__colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.xc-abo__type {
  margin: 12px 0 2px;
  color: var(--xc-kraft-texte);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.xc-abo__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.xc-abo__liste > li {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 12px;
  padding: 9px 0 !important;
  border-bottom: 1px dashed var(--xc-trait) !important;
  font-size: .9rem !important;
  color: var(--xc-encre);
}

.xc-abo__liste > li:last-child { border-bottom: 0 !important; }

.xc-abo__liste > li > span:last-child {
  font-family: var(--xc-mono);
  font-weight: 500;
  white-space: nowrap;
  word-spacing: -.3em;
}

/* Le prix à la copie, en seconde voix (gabarit et prices.js). */
.xc-abo__liste > li > span:last-child > span,
.xc-abo__liste > li > span:last-child > small {
  margin-left: 6px;
  color: var(--xc-kraft-texte) !important;
  font-size: .72rem !important;
  word-spacing: -.3em;
}

.xc-abo__note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--xc-trait);
  color: var(--xc-doux);
  font-size: .82rem;
}

/* --------------------------------------------------------------------------
   5. LES COLIS : le point relais et la livraison, deux cartes.
   -------------------------------------------------------------------------- */
.xc-colis {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

@media (min-width: 992px) {
  .xc-colis {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 18px;
    align-items: stretch;
  }
}

.xc-colis > .xc-carte { padding: 14px 20px 18px; }

.xc-carte__tete {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 10px -6px;
  --xc-visuel: 84px;
}

.xc-carte__tete > div { min-width: 0; }

.xc-carte__titre {
  margin: 0;
  font-family: var(--xc-police-titre);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--xc-encre);
  text-wrap: balance;
}

.xc-carte__ligne {
  margin: 3px 0 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--xc-doux);
}

.xc-surtitre {
  margin-bottom: 3px;
  color: var(--xc-kraft-texte);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Les transporteurs : leur vrai logo, une phrase dessous. */
.xc-transporteurs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px dashed var(--xc-kraft);
}

.xc-transporteurs li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--xc-kraft);
}

.xc-transporteurs li:last-child { border-bottom: 0; }

/* Une case de 40 px de haut pour tous, la largeur de chacun est dans le
   gabarit, réglée à l'œil : un logo compact (UPS, PostNL) prend toute la
   hauteur, un bandeau (DHL, Vinted Go) reste plus bas, centré dans la case.
   Les phrases dessous restent ainsi alignées d'une colonne à l'autre. */
.xc-transporteurs__logo {
  height: 40px;
  object-fit: contain;
  object-position: left center;
}

.xc-transporteurs li > span:last-child {
  font-size: .86rem;
  line-height: 1.45;
  color: var(--xc-doux);
}

@media (min-width: 640px) {
  .xc-transporteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; }
  .xc-transporteurs li:nth-last-child(2):nth-child(odd),
  .xc-transporteurs li:nth-last-child(2):nth-child(even) { border-bottom: 0; }
}

.xc-livraison__texte { margin: 0 0 10px; }

.xc-livraison__texte p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--xc-doux);
}

/* Les prix de départ de prices.js : en encre et non plus en orange (la
   variable qu'il lit), les pointillés en kraft. */
#shipping-rates-table {
  --accent-orange: var(--xc-encre);
  padding-top: 4px;
  border-top: 1px dashed var(--xc-kraft);
}

#shipping-rates-table > div > div[style*='dashed'] { border-bottom-color: var(--xc-trait) !important; }
#shipping-rates-table div[style*='uppercase'] { margin-top: 10px; color: var(--xc-kraft-texte) !important; }
/* Les logos Mondial Relay et DPD de prices.js : 18 px de haut, illisibles. */
#shipping-rates-table img {
  height: 22px !important;
  width: auto !important;
  mix-blend-mode: multiply;
}

/* --------------------------------------------------------------------------
   6. LES PROFESSIONNELS : six cartes, chacune son illustration, et le bon
   de devis vert pâle.
   -------------------------------------------------------------------------- */
.xc-pros {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .xc-pros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

@media (min-width: 1100px) {
  .xc-pros { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}

/* CHAQUE CARTE EST UN <details> (.xc-pro__plus) dont la tête (l'image et le
   titre) est le <summary>. Au téléphone, les six cartes sont fermées et
   s'ouvrent d'un toucher (le « + » de la tête) : dépliées, elles faisaient
   2 400 px de coches. Dès 700 px, le script de la page les garde ouvertes
   et la tête n'est plus cliquable. Le texte reste dans la page dans tous les
   cas, pour le référencement. */
.xc-pro { padding: 12px 20px 20px; }

.xc-pro__plus > summary {
  list-style: none;
  cursor: pointer;
}

.xc-pro__plus > summary::-webkit-details-marker { display: none; }

.xc-pro .xc-carte__tete { margin-bottom: 0; --xc-visuel: 76px; }

.xc-pro__texte {
  margin: 10px 0 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--xc-doux);
  text-wrap: pretty;
}

.xc-pro .xc-coches { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--xc-trait); }

@media (max-width: 699.98px) {
  .xc-pros { gap: 10px; }
  .xc-pro { padding: 6px 16px 6px; }
  .xc-pro .xc-carte__tete { --xc-visuel: 62px; }
  .xc-pro__plus[open] { padding-bottom: 12px; }

  /* Le « + » des accordéons de tarifs, à droite du titre. */
  .xc-pro__plus > summary::after {
    content: '+';
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--xc-vert-voile);
    color: var(--xc-vert);
    font-family: var(--xc-mono);
    font-size: 16px;
    line-height: 1;
  }

  .xc-pro__plus[open] > summary::after {
    content: '\2212';
    background: var(--xc-vert);
    color: #fff;
  }
}

@media (min-width: 700px) {
  .xc-pro__plus > summary { cursor: default; }
}

/* LE BON DE DEVIS, comme l'encart d'abonnement de xtra-easy : vert pâle,
   bordé d'un pointillé de découpe. */
.xc-bon {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-areas:
    "img texte"
    "bouton bouton";
  align-items: center;
  gap: 12px 14px;
  margin-top: 16px;
  padding: 16px 20px 20px 14px;
  border-radius: 22px;
  background: var(--xc-vert-voile);
}

.xc-bon::after {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1.5px dashed rgba(30, 98, 67, .3);
  border-radius: 16px;
  pointer-events: none;
}

.xc-bon > img {
  grid-area: img;
  display: block;
  width: 100%;
  height: auto;
}

.xc-bon__texte { grid-area: texte; min-width: 0; }

.xc-bon__titre {
  margin: 0 0 3px;
  font-family: var(--xc-police-titre);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.2;
  color: var(--xc-vert);
}

.xc-bon__ligne {
  margin: 0;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--xc-texte);
}

.xc-bon .xc-bouton {
  grid-area: bouton;
  position: relative;
  z-index: 1;
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .xc-bon {
    grid-template-columns: 92px minmax(0, 1fr) auto;
    grid-template-areas: "img texte bouton";
    column-gap: 20px;
    padding: 16px 28px 16px 18px;
  }
}

/* --------------------------------------------------------------------------
   7. COMMANDER EN LIGNE : un grand bon kraft clair au lieu du bloc jaune,
   comme l'encart « Retrait gratuit à Tournai » des pages produit. Le bon de
   devis, juste au-dessus, est déjà vert pâle.
   -------------------------------------------------------------------------- */
.xc-enligne {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding: 24px 22px 26px;
  border-radius: 24px;
  background: var(--xc-kraft-fond);
}

.xc-enligne::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1.5px dashed rgba(138, 106, 63, .38);
  border-radius: 18px;
  pointer-events: none;
}

.xc-enligne > * { position: relative; z-index: 1; }

.xc-enligne__texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

/* Le soulignement de « en ligne. » vient de lang.js, en ligne : il se
   lisait comme un lien juste au-dessus du bouton. Il est retiré, l'orange
   reste le seul accent. */
.xc-enligne .xc-titre span {
  color: var(--xc-orange-texte);
  text-decoration: none !important;
}

.xc-enligne__texte > p {
  margin: 0;
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--xc-texte);
  text-wrap: pretty;
}

.xc-enligne__texte strong { color: var(--xc-encre); font-weight: 600; }

.xc-enligne__direct {
  margin: 4px 0 -4px !important;
  font-size: .9rem !important;
  font-weight: 600;
  color: var(--xc-vert) !important;
}

.xc-puces {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.xc-puces a {
  padding: 7px 14px;
  border: 1px solid var(--xc-kraft);
  border-radius: 999px;
  background: var(--xc-blanc);
  color: var(--xc-encre);
  font-size: .88rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 160ms var(--xc-sortie), color 160ms var(--xc-sortie);
}

.xc-puces a:hover,
.xc-puces a:focus-visible {
  border-color: var(--xc-vert);
  color: var(--xc-vert);
}

.xc-enligne__visuel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  --xc-visuel: 150px;
}

/* Sur le kraft, le disque passe au crème pour rester visible. */
.xc-enligne .xc-visuel::before { background: var(--xc-creme); }

.xc-enligne__passez {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 10px;
  margin: 0;
  padding: 8px 16px;
  border: 1px solid var(--xc-kraft);
  border-radius: 999px;
  background: var(--xc-blanc);
  color: var(--xc-encre);
  font-size: .9rem;
  font-weight: 600;
}

/* « ● ouvert » / « ● fermé » : hours.js écrit le texte, pas la couleur. On
   la reprend du point de la barre du haut, que hours.js peint en vert
   (#79c26a) ou en rouge (#d94a2b) : vert quand c'est ouvert, rouge quand
   c'est fermé, gris neutre pour un navigateur sans :has(). */
#floating-status {
  color: var(--xc-doux);
  font-size: .82rem;
  font-weight: 500;
}

.xc:has(#status-dot[style*='121, 194, 106']) #floating-status { color: var(--xc-vert); }
.xc:has(#status-dot[style*='217, 74, 43']) #floating-status { color: #b3401f; }

@media (min-width: 900px) {
  .xc-enligne {
    grid-template-columns: minmax(0, 1fr) 260px;
    align-items: center;
    gap: 36px;
    padding: 34px 44px 36px 40px;
  }
  .xc-enligne__visuel { --xc-visuel: 230px; }
}

/* --------------------------------------------------------------------------
   8. LES HORAIRES : le texte et la prochaine fermeture, le calendrier de
   hours.js dans une carte blanche.
   -------------------------------------------------------------------------- */
#horaires-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

@media (min-width: 992px) {
  #horaires-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(28px, 3.5vw, 48px);
    align-items: start;
  }
}

.xc-horaires__texte {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.xc-horaires__tete {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: -6px;
  --xc-visuel: 92px;
}

.xc-horaires__texte > p {
  margin: 0;
  max-width: 60ch;
  font-size: .98rem;
  line-height: 1.6;
  color: var(--xc-doux);
}

#next-closure-card {
  margin-top: 4px;
  padding: 14px 18px 16px;
}

#next-closure-date {
  font-family: var(--xc-police-titre);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--xc-encre);
}

#next-closure-sub {
  margin-top: 2px;
  font-size: .88rem;
  color: var(--xc-doux);
}

#cal-card { padding: 20px 22px 18px; }

.xc-cal__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

#cal-week-num {
  color: var(--xc-kraft-texte);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
}

#cal-week-range {
  margin-top: 1px;
  font-family: var(--xc-police-titre);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--xc-vert);
}

.xc-cal__fleches { display: flex; gap: 8px; }

#cal-prev,
#cal-next {
  width: 38px;
  height: 38px;
  border: 1px solid var(--xc-kraft);
  border-radius: 10px;
  background: var(--xc-blanc);
  color: var(--xc-vert);
  font-family: var(--xc-mono);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 160ms var(--xc-sortie), border-color 160ms var(--xc-sortie);
}

#cal-prev:hover,
#cal-next:hover { background: var(--xc-vert-voile); border-color: var(--xc-vert); }

/* LES JOURS : sept cases au grand écran, quatre puis trois au téléphone
   (plus de défilement horizontal). hours.js les réécrit en ligne : les
   !important ci-dessous ne visent que ces styles. */
#cal-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

#cal-days > div {
  position: relative;
  min-width: 0;
  padding: 14px 6px 10px !important;
  border: 1px solid var(--xc-kraft) !important;
  border-radius: 14px !important;
  background: var(--xc-creme) !important;
  text-align: center;
}

#cal-days > div > div {
  font-family: var(--xc-mono);
  font-size: 11px;
  color: var(--xc-encre);
}

/* Les cases du gabarit, avant que hours.js les réécrive : le jour, la date,
   les heures. Les cases de hours.js n'ont pas ces classes. */
#cal-days .xc-cal__j { color: var(--xc-kraft-texte); letter-spacing: .06em; }
#cal-days .xc-cal__d { margin: 4px 0 10px; font-family: var(--xc-police-titre); font-size: 22px; font-weight: 700; }
#cal-days .xc-cal__h { padding: 4px 0; overflow-wrap: anywhere; line-height: 1.35; }
#cal-days .xc-cal__d + .xc-cal__h { border-top: 1px dashed var(--xc-kraft); }

/* Le numéro du jour : hours.js l'écrit en Bricolage Grotesque, la page
   est en Work Sans. */
#cal-days > div > div[style*='Bricolage'] { font-family: var(--xc-police-titre) !important; }

/* Le nom du jour : le kraft de hours.js (#9c7b4f) ne faisait que 3,7:1 sur
   le crème ; le kraft du texte passe à 4,6:1. La case du jour, plus bas,
   le repasse en blanc. */
#cal-days > div > div[style*='9c7b4f'] { color: var(--xc-kraft-texte) !important; }

/* Le jour fermé : hours.js le passe à opacity:0.5, « fermé » tombait à 2:1.
   Il reste lisible, et se distingue par son bord en pointillé. */
#cal-days > div[style*='opacity:0.5'] {
  opacity: 1 !important;
  background: transparent !important;
  border-style: dashed !important;
}

/* Les heures : elles passent à la ligne au lieu de pousser la case. */
#cal-days > div > div[style*='padding:4px'] {
  border-top-color: var(--xc-kraft) !important;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

/* Le samedi (horaires réduits). */
#cal-days > div[style*='e9dcc3'] { background: var(--xc-kraft-fond) !important; }

/* Aujourd'hui : la case verte, la pastille orange au-dessus. */
#cal-days > div[style*='1b1a17'] {
  border-color: var(--xc-vert) !important;
  background: var(--xc-vert) !important;
}

#cal-days > div[style*='1b1a17'] > div { color: #fff !important; }
#cal-days > div[style*='1b1a17'] > div[style*='padding:4px'] { border-top-color: rgba(255, 255, 255, .3) !important; }

/* La pastille « AUJ. » : l'orange foncé du texte (5:1 avec le blanc) au
   lieu de l'orange vif (3:1). */
#cal-days > div[style*='1b1a17'] > div[style*='absolute'] {
  background: var(--xc-orange-texte) !important;
  color: #fff !important;
  font-weight: 700;
}

.xc-cal__legende {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 16px;
  font-size: .8rem;
  color: var(--xc-doux);
}

.xc-cal__legende > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.xc-cal__legende i {
  width: 11px;
  height: 11px;
  border: 1px solid var(--xc-kraft-fonce);
  border-radius: 3px;
  background: var(--xc-creme);
}

.xc-cal__legende i.xc-cal__reduit { background: var(--xc-kraft-fond); }
.xc-cal__legende i.xc-cal__jour { border-color: var(--xc-vert); background: var(--xc-vert); }

@media (max-width: 599.98px) {
  #cal-card { padding: 16px 14px 14px; }
  #cal-days { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 6px; }
  #cal-days > div { padding: 12px 4px 8px !important; }
}

/* --------------------------------------------------------------------------
   9. LE CONTACT : les coordonnées ligne à ligne, la carte à côté.
   -------------------------------------------------------------------------- */
.xc-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 900px) {
  .xc-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
}

/* « À vous. » en vert (le span arrive de lang.js avec son kraft en ligne). */
#contact .xc-titre span span { color: var(--xc-orange-texte) !important; }

.xc-coord {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 4px 18px;
  list-style: none;
}

.xc-coord > li { border-bottom: 1px dashed var(--xc-kraft); }
.xc-coord > li:last-child { border-bottom: 0; }

.xc-coord__ligne {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 12px 0;
  color: var(--xc-encre);
  text-decoration: none;
}

.xc-coord__ligne > div { flex: 1 1 auto; min-width: 0; }

/* Les étiquettes (ADRESSE, TÉLÉPHONE...) répétaient ce que dit l'icône :
   comme sur la carte « Nous trouver » de xtra-easy, la ligne n'affiche plus
   que l'icône et la valeur. L'étiquette reste dans la page, pour les
   lecteurs d'écran et le référencement. */
.xc-coord__etiquette {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.xc-coord__valeur {
  margin-top: 1px;
  font-size: .96rem;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.xc-coord__action {
  flex: 0 0 auto;
  color: var(--xc-vert);
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 479.98px) {
  .xc-coord__action { display: none; }
}

a.xc-coord__ligne:hover .xc-coord__valeur,
a.xc-coord__ligne:focus-visible .xc-coord__valeur {
  color: var(--xc-vert);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* La carte Google : dans le même cadre kraft, à la hauteur des
   coordonnées. */
.xc-plan {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  background: var(--xc-kraft-fond);
}

.xc-plan iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

.xc-plan__itineraire {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(23, 79, 53, .55);
}

/* --------------------------------------------------------------------------
   10. LE PIED DE PAGE : sombre, comme celui de xtra-easy.
   -------------------------------------------------------------------------- */
.xc-pied {
  padding: 40px 0 22px;
  background: var(--xc-pied);
  color: rgba(255, 255, 255, .78);
  font-size: .9rem;
}

.xc-pied__haut {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

@media (min-width: 900px) {
  .xc-pied__haut { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
}

.xc-pied__marque {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-family: var(--xc-police-titre);
  font-size: 1.15rem;
  font-weight: 700;
}

.xc-pied__marque img { display: block; width: 46px; height: 46px; }

.xc-pied__baseline {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, .62);
  font-size: .8rem;
  letter-spacing: .04em;
  line-height: 1.7;
}

.xc-pied__titre {
  margin: 0 0 12px;
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
}

.xc-pied__liens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 22px;
}

@media (min-width: 640px) {
  .xc-pied__liens { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.xc-pied__liens a,
.xc-pied__bas a {
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
}

.xc-pied__liens a:hover,
.xc-pied__bas a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.xc-pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding-top: 18px;
  color: rgba(255, 255, 255, .6);
  font-size: .8rem;
}

/* LA SIGNATURE DE L'AGENCE (22/09/2026) : discrète au repos, vivante au
   survol, la chouette se redresse de deux degrés. */
.xc-oscar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit !important;
  text-decoration: none !important;
  opacity: .75;
  transition: opacity .18s ease-out;
}

.xc-oscar img { display: block; transition: transform .18s cubic-bezier(.2, 0, 0, 1); }
.xc-oscar:hover,
.xc-oscar:focus-visible { opacity: 1; }
.xc-oscar:hover img,
.xc-oscar:focus-visible img { transform: rotate(-2deg) scale(1.1); }
.xc-oscar strong { letter-spacing: .04em; }

/* --------------------------------------------------------------------------
   L'APPEL COLLANT DU TÉLÉPHONE (hors de <x-dc>) : vert, comme les boutons.
   Le sélecteur a.xc-sticky-cta passe devant le <style> du gabarit.
   -------------------------------------------------------------------------- */
a.xc-sticky-cta {
  background: var(--xc-vert);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(23, 79, 53, .6);
  transition: opacity 200ms var(--xc-sortie), transform 200ms var(--xc-sortie), visibility 200ms;
}

/* Il se retire tant que les boutons du haut de page sont à l'écran (le
   script de la page pose la classe). */
a.xc-sticky-cta.xc-sticky-cta--cache {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  pointer-events: none;
}

/* Au téléphone, le bas du pied de page lui laisse sa place. */
@media (max-width: 600px) {
  .xc-pied { padding-bottom: 84px; }
}

/* --------------------------------------------------------------------------
   MOUVEMENT RÉDUIT : rien ne bouge, tout reste lisible.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .xc-haut__visuel img { animation: none; }
  .xc-bouton,
  .xc-service,
  .xc-visuel img,
  .xc-fleche,
  .xc-puces a,
  .xc-oscar,
  .xc-oscar img,
  a.xc-sticky-cta { transition: none; }
  .xc-service:hover,
  .xc-service:hover .xc-visuel img,
  .xc-bouton:hover .xc-fleche,
  .xc-lien:hover .xc-fleche,
  .xc-oscar:hover img { transform: none; }
}

@media print {
  .xc-barre { position: static; }
  .xc-haut__visuel img { animation: none; }
}