/* Généré depuis data/design.json : ne pas modifier ici. */
:root {
  --couleur-base: #ffffff;
  --couleur-creme: #f4f4ed;
  --couleur-teinte: #edefe0;
  --couleur-teinte-2: #f7f8f1;
  --couleur-encre: #1e2327;
  --couleur-encre-douce: #55585b;
  --couleur-marque: #a2a277;
  --couleur-accent: #6b7c5d;
  --couleur-accent-survol: #5b6b4f;
  --couleur-accent-clair: #8a9c76;
  --couleur-rose: #d59c9a;
  --couleur-rose-teinte: #f7eeed;
  --couleur-abricot: #e9b18d;
  --couleur-abricot-teinte: #fbf1e9;
  --couleur-filet: #e5e5dd;
  --couleur-olive-fonce: #40492f;
  --couleur-neutre: #edf0f1;
  --couleur-neutre-fonce: #3d4448;
  --couleur-rose-fonce: #6d3b39;
  --couleur-abricot-fonce: #6b3f20;
  --couleur-google-bleu: #4285f4;
  --couleur-google-rouge: #ea4335;
  --couleur-google-jaune: #fbbc05;
  --couleur-google-vert: #34a853;
  --couleur-google-etoile: #fbbc04;
  --couleur-google-filet: #dadce0;
  --couleur-fleur-blanc: #f3f1e6;
  --couleur-fleur-pastel: #e7c3bf;
  --couleur-fleur-colore: #e59a5c;
  --couleur-fleur-champetre: #8ea6c6;
  --couleur-fleur-rouge: #a3343c;
  --couleur-statut-attente: #8a5a12;
  --couleur-statut-attente-fond: #fbf1e2;
  --couleur-statut-ok: #3f5a2c;
  --couleur-statut-ok-fond: #eef2e6;
  --couleur-statut-annule: #7a2f2f;
  --couleur-statut-annule-fond: #f6e9e8;
  --police-titres: "Cormorant Garamond", Georgia, serif;
  --police-texte: "Lato", -apple-system, Helvetica, Arial, sans-serif;
  --graisse-titres: 300;
  --graisse-texte: 400;
  --graisse-gras: 700;
  --taille-h1: clamp(2rem, 4.8cqw, 3.6rem);
  --taille-h2: clamp(1.5rem, 2.9cqw, 2.3rem);
  --taille-h3: clamp(1.02rem, 1.5cqw, 1.18rem);
  --taille-titre-bloc: clamp(1.3rem, 2.3cqw, 1.8rem);
  --taille-chapo: clamp(1rem, 1.7cqw, 1.1rem);
  --taille-reponse: clamp(1.02rem, 1.8cqw, 1.16rem);
  --taille-texte: 1rem;
  --taille-secondaire: 0.875rem;
  --taille-surtitre: 0.7rem;
  --taille-bouton: 0.82rem;
  --taille-logo: 1.28rem;
  --taille-navigation: 0.83rem;
  --taille-ariane: 0.8rem;
  --taille-barre: 0.85rem;
  --taille-burger: 1.35rem;
  --taille-mini: 0.76rem;
  --taille-titre-carte: clamp(1rem, 1.5cqw, 1.1rem);
  --taille-titre-ligne: clamp(1.15rem, 1.9cqw, 1.4rem);
  --taille-citation: clamp(1.1rem, 2.1cqw, 1.55rem);
  --taille-statistique: clamp(1.4rem, 2.4cqw, 1.85rem);
  --taille-montant: 1.55rem;
  --taille-montant-compo: 1.4rem;
  --taille-perso: clamp(1.4rem, 2.5cqw, 2.05rem);
  --taille-universel: clamp(0.9rem, 1.35cqw, 1.08rem);
  --taille-chiffre-etape: 1.35rem;
  --taille-note-avis: clamp(2.6rem, 5cqw, 3.4rem);
  --taille-menu-entree: 1.35rem;
  --taille-menu-lien: 1.02rem;
  --taille-h2-mobile: 1.65rem;
  --taille-h3-mobile: 1.3rem;
  --taille-h3-carte-mobile: 1.15rem;
  --taille-question-mobile: 1.2rem;
  --typo-interligne-texte: 1.7;
  --typo-interligne-titres: 1.12;
  --typo-interlettrage-titres: -0.015em;
  --typo-largeur-lecture: 62ch;
  --typo-interligne-serre: 1.25;
  --typo-interligne-citation: 1.35;
  --typo-interlettrage-etiquette: 0.08em;
  --typo-interlettrage-surtitre: 0.14em;
  --typo-interlettrage-signature: 0.09em;
  --typo-interlettrage-etoiles: 0.3em;
  --rayon-bouton: 8px;
  --rayon-vignette: 12px;
  --rayon-carte: 16px;
  --rayon-bloc: 24px;
  --rayon-pilule: 100px;
  --ombre-douce: 0 1px 2px rgba(30,35,39,.04), 0 2px 8px rgba(30,35,39,.05);
  --ombre-moyenne: 0 2px 6px rgba(30,35,39,.05), 0 12px 28px rgba(30,35,39,.08);
  --ombre-forte: 0 4px 12px rgba(30,35,39,.06), 0 24px 56px rgba(30,35,39,.11);
  --ombre-barre: 0 -2px 16px rgba(30,35,39,.1);
  --trait-filet: 1px;
  --trait-accent: 3px;
  --trait-repere: 2px;
  --focus-epaisseur: 2px;
  --focus-decalage: 3px;
  --espace-section: clamp(2rem, 6.5cqw, 5rem);
  --espace-section-deuil: clamp(2rem, 8cqw, 6.5rem);
  --espace-paragraphe: 1rem;
  --espace-pas-1: 0.4rem;
  --espace-pas-2: 0.65rem;
  --espace-pas-3: 0.9rem;
  --espace-pas-4: 1.1rem;
  --espace-pas-5: 1.6rem;
  --espace-entete-page: clamp(2.2rem, 5cqw, 3.8rem);
  --espace-colonnes: clamp(1.5rem, 4cqw, 3.2rem);
  --espace-bloc: clamp(1.3rem, 2.8cqw, 2.5rem);
  --espace-bloc-ample: clamp(1.6rem, 4cqw, 2.8rem);
  --espace-marge-laterale: 1.5rem;
  --espace-marge-laterale-mobile: 1.05rem;
  --espace-largeur-max: 1200px;
  --espace-largeur-etroite: 720px;
  --espace-largeur-recit: 820px;
  --espace-encart-apres-etapes: clamp(2.4rem, 5cqw, 3.5rem);
  --espace-section-mobile: 3.2rem;
  --espace-carte-mobile: 1.35rem;
  --composant-entete-opacite: 93%;
  --composant-entete-flou: 8px;
  --composant-entete-marge: 0.85rem;
  --composant-entete-ecart: 1rem;
  --composant-entete-plan: 60;
  --composant-logo-interlettrage: 0.2em;
  --composant-logo-hauteur: 52px;
  --composant-logo-hauteur-mobile: 36px;
  --composant-logo-largeur: 34px;
  --composant-nav-ecart: 1.1rem;
  --composant-bouton-marge: 0.88rem 1.45rem;
  --composant-bouton-survol: -1px;
  --composant-boutons-ecart: 0.65rem;
  --composant-ariane-marge: 0.85rem;
  --composant-ariane-ecart: 0.4rem;
  --composant-barre-marge: 1rem 0.5rem;
  --composant-barre-plan: 50;
  --composant-pied-marge: 2.2rem;
  --composant-pied-colonne: 14rem;
  --composant-duree-transition: 0.2s;
  --composant-flottant-opacite: 97%;
  --composant-flottant-flou: 6px;
  --composant-flottant-retrait: 18px;
  --composant-flottant-vignette: 44px;
  --composant-pictogramme: 84px;
  --composant-pastille: 38px;
  --composant-carte-survol: -2px;
  --composant-colonne-commune: 240px;
  --composant-colonne-occasion: 200px;
  --composant-visionneuse-opacite: 94%;
  --composant-visionneuse-hauteur: 78vh;
  --composant-visionneuse-bouton: 46px;
  --composant-visionneuse-bouton-fond: 12%;
  --composant-visionneuse-bouton-survol: 22%;
  --composant-defile-colonne: 22%;
  --composant-defile-colonne-tablette: 31%;
  --composant-defile-colonne-mobile: 44%;
  --composant-defile-colonne-petit-mobile: 62%;
  --composant-defile-offre-mobile: 84%;
  --composant-defile-fleche: 44px;
  --composant-defile-fondu: 4rem;
  --composant-creation-texte: 19rem;
  --composant-caracteristique-colonne: 10rem;
  --composant-etape-pastille: 46px;
  --composant-compo-photo: 170px;
  --composant-compo-photo-mobile: 120px;
  --composant-argument-picto: 56px;
  --composant-univers-degrade: 88%;
  --composant-entete-marge-mobile: 0.55rem;
  --composant-zone-tactile: 44px;
  --composant-univers-vignette-mobile: 72px;
  --composant-flottant-vignette-mobile: 36px;
  --composant-tarif-colonne: 3.6rem;
  --composant-duo-cadrage: 50% 22%;
  --composant-duo-vignette: 240px;
  --composant-duo-photo-dessous: 440px;
  --composant-menu-hauteur-max: calc(100dvh - 3.5rem);
  --composant-lire-vignette-mobile: 96px;
  --composant-creation-colonne-mobile: 40%;
  --composant-etape-pastille-mobile: 38px;
  --composant-ornement-largeur: 56px;
  --composant-avis-carte: 20rem;
  --composant-avis-carte-mobile: 16rem;
  --composant-avis-initiale: 2.4rem;
  --composant-avis-photo: 2.5rem;
  --composant-avis-logo: 1.25rem;
  --composant-controle-colonne: 16rem;
  --composant-auteur-photo: 64px;
  --composant-distinction-largeur: 220px;
  --composant-mention-logo: 4rem;
  --composant-nav-sous-largeur: 15rem;
  --composant-menu-ligne: 54px;
  --composant-menu-chevron: 0.5rem;
  --composant-menu-icone: 1.25rem;
  --composant-menu-glissement: 1.25rem;
  --composant-burger-zone: 44px;
  --composant-reseau-pastille: 48px;
  --composant-reseau-icone: 1.5rem;
  --composant-canal-icone: 1.15rem;
  --composant-icone-arrondi: 22%;
  --composant-icone-marge: 8%;
  --composant-fiche-largeur: 60rem;
  --composant-fenetre-largeur: 34rem;
  --composant-carte-produit: 14.5rem;
  --composant-carte-produit-mobile: 9.5rem;
  --composant-presentation-opacite: 96%;
  --composant-tableau-colonne: 13rem;
  --composant-graphique-hauteur: 11rem;
  --composant-plan-fenetre: 70;
  --composant-fenetre-voile: 55%;
  --composant-fleche-fond: 88%;
  --composant-presentation-filet: 20%;
  --format-portrait: 4/5;
  --format-galerie: 3/4;
  --format-bandeau: 21/8;
  --format-bandeau-mobile: 16/9;
  --format-paysage: 16/10;
  --format-carte: 4/3;
  --format-vignette-mobile: 1/1;
  --format-entete-mobile: 1/1;
  --format-offre: 1/1;
  --format-catalogue: 1/1;
}

/* 01-polices.css */
/* Polices servies depuis le site, jamais depuis Google.
   Fichiers dans assets/fonts/, sous-ensemble latin, licence SIL OFL 1.1.
   Les noms de famille correspondent à typographie dans data/design.json. */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/lato-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/lato-latin-700-normal.woff2") format("woff2");
}

/* 02-base.css */
/* Base : remise à zéro, typographie, liens, cadre.
   Aucune valeur visuelle en dur : uniquement les variables générées depuis data/design.json.
   Dans les requêtes de conteneur, var(--bascule-...) est remplacé à la génération. */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--couleur-base);
  color: var(--couleur-encre);
  font-family: var(--police-texte);
  font-size: var(--taille-texte);
  font-weight: var(--graisse-texte);
  line-height: var(--typo-interligne-texte);
  container: site / inline-size;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3 {
  font-family: var(--police-titres);
  font-weight: var(--graisse-titres);
  line-height: var(--typo-interligne-titres);
  letter-spacing: var(--typo-interlettrage-titres);
  margin: 0;
}

/* Lignes de titre équilibrées : pas de mot seul (ni de « ? ») sur la dernière ligne, surtout dans les titres centrés. */
h1,
h2,
h3,
.pied-tete,
.titre-bloc {
  text-wrap: balance;
}

h1 {
  font-size: var(--taille-h1);
}

h2 {
  font-size: var(--taille-h2);
}

h3 {
  font-size: var(--taille-h3);
}

p {
  margin: 0 0 var(--espace-paragraphe);
  max-width: var(--typo-largeur-lecture);
}

strong {
  font-weight: var(--graisse-gras);
}

a {
  color: var(--couleur-accent);
}

a:hover {
  color: var(--couleur-accent-survol);
}

/* Liens sur fond coloré (sections crème ou teintées, pied de page) : vert plus foncé, 5,19 pour 1 sur crème au lieu de
   4,07 (audit du 8 octobre 2026 : sous le minimum de 4,5 pour du petit texte). Les boutons gardent leurs couleurs. */
.creme a:not(.btn),
.teinte a:not(.btn),
.pied a:not(.btn) {
  color: var(--couleur-accent-survol);
}

.creme a:not(.btn):hover,
.teinte a:not(.btn):hover,
.pied a:not(.btn):hover {
  color: var(--couleur-olive-fonce);
}

:where(a, button, summary):focus-visible {
  outline: var(--focus-epaisseur) solid var(--couleur-accent);
  outline-offset: var(--focus-decalage);
}

/* Cadre de largeur maximale, repris des maquettes. */
.wrap {
  max-width: var(--espace-largeur-max);
  margin-inline: auto;
  padding-inline: var(--espace-marge-laterale);
}

@container site (max-width: 560px) {
  .wrap {
    padding-inline: var(--espace-marge-laterale-mobile);
  }
}

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

  * {
    transition: none !important;
  }
}

/* 03-utilitaires.css */
/* Classes utilitaires reprises des maquettes. */

.sec {
  padding-block: var(--espace-section);
}

.muted {
  color: var(--couleur-encre-douce);
  font-size: var(--taille-secondaire);
}

.center {
  text-align: center;
}

p.center,
.center p {
  margin-inline: auto;
}

/* Cadrage d'une photo à l'affichage (champ cadrage de son emplacement, Léa, 22 octobre 2026) : quand le cadre recoupe
   l'image, on en garde le haut ou le bas, sans toucher au fichier. L'identifiant du main l'emporte sur les règles des blocs. */
main#contenu img[data-cadrage="haut"] {
  object-position: top;
}

main#contenu img[data-cadrage="bas"] {
  object-position: bottom;
}

/* Lien d'évitement : invisible jusqu'à ce qu'on l'atteigne au clavier. */
.evitement:not(:focus) {
  position: absolute;
  clip-path: inset(50%);
  white-space: nowrap;
}

.evitement:focus {
  position: absolute;
  z-index: var(--composant-entete-plan);
  background: var(--couleur-base);
  padding: var(--espace-paragraphe);
}

/* Caché à l'œil, présent pour les lecteurs d'écran et le clavier. */
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 04-boutons.css */
/* Boutons, repris des maquettes. */

.btn {
  display: inline-block;
  background: var(--couleur-accent);
  color: var(--couleur-base);
  font-size: var(--taille-bouton);
  font-weight: var(--graisse-gras);
  text-decoration: none;
  padding: var(--composant-bouton-marge);
  border-radius: var(--rayon-bouton);
  box-shadow: var(--ombre-douce);
  transition: var(--composant-duree-transition);
}

.btn:hover {
  background: var(--couleur-accent-survol);
  color: var(--couleur-base);
  box-shadow: var(--ombre-moyenne);
  transform: translateY(var(--composant-bouton-survol));
}

.btn.ghost {
  background: var(--couleur-base);
  color: var(--couleur-encre);
  box-shadow: inset 0 0 0 var(--trait-filet) var(--couleur-filet);
}

.btn.ghost:hover {
  background: var(--couleur-teinte);
  color: var(--couleur-accent);
  box-shadow: inset 0 0 0 var(--trait-filet) var(--couleur-marque);
}

.btns {
  display: flex;
  gap: var(--composant-boutons-ecart);
  flex-wrap: wrap;
}

/* 05-entete.css */
/* En-tête collant, repris des maquettes. Menu mobile : voir assets/js/menu.js. */

.entete {
  background: color-mix(in srgb, var(--couleur-base) var(--composant-entete-opacite), transparent);
  backdrop-filter: blur(var(--composant-entete-flou));
  border-bottom: var(--trait-filet) solid var(--couleur-filet);
  padding-block: var(--composant-entete-marge);
  position: sticky;
  top: 0;
  z-index: var(--composant-entete-plan);
}

.entete .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--composant-entete-ecart);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--espace-pas-2);
  flex: none;
  font-family: var(--police-titres);
  font-size: var(--taille-logo);
  letter-spacing: var(--composant-logo-interlettrage);
  text-transform: uppercase;
  color: var(--couleur-accent);
  text-decoration: none;
}

.logo img {
  display: block;
  height: var(--composant-logo-hauteur);
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--composant-nav-ecart);
  font-size: var(--taille-navigation);
}

.nav a {
  color: var(--couleur-encre);
  text-decoration: none;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--couleur-accent);
}

/* Une entrée du menu et son sous-menu : ouvert au survol et au clavier, sans script. */
.nav-groupe {
  position: relative;
}

.nav-sous {
  display: none;
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--espace-pas-3));
  min-width: var(--composant-nav-sous-largeur);
  margin: 0;
  padding: var(--espace-pas-2) 0;
  list-style: none;
  background: var(--couleur-base);
  border: var(--trait-filet) solid var(--couleur-filet);
  border-radius: var(--rayon-vignette);
  box-shadow: var(--ombre-moyenne);
}

.nav-groupe:hover .nav-sous,
.nav-groupe:focus-within .nav-sous {
  display: block;
}

.nav-sous li {
  margin: 0;
}

.nav-sous a {
  display: block;
  padding: var(--espace-pas-2) var(--espace-pas-3);
  white-space: nowrap;
}

.nav-sous a:hover {
  background: var(--couleur-teinte-2);
}

/* Une catégorie qui a un sous-menu porte une petite flèche vers le bas (ordinateur) ou vers la droite (tiroir mobile). */
.a-sous > .nav-entree::after {
  content: "";
  display: inline-block;
  width: var(--composant-menu-chevron);
  height: var(--composant-menu-chevron);
  margin-left: var(--espace-pas-1);
  border-right: var(--trait-filet) solid currentColor;
  border-bottom: var(--trait-filet) solid currentColor;
  transform: translateY(-25%) rotate(45deg) scale(0.7);
}

/* Tête du tiroir (flèche de retour, nom de la catégorie) et « Tout voir » : seulement dans le tiroir mobile. */
.nav-tiroir {
  display: none;
}

.chevron {
  width: var(--composant-menu-icone);
  height: var(--composant-menu-icone);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--trait-repere);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.entete-actions {
  display: flex;
  gap: var(--espace-pas-2);
  flex: none;
}

.burger {
  display: none;
  min-width: var(--composant-burger-zone);
  min-height: var(--composant-burger-zone);
  place-items: center;
  background: none;
  border: 0;
  font-size: var(--taille-burger);
  cursor: pointer;
  color: var(--couleur-encre);
}

/* Bloc « Me joindre » du menu : seulement dans le menu mobile ouvert. */
.menu-contact {
  display: none;
}

.menu-contact a {
  color: var(--couleur-accent);
  font-weight: var(--graisse-gras);
}

.menu-contact ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--taille-secondaire);
}

.menu-contact li {
  margin: 0;
}

.menu-contact .pied-titre {
  margin: 0;
}

/* Le menu ne se replie que si le script est chargé : sans lui, les liens restent visibles.
   Menu mobile en tiroir (8 octobre 2026, demande de Léa) : une liste courte des six catégories ; toucher une catégorie
   remplace la liste par son sous-menu, avec la flèche de retour en haut ; tout lien touché referme le menu (menu.js). */
@container site (max-width: 780px) {
  .entete {
    padding-block: var(--composant-entete-marge-mobile);
  }

  .logo img {
    height: var(--composant-logo-hauteur-mobile);
  }

  /* Bouton principal et menu regroupés à droite, le menu en dernier. */
  .entete-actions {
    margin-left: auto;
  }

  .burger {
    order: 1;
    margin-right: calc(-1 * var(--espace-pas-2));
  }

  .js .burger {
    display: grid;
  }

  .js .nav {
    display: none;
  }

  .js .nav[data-ouvert] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    height: var(--composant-menu-hauteur-max);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--couleur-base);
    border-top: var(--trait-filet) solid var(--couleur-filet);
    box-shadow: var(--ombre-moyenne);
    padding: var(--espace-pas-2) var(--espace-marge-laterale-mobile) var(--espace-pas-5);
    font-size: var(--taille-menu-lien);
  }

  /* Niveau 1 : une catégorie par ligne, en grand, la flèche à droite. */
  .js .nav[data-ouvert] .nav-groupe {
    border-bottom: var(--trait-filet) solid var(--couleur-filet);
  }

  .js .nav[data-ouvert] .nav-entree {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--composant-menu-ligne);
    font-family: var(--police-titres);
    font-size: var(--taille-menu-entree);
  }

  .js .nav[data-ouvert] .a-sous > .nav-entree::after {
    margin-left: var(--espace-pas-3);
    transform: rotate(-45deg);
  }

  .js .nav[data-ouvert] .nav-sous {
    display: none;
  }

  /* Niveau 2 : la catégorie choisie remplace la liste. */
  .js .nav[data-sous] .nav-groupe:not([data-actif]),
  .js .nav[data-sous] [data-actif] > .nav-entree,
  .js .nav[data-sous] .menu-contact {
    display: none;
  }

  .js .nav[data-sous] [data-actif] {
    border-bottom: 0;
  }

  .js .nav[data-sous] [data-actif] .nav-sous {
    display: flex;
    flex-direction: column;
    position: static;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation: tiroir var(--composant-duree-transition) ease-out;
  }

  .js .nav[data-sous] .nav-sous li {
    border-bottom: var(--trait-filet) solid var(--couleur-filet);
  }

  .js .nav[data-sous] .nav-sous a {
    display: flex;
    align-items: center;
    min-height: var(--composant-menu-ligne);
    padding: 0;
    white-space: normal;
  }

  .js .nav[data-sous] .nav-sous a:hover {
    background: none;
  }

  .js .nav[data-sous] .nav-tiroir {
    display: flex;
  }

  .js .nav[data-sous] .nav-tiroir-tete {
    align-items: center;
    gap: var(--espace-pas-1);
    min-height: var(--composant-menu-ligne);
  }

  .nav-retour {
    display: grid;
    place-items: center;
    min-width: var(--composant-zone-tactile);
    min-height: var(--composant-zone-tactile);
    margin-left: calc(-1 * var(--espace-pas-3));
    padding: 0;
    background: none;
    border: 0;
    color: var(--couleur-encre);
    cursor: pointer;
  }

  .nav-tiroir-titre {
    font-family: var(--police-titres);
    font-size: var(--taille-menu-entree);
  }

  /* Me joindre : trois boutons sur une ligne, puis les horaires, sous la liste des catégories. */
  .js .nav[data-ouvert]:not([data-sous]) .menu-contact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-pas-2);
    padding-top: var(--espace-pas-5);
  }

  .js .nav[data-ouvert] .menu-contact .pied-titre {
    flex-basis: 100%;
  }

  .js .nav[data-ouvert] .menu-contact a {
    display: flex;
    align-items: center;
    min-height: var(--composant-zone-tactile);
    padding: 0 var(--espace-pas-3);
    border: var(--trait-filet) solid var(--couleur-filet);
    border-radius: var(--rayon-pilule);
    font-size: var(--taille-secondaire);
  }

  .js .nav[data-ouvert] .menu-contact ul {
    flex-basis: 100%;
    margin-top: var(--espace-pas-2);
  }
}

@keyframes tiroir {
  from {
    opacity: 0;
    transform: translateX(var(--composant-menu-glissement));
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-sous {
    animation: none !important;
  }
}

/* Très petits écrans : en-tête resserré pour que logo, bouton et menu tiennent sur une ligne ; un libellé long passe sur deux lignes. */
@container site (max-width: 560px) {
  .entete .wrap {
    gap: var(--espace-pas-2);
  }

  .logo {
    letter-spacing: var(--typo-interlettrage-surtitre);
  }

  .entete-actions {
    flex: 0 1 auto;
    min-width: 0;
  }

  .entete .btn {
    padding: var(--espace-pas-2) var(--espace-pas-3);
    text-align: center;
    line-height: var(--typo-interligne-serre);
  }
}

/* Une section ou une rangée visée par un lien (menu, ancre) s'arrête juste sous l'en-tête collant, au lieu de glisser
   dessous : hauteur de l'en-tête = logo et ses deux marges (22 octobre 2026, menu Mariage). :where() garde ce réglage
   au plus bas, pour qu'une règle propre à un élément (familles du catalogue) passe devant. */
:where(main [id]) {
  scroll-margin-top: calc(var(--composant-logo-hauteur) + 2 * var(--composant-entete-marge));
}

@container site (max-width: 780px) {
  :where(main [id]) {
    scroll-margin-top: calc(var(--composant-logo-hauteur-mobile) + 2 * var(--composant-entete-marge-mobile));
  }
}

/* 06-ariane.css */
/* Fil d'Ariane, repris des maquettes. */

.ariane {
  font-size: var(--taille-ariane);
  color: var(--couleur-encre-douce);
  padding-block: var(--composant-ariane-marge);
}

.ariane ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--composant-ariane-ecart);
}

.ariane li::after {
  content: "\203A";
  margin-left: var(--composant-ariane-ecart);
  color: var(--couleur-filet);
}

.ariane li:last-child::after {
  content: "";
}

/* Mobile : le fil tient sur une ligne, le dernier élément est coupé par des points de suspension. */
@container site (max-width: 780px) {
  .ariane {
    padding-block: var(--espace-pas-2);
  }

  .ariane ol {
    flex-wrap: nowrap;
  }

  .ariane li {
    flex: none;
    margin: 0;
  }

  .ariane li:last-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* 07-pied.css */
/* Pied de page « Nous trouver » (#trouver) : boutique, horaires, contacts, pages, alimentés par data/entreprise.json.
   Ces informations sont aussi décrites dans le balisage JSON-LD : elles doivent rester visibles. */

/* Fond crème et titre centré souligné, comme une tête de section : le pied se lit comme la dernière section du site. */
.pied {
  background: var(--couleur-creme);
  border-top: var(--trait-filet) solid var(--couleur-filet);
  padding-block: var(--espace-section);
}

.pied-tete {
  font-family: var(--police-titres);
  font-weight: var(--graisse-titres);
  font-size: var(--taille-h2);
  line-height: var(--typo-interligne-titres);
  text-align: center;
  max-width: none;
  margin: 0 0 var(--espace-bloc);
}

.pied-tete::after {
  content: "";
  display: block;
  width: var(--composant-ornement-largeur);
  height: var(--trait-repere);
  background: var(--couleur-marque);
  margin: var(--espace-pas-4) auto 0;
}

/* Ordinateur (9 octobre 2026) : quatre colonnes de même hauteur. La devanture occupe toute la hauteur de la
   première ; l'adresse et les contacts se partagent la deuxième ; les horaires, puis les liens et les réseaux. */
.pied-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 0.9fr);
  grid-template-areas:
    "photo boutique horaires liens"
    "photo contact horaires reseaux";
  grid-template-rows: auto 1fr;
  gap: var(--espace-pas-5) var(--espace-colonnes);
}

.pied-devanture { grid-area: photo; }
.pied-boutique { grid-area: boutique; }
.pied-horaires-bloc { grid-area: horaires; }
.pied-contact { grid-area: contact; }
.pied-liens { grid-area: liens; }
.pied-reseaux-bloc { grid-area: reseaux; }

.pied-grille > * {
  margin: 0;
}

.pied-grille p {
  margin: 0 0 var(--espace-pas-2);
}

/* Intitulés de colonne : petites capitales espacées, comme les étiquettes de section. */
.pied .pied-titre {
  font-size: var(--taille-surtitre);
  font-weight: var(--graisse-gras);
  letter-spacing: var(--typo-interlettrage-surtitre);
  text-transform: uppercase;
  color: var(--couleur-encre-douce);
  margin-bottom: var(--espace-pas-3);
}

.pied ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pied li {
  margin-bottom: var(--espace-pas-1);
}

/* Liens du pied : couleur du texte, soulignés seulement au survol, pour une lecture calme (8 octobre 2026). */
.pied-grille a:not(.btn) {
  color: var(--couleur-encre);
  text-decoration: none;
}

.pied-grille a:not(.btn):hover {
  color: var(--couleur-accent-survol);
  text-decoration: underline;
  text-underline-offset: var(--focus-decalage);
}

.pied .pied-telephone {
  font-weight: var(--graisse-gras);
}

.pied address {
  font-style: normal;
  font-family: var(--police-titres);
  font-size: var(--taille-titre-carte);
  line-height: var(--typo-interligne-serre);
  margin-bottom: var(--espace-pas-3);
}

.pied-devanture {
  position: relative;
  min-height: 100%;
}

.pied-devanture img,
.pied-devanture .emplacement {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--rayon-carte);
}

/* Horaires en tableau : les jours à gauche, les heures à droite, un filet entre les lignes. */
.pied-horaires {
  font-size: var(--taille-secondaire);
  margin-bottom: var(--espace-pas-3);
}

.pied-horaires li {
  display: flex;
  justify-content: space-between;
  gap: var(--espace-pas-2);
  margin: 0;
  padding-block: var(--espace-pas-1);
  border-bottom: var(--trait-filet) solid var(--couleur-filet);
}

.pied-horaires li > span:last-child {
  text-align: right;
}

.pied-horaires small {
  display: block;
  color: var(--couleur-encre-douce);
}

/* Logos des réseaux : affichés sur mobile seulement (Léa, 11 octobre 2026) ; sur ordinateur, les noms suffisent. */
.icone-reseau {
  display: none;
  width: var(--composant-reseau-icone);
  height: var(--composant-reseau-icone);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--trait-repere);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icone-reseau .icone-point {
  fill: currentColor;
  stroke: none;
}

/* Herborium : un bandeau sous la grille, logo, baseline et distinction alignés. */
.pied-identite {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--espace-pas-3) var(--espace-pas-5);
  margin-top: var(--espace-bloc);
  padding-top: var(--espace-pas-5);
  border-top: var(--trait-filet) solid var(--couleur-filet);
}

.pied-identite > * {
  margin: 0;
}

.pied .logo {
  display: inline-block;
}

.pied .logo img {
  display: block;
  height: var(--composant-logo-hauteur);
}

.pied .pied-baseline {
  font-family: var(--police-titres);
  font-size: var(--taille-titre-carte);
  line-height: var(--typo-interligne-serre);
}

/* Badge d'une distinction (Recommandé Petit Futé), bords arrondis, lien vers la source. */
.pied-distinction {
  display: inline-block;
}

.pied-distinction img {
  display: block;
  width: var(--composant-distinction-largeur);
  max-width: 100%;
  height: auto;
  border-radius: var(--rayon-vignette);
}

/* Bas de page : une ligne discrète, sous un filet. */
.pied-bas {
  max-width: none;
  margin: var(--espace-pas-4) 0 0;
  font-size: var(--taille-mini);
  color: var(--couleur-encre-douce);
  text-align: center;
}

/* Tablette : deux colonnes. La devanture à côté de l'adresse et des contacts, puis les horaires à côté des liens. */
@container site (max-width: 1040px) {
  .pied-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "photo boutique"
      "photo contact"
      "horaires liens"
      "horaires reseaux";
    grid-template-rows: auto auto auto 1fr;
  }
}

/* Mobile : la devanture en bandeau, l'adresse et l'itinéraire, les horaires, puis « Me joindre » à gauche et « À découvrir »
   à droite, les logos Instagram et Facebook centrés dessous (Léa, 11 octobre 2026) ; Herborium centré en bas. Tout ce qu'on
   cherche en premier sur un téléphone arrive en premier. */
@container site (max-width: 780px) {
  .pied {
    font-size: var(--taille-secondaire);
  }

  .pied-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "photo photo"
      "boutique boutique"
      "horaires horaires"
      "contact liens"
      "reseaux reseaux";
    gap: var(--espace-pas-5) var(--espace-pas-4);
  }

  /* Réseaux : deux logos ronds, centrés, sans titre ; le nom reste lisible par les lecteurs d'écran et les robots. */
  .pied-reseaux-bloc .pied-titre {
    display: none;
  }

  .pied-reseaux {
    display: flex;
    justify-content: center;
    gap: var(--espace-pas-4);
  }

  .pied .pied-reseaux li {
    margin: 0;
  }

  .pied .pied-reseaux a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--composant-reseau-pastille);
    height: var(--composant-reseau-pastille);
    padding: 0;
    border: var(--trait-filet) solid var(--couleur-filet);
    border-radius: var(--rayon-pilule);
    background: var(--couleur-base);
  }

  .pied .pied-reseaux a:hover {
    border-color: currentColor;
  }

  .icone-reseau {
    display: block;
  }

  .pied-reseau-nom {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .pied-tete {
    font-size: var(--taille-titre-bloc);
    margin-bottom: var(--espace-pas-4);
  }

  .pied-tete::after {
    margin-top: var(--espace-pas-3);
  }

  /* La devanture reprend sa propre hauteur, en bandeau. */
  .pied-devanture {
    min-height: 0;
  }

  .pied-devanture img,
  .pied-devanture .emplacement {
    position: static;
    height: auto;
    aspect-ratio: var(--format-bandeau-mobile);
  }

  .pied-boutique .btn {
    width: 100%;
    text-align: center;
  }

  /* Liens du pied : une zone à toucher plus haute. */
  .pied li a {
    display: inline-block;
    padding-block: var(--espace-pas-1);
  }

  .pied-identite {
    flex-direction: column;
    text-align: center;
    margin-top: var(--espace-pas-5);
  }
}

/* 08-barre.css */
/* Barre d'action collée en bas de l'écran sur mobile, reprise des maquettes.
   Elle porte les deux actions de la page : un bouton qui mène à la même adresse reçoit la classe doublon-barre.
   Depuis le 8 octobre 2026 (audit des pages), seul l'en-tête (celui du site et celui de la page) masque ses doublons
   sur mobile, avec la mention qui les accompagne : les cartes et les fins de page gardent leurs boutons, sinon elles
   paraissaient cassées. Sur ordinateur, tous les boutons restent. */

.barre {
  display: none;
}

@container site (max-width: 780px) {
  .entete a.doublon-barre,
  .entete-page a.doublon-barre {
    display: none;
  }

  .entete-page .btns:not(:has(> :not(.doublon-barre))),
  .entete-page .btns:not(:has(> :not(.doublon-barre))) + .mention-boutons {
    display: none;
  }

  .barre {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    position: sticky;
    bottom: 0;
    background: var(--couleur-base);
    box-shadow: var(--ombre-barre);
    z-index: var(--composant-barre-plan);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .barre a {
    background: var(--couleur-base);
    color: var(--couleur-encre);
    text-decoration: none;
    text-align: center;
    padding: var(--composant-barre-marge);
    font-size: var(--taille-barre);
    font-weight: var(--graisse-gras);
  }

  .barre a + a {
    border-left: var(--trait-filet) solid var(--couleur-filet);
  }

  .barre a.principal {
    background: var(--couleur-accent);
    color: var(--couleur-base);
  }
}

/* 09-blocs.css */
/* Blocs des pages piliers, repris de la maquette livraison. Gabarit : templates/pilier.njk.
   Uniquement des variables générées depuis data/design.json. */

ul {
  margin: 0 0 var(--espace-paragraphe);
  padding-left: var(--espace-pas-4);
  max-width: var(--typo-largeur-lecture);
}

li {
  margin-bottom: var(--espace-pas-1);
}

.creme {
  background: var(--couleur-creme);
}

.lead {
  font-size: var(--taille-chapo);
  color: var(--couleur-encre-douce);
}

.chip {
  display: inline-flex;
  background: var(--couleur-teinte);
  color: var(--couleur-olive-fonce);
  font-size: var(--taille-surtitre);
  font-weight: var(--graisse-gras);
  letter-spacing: var(--typo-interlettrage-etiquette);
  text-transform: uppercase;
  padding: var(--espace-pas-1) var(--espace-pas-3);
  border-radius: var(--rayon-pilule);
}

.surtitre {
  font-size: var(--taille-surtitre);
  font-weight: var(--graisse-gras);
  letter-spacing: var(--typo-interlettrage-surtitre);
  text-transform: uppercase;
  color: var(--couleur-encre-douce);
  margin: 0 0 var(--espace-pas-2);
}

/* Tête de section : étiquette, titre et introduction centrés, le titre souligné d'un trait court. L'œil descend dans
   l'axe jusqu'au contenu (passe visuelle du 5 octobre 2026 : des bouts de texte calés à gauche ne guidaient pas le regard).
   Même tête pour un duo sans photo ni contenu (avis et cartes en dessous). */
.tete,
.duo.sans-media:not(.riche) .duo-tete {
  text-align: center;
  margin-bottom: var(--espace-bloc);
}

.tete h2,
.duo.sans-media:not(.riche) .duo-tete h2 {
  max-width: var(--espace-largeur-recit);
  margin-inline: auto;
}

.tete h2::after,
.duo.sans-media .duo-tete h2::after {
  content: "";
  display: block;
  width: var(--composant-ornement-largeur);
  height: var(--trait-repere);
  background: var(--couleur-marque);
  margin: var(--espace-pas-4) auto 0;
}

.ambiance-mariage .tete h2::after,
.ambiance-mariage .duo.sans-media .duo-tete h2::after {
  background: var(--couleur-rose);
}

.tete .lead,
.duo.sans-media:not(.riche) .duo-tete .lead {
  margin: var(--espace-pas-4) auto 0;
}

/* Un titre directement suivi de son introduction ou de son texte : un peu d'air entre les deux. */
h2 + .lead,
h2 + .texte,
h1 + .lead {
  margin-top: var(--espace-pas-3);
}

/* Duo avec photo : le titre et le texte sont dans deux boîtes (.duo-tete, .duo-suite), la règle ci-dessus ne les voit
   pas ; sans introduction, le titre touchait le texte sur ordinateur (Léa, 23 octobre 2026, page Qui suis-je). Même
   écart que sur mobile (15-mobile-aere.css), avec lequel cette marge se confond. */
.duo:not(.sans-media) .duo-tete > h2:last-child {
  margin-bottom: var(--espace-pas-4);
}

.chip + h2,
.chip + h1 {
  margin-block: var(--espace-pas-3);
}

.btns {
  margin-top: var(--espace-pas-4);
}

.grille {
  display: grid;
  gap: var(--espace-pas-4);
}

/* Une colonne de grille peut rétrécir sous la largeur de son contenu : le texte passe à la ligne. */
.grille > *,
.galerie > * {
  min-width: 0;
}

.canal span {
  overflow-wrap: anywhere;
}

.grille.g2 {
  grid-template-columns: 1fr 1fr;
}

/* Trois colonnes ; une rangée incomplète (une ou deux cartes) reste centrée au lieu de se caler à gauche. */
.grille.g3 {
  grid-template-columns: repeat(auto-fit, calc((100% - 2 * var(--espace-pas-4)) / 3));
  justify-content: center;
}

.grille.g4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Emplacement photo sans photo validée : signalé sur le site de test uniquement. */
.emplacement {
  display: grid;
  place-items: center;
  width: 100%;
  background: var(--couleur-teinte-2);
  color: var(--couleur-encre-douce);
  font-size: var(--taille-mini);
  line-height: var(--typo-interligne-serre);
  text-align: center;
  padding: var(--espace-pas-1);
}

/* Petits emplacements (pictogrammes, vignettes) : texte masqué, le détail reste dans aria-label. */
.flottant .emplacement {
  overflow: hidden;
  font-size: 0;
}

.flottant .emplacement::after {
  content: "?";
  font-size: var(--taille-secondaire);
}

/* En-tête de page : titre, réponse courte, boutons, photo principale. */
.entete-page {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: var(--espace-colonnes);
  align-items: center;
  padding-block: var(--espace-entete-page);
}

h1 + .reponse {
  margin-top: var(--espace-pas-4);
}

.reponse {
  font-size: var(--taille-reponse);
  border-left: var(--trait-accent) solid var(--couleur-accent);
  padding-left: var(--espace-pas-4);
  color: var(--couleur-encre-douce);
}

.entete-page .mention {
  margin-top: var(--espace-pas-3);
}

.entete-page .photo {
  position: relative;
  border-radius: var(--rayon-bloc);
  overflow: hidden;
  box-shadow: var(--ombre-forte);
}

.entete-page .photo > img,
.entete-page .photo > .emplacement {
  width: 100%;
  aspect-ratio: var(--format-portrait);
  object-fit: cover;
}

/* Sans photo principale affichée : le texte prend toute la largeur. */
.entete-page.sans-photo {
  grid-template-columns: 1fr;
}

.flottant {
  position: absolute;
  inset-inline: var(--composant-flottant-retrait);
  bottom: var(--composant-flottant-retrait);
  background: color-mix(in srgb, var(--couleur-base) var(--composant-flottant-opacite), transparent);
  backdrop-filter: blur(var(--composant-flottant-flou));
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-moyenne);
  padding: var(--espace-pas-3);
  display: flex;
  gap: var(--espace-pas-3);
  align-items: center;
}

.flottant img,
.flottant .emplacement {
  width: var(--composant-flottant-vignette);
  height: var(--composant-flottant-vignette);
  border-radius: var(--rayon-vignette);
  object-fit: cover;
  flex: none;
  padding: 0;
}

.flottant strong {
  display: block;
  font-size: var(--taille-secondaire);
  line-height: var(--typo-interligne-serre);
}

.flottant .muted {
  display: block;
  font-size: var(--taille-mini);
  line-height: var(--typo-interligne-serre);
}

/* Galerie : quatre photos par rangée, une rangée incomplète centrée. */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, calc((100% - 3 * var(--espace-pas-3)) / 4));
  justify-content: center;
  gap: var(--espace-pas-3);
}

.galerie img,
.galerie .emplacement {
  width: 100%;
  aspect-ratio: var(--format-galerie);
  object-fit: cover;
  border-radius: var(--rayon-vignette);
  box-shadow: var(--ombre-douce);
}

/* Offres et canaux de commande. */
/* Une offre est une carte en colonne : titre, texte, puis les boutons calés en bas, à la même hauteur d'une carte à l'autre. */
.offre {
  display: flex;
  flex-direction: column;
  background: var(--couleur-base);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-douce);
  padding: var(--espace-pas-4);
}

.offre h3 + p {
  margin: var(--espace-pas-1) 0 var(--espace-pas-3);
}

.offre > .btns {
  margin-top: auto;
  padding-top: var(--espace-pas-2);
}

/* Prix d'une offre, en grand sous son titre (formules de bouquet, 8 octobre 2026). */
.offre-prix {
  margin: var(--espace-pas-1) 0 0;
  font-family: var(--police-titres);
  font-weight: var(--graisse-titres);
  font-size: var(--taille-montant-compo);
  line-height: var(--typo-interligne-serre);
  color: var(--couleur-accent);
}

.offre-prix + p {
  margin-top: var(--espace-pas-1);
}

/* Offres en lignes (champ lignes, page contact, 23 octobre 2026, Léa : « l'ux des intentions n'est pas ouf ») : une
   demande par ligne, séparée par un filet, sans carte ; le titre, la phrase et les liens à gauche, les boutons d'action à
   droite. Se lit comme une liste, au lieu de neuf cartes pareilles. */
.grille.lignes {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  max-width: var(--espace-largeur-recit);
  margin-inline: auto;
}

.grille.lignes > .offre {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--espace-colonnes);
  align-items: center;
  padding: var(--espace-pas-4) 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  border-top: var(--trait-filet) solid var(--couleur-filet);
}

.grille.lignes > .offre:last-child {
  border-bottom: var(--trait-filet) solid var(--couleur-filet);
}

.grille.lignes h3 {
  font-size: var(--taille-titre-ligne);
}

.grille.lignes .offre-texte > p {
  margin-bottom: 0;
}

/* Les liens vers les pages, sous la phrase. */
.offre-liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-pas-1) var(--espace-pas-4);
  margin-top: var(--espace-pas-2);
}

/* Les boutons d'action, l'un sous l'autre, à la même largeur. */
.grille.lignes > .offre > .btns {
  flex-direction: column;
  align-items: stretch;
  margin: 0;
  padding: 0;
  text-align: center;
}

/* Sur tablette, les boutons des cartes s'étirent (09-blocs, une colonne) ; ici, en colonne, ils gardent leur taille. */
.grille.lignes .btns .btn {
  flex: none;
}

/* Choix en plus du budget (bloc offres, champ choix) : trois colonnes sous les offres, un filet à gauche. */
.offres-choix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--composant-pied-colonne), 1fr));
  gap: var(--espace-pas-4);
  margin-top: var(--espace-bloc);
}

.offres-choix > div {
  border-left: var(--trait-repere) solid var(--couleur-marque);
  padding-left: var(--espace-pas-3);
}

.offres-choix h3 {
  margin: 0 0 var(--espace-pas-1);
}

.offres-choix p {
  margin: 0;
}

.offres-boutons .btns {
  justify-content: center;
  margin-top: var(--espace-pas-5);
}

/* Les deux façons de commander (bloc etapes, champ offres) : de vraies cartes, titre en grand. */
.options .offre {
  padding: var(--espace-bloc);
}

.options .offre h3 {
  font-size: var(--taille-titre-bloc);
}

.canaux {
  display: grid;
  gap: var(--espace-pas-2);
}

.canal {
  display: flex;
  gap: var(--espace-pas-3);
  align-items: center;
  background: var(--couleur-base);
  border-radius: var(--rayon-vignette);
  box-shadow: var(--ombre-douce);
  padding: var(--espace-pas-3) var(--espace-pas-4);
  text-decoration: none;
  color: inherit;
  transition: var(--composant-duree-transition);
}

.canal:hover {
  color: inherit;
  box-shadow: var(--ombre-moyenne);
  transform: translateY(var(--composant-carte-survol));
}

.canal .rond {
  width: var(--composant-pastille);
  height: var(--composant-pastille);
  border-radius: var(--rayon-pilule);
  background: var(--couleur-teinte);
  display: grid;
  place-items: center;
  flex: none;
  color: var(--couleur-accent);
  font-family: var(--police-titres);
}

.canal strong,
.canal .muted {
  display: block;
}

/* Coordonnées de la page contact (champ coordonnees de l'en-tête, 23 octobre 2026) : quatre cartes, deux par ligne,
   une par ligne sur téléphone. */
.coordonnees {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--espace-pas-4);
}

.icone-canal {
  width: var(--composant-canal-icone);
  height: var(--composant-canal-icone);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--trait-repere);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Zone de livraison. */
.carte-plan {
  border-radius: var(--rayon-bloc);
  overflow: hidden;
  box-shadow: var(--ombre-moyenne);
}

.carte-plan img,
.carte-plan .emplacement {
  width: 100%;
  aspect-ratio: var(--format-bandeau);
  object-fit: cover;
}

.bloc {
  background: var(--couleur-base);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-douce);
  padding: var(--espace-bloc);
}

.carte-plan + .bloc {
  margin-top: var(--espace-pas-4);
}

.bloc .note {
  margin: var(--espace-paragraphe) 0 0;
}

/* Zone de livraison : une tuile par tarif, le prix en grand, puis ses communes et leurs codes postaux.
   Du moins cher au plus cher : l'œil lit le tarif d'abord, puis cherche sa commune. */
.bloc > .surtitre {
  text-align: center;
  margin: 0 auto var(--espace-pas-4);
}

/* Quatre tuiles par rangée (trois sur tablette, deux sur mobile), la dernière rangée centrée. */
.tarifs-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espace-pas-3);
}

.tarif-ligne {
  flex: 0 1 calc((100% - 3 * var(--espace-pas-3)) / 4);
  display: flex;
  flex-direction: column;
  gap: var(--espace-pas-1);
  margin: 0;
  padding: var(--espace-pas-3) var(--espace-pas-4);
  background: var(--couleur-teinte-2);
  border-radius: var(--rayon-vignette);
  font-size: var(--taille-secondaire);
  line-height: var(--typo-interligne-serre);
}

.tarif-ligne .prix {
  font-family: var(--police-titres);
  font-weight: var(--graisse-titres);
  font-size: var(--taille-montant-compo);
  color: var(--couleur-accent);
  white-space: nowrap;
}

.tarif-ligne.offerte {
  background: var(--couleur-teinte);
}

/* « Offerte » sur le fond teinté : le vert d'accent n'y atteint pas 4,5 pour 1 (PageSpeed, 24 octobre 2026). */
.tarif-ligne.offerte .prix {
  color: var(--couleur-olive-fonce);
}

.bloc > .note {
  text-align: center;
  margin-inline: auto;
}

@container site (max-width: 1040px) {
  .tarif-ligne {
    flex-basis: calc((100% - 2 * var(--espace-pas-3)) / 3);
  }
}

/* Mobile : une ligne par tarif, séparées d'un filet, le prix à gauche dans sa colonne, les communes à droite.
   Plus court que des tuiles étroites. */
@container site (max-width: 780px) {
  .tarifs-liste {
    gap: 0;
  }

  .tarif-ligne {
    flex-basis: 100%;
    display: grid;
    grid-template-columns: var(--composant-tarif-colonne) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--espace-pas-2);
    padding: var(--espace-pas-1) var(--espace-pas-2);
    background: none;
    border-radius: 0;
    border-bottom: var(--trait-filet) dashed var(--couleur-filet);
  }

  .tarif-ligne:last-child {
    border-bottom: 0;
  }

  .tarif-ligne.offerte {
    border-radius: var(--rayon-vignette);
  }

  .tarif-ligne .prix {
    font-size: var(--taille-titre-carte);
  }
}

.tarif-ligne small {
  font-size: var(--taille-mini);
  color: var(--couleur-encre-douce);
}

/* Duo texte et photo. */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--couleur-base);
  border-radius: var(--rayon-bloc);
  overflow: hidden;
  box-shadow: var(--ombre-moyenne);
  align-items: stretch;
}

.duo .media img,
.duo .media .emplacement {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: var(--format-portrait);
}

.duo .corps {
  padding: var(--espace-bloc);
  align-self: center;
}

.duo .corps .texte {
  color: var(--couleur-encre-douce);
}

/* Duo sans photo. Avec du contenu (riche) : une carte à deux colonnes, la tête à gauche, la liste ou le texte à droite,
   pour occuper la largeur au lieu d'empiler tout à gauche. Sans contenu : la tête seule, centrée (règles de .tete). */
.duo.sans-media {
  grid-template-columns: 1fr;
}

.duo.sans-media:not(.riche) {
  background: none;
  box-shadow: none;
}

.duo.sans-media:not(.riche) .corps {
  padding: 0;
}

.duo.sans-media.riche .corps {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--espace-colonnes);
  align-items: start;
  padding: var(--espace-bloc-ample);
}

.duo.sans-media.riche .duo-tete h2::after {
  margin-inline: 0;
}

.duo.sans-media.riche .duo-suite > :last-child {
  margin-bottom: 0;
}

/* Petite photo sous le titre d'un duo (vignette, Léa, 22 octobre 2026, page Toussaint) : elle illustre sans prendre une
   colonne. Sur ordinateur, le texte se centre en hauteur face au titre et à la photo, pour que les deux colonnes
   s'équilibrent ; sur une colonne, la photo prend toute la largeur du texte, en bandeau (même jour, Léa). */
.duo-vignette img {
  display: block;
  width: var(--composant-duo-vignette);
  max-width: 100%;
  aspect-ratio: var(--format-carte);
  object-fit: cover;
  border-radius: var(--rayon-vignette);
  margin-top: var(--espace-pas-4);
}

.duo.sans-media.riche.avec-vignette .corps {
  align-items: center;
}

/* Photo entière centrée sous un duo (photo_dessous : un plan, une carte ; page Peoc'h, 23 octobre 2026). */
.duo-dessous {
  text-align: center;
  margin-top: var(--espace-pas-4);
}

.duo-dessous img {
  display: block;
  margin-inline: auto;
  width: 100%;
  max-width: var(--composant-duo-photo-dessous);
  height: auto;
  border-radius: var(--rayon-vignette);
  box-shadow: var(--ombre-douce);
}

/* Galerie à trois photos par ligne sur ordinateur, dans une colonne de lecture (colonnes: 3, page Peoc'h). */
@container site (min-width: 1040px) {
  .galerie.trois {
    grid-template-columns: repeat(auto-fit, calc((100% - 2 * var(--espace-pas-3)) / 3));
    max-width: var(--espace-largeur-recit);
    margin-inline: auto;
  }
}

@container site (max-width: 1040px) {
  /* Pas plus large que le texte, limité à la largeur de lecture (tablette). */
  .duo-vignette img {
    width: 100%;
    max-width: var(--typo-largeur-lecture);
    aspect-ratio: var(--format-bandeau-mobile);
    margin-block: var(--espace-pas-3);
  }
}

/* Note sous une tête centrée (duo sans contenu) : centrée elle aussi. */
.duo.sans-media:not(.riche) .note {
  text-align: center;
  margin-inline: auto;
}

/* Sous la carte du duo, dans la même section : l'avis, les avis Google ou les cartes des réalisations. */
.duo + .avis,
.duo + .avis-google,
.duo + .grille,
.macro + .avis,
.macro + .avis-google,
.macro + .grille,
.avis + .avis-google,
.avis-google + .grille {
  margin-top: var(--espace-pas-5);
}

/* Ligne des titres de Léa (diplômes, années), sous son texte. */
.titres {
  font-size: var(--taille-secondaire);
}

/* Avis. */
.avis {
  background: var(--couleur-base);
  border-radius: var(--rayon-bloc);
  box-shadow: var(--ombre-moyenne);
  padding: var(--espace-bloc-ample);
  max-width: var(--espace-largeur-etroite);
  margin-inline: auto;
  text-align: center;
}

/* Un avis suivi de cartes (réalisations racontées) : on les sépare. */
.avis + .grille {
  margin-top: var(--espace-pas-5);
}

.avis p {
  margin-inline: auto;
}

.avis blockquote {
  white-space: pre-line;
  margin: 0;
  font-family: var(--police-titres);
  font-weight: var(--graisse-titres);
  font-style: italic;
  font-size: var(--taille-citation);
  line-height: var(--typo-interligne-citation);
}

.avis cite {
  display: block;
  font-family: var(--police-texte);
  font-style: normal;
  font-size: var(--taille-mini);
  color: var(--couleur-encre-douce);
  margin-top: var(--espace-pas-3);
  letter-spacing: var(--typo-interlettrage-signature);
  text-transform: uppercase;
}

.etoiles {
  color: var(--couleur-abricot);
  letter-spacing: var(--typo-interlettrage-etoiles);
  margin-top: var(--espace-pas-2);
}

/* Questions fréquentes : une seule colonne centrée, lue de haut en bas (deux colonnes donnaient des hauteurs inégales). */
.faq {
  display: grid;
  gap: var(--espace-pas-2);
  max-width: var(--espace-largeur-recit);
  margin-inline: auto;
}

.faq details {
  background: var(--couleur-base);
  border-radius: var(--rayon-vignette);
  box-shadow: var(--ombre-douce);
  padding: var(--espace-pas-3) var(--espace-pas-4);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--espace-paragraphe);
  align-items: flex-start;
  font-family: var(--police-titres);
  font-size: var(--taille-titre-carte);
  line-height: var(--typo-interligne-serre);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  color: var(--couleur-marque);
  font-family: var(--police-texte);
  flex: none;
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq details p {
  max-width: none;
  font-size: var(--taille-secondaire);
  color: var(--couleur-encre-douce);
  margin: var(--espace-pas-2) 0 0;
}

/* Lien après une réponse (page voisine, section, action). */
.faq .faq-lien {
  margin: var(--espace-pas-2) 0 0;
}

/* « Pour aller plus loin » sous les questions, dans la même section : intitulé centré, cartes centrées. */
.faq + .titre-bloc,
.faq + .a-lire-vide {
  margin-top: var(--espace-bloc);
}

.faq + .titre-bloc,
.a-lire-vide {
  text-align: center;
  margin-inline: auto;
}

.faq + .titre-bloc {
  margin-bottom: var(--espace-pas-4);
}

/* Action finale. */
.final {
  background: var(--couleur-teinte);
  border-radius: var(--rayon-bloc);
  padding: var(--espace-bloc-ample);
  text-align: center;
}

.final p {
  margin-inline: auto;
}

.final .lead {
  margin-top: var(--espace-pas-2);
}

.final .btns {
  justify-content: center;
}

/* Bascules. */
@container site (max-width: 1040px) {
  .grille.g4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grille.g2,
  .entete-page,
  .duo,
  .duo.sans-media.riche .corps {
    grid-template-columns: 1fr;
  }

  .duo.sans-media.riche .corps {
    gap: 0;
    padding: var(--espace-bloc);
  }

  /* Tablette et petit portable (une colonne) : la photo d'un duo en paysage, cadrée vers le haut, au lieu d'un portrait
     plus haut que l'écran (audit du 8 octobre 2026, page Qui suis-je). */
  .duo .media img,
  .duo .media .emplacement {
    aspect-ratio: var(--format-paysage);
    object-position: var(--composant-duo-cadrage);
  }
}

@container site (max-width: 780px) {
  /* Sur téléphone, la carte garde peu de marge sur les côtés : le texte garde sa largeur. */
  .duo.sans-media.riche .corps {
    padding: var(--espace-pas-4) var(--espace-pas-3);
  }

  .entete-page {
    gap: var(--espace-pas-5);
  }

  /* La photo d'en-tête, carrée sur téléphone : plus haute que le 4/3 d'avant (Léa, 12 octobre 2026), moins que le
     portrait de l'ordinateur. Une photo en paysage (format_photo: carte) garde son 4/3. */
  .entete-page .photo > img,
  .entete-page .photo > .emplacement {
    aspect-ratio: var(--format-entete-mobile);
  }

  .duo .media {
    order: -1;
  }

  /* En paysage, la photo d'un duo (souvent un portrait de Léa) est cadrée vers le haut : le visage reste entier. */
  .duo .media img,
  .duo .media .emplacement {
    aspect-ratio: var(--format-paysage);
    object-position: var(--composant-duo-cadrage);
  }

  .galerie {
    grid-template-columns: repeat(auto-fit, calc((100% - 2 * var(--espace-pas-3)) / 3));
  }
}

@container site (max-width: 780px) {
  /* Têtes de section plus serrées : le trait reste, l'air diminue. */
  .tete,
  .duo.sans-media:not(.riche) .duo-tete {
    margin-bottom: var(--espace-pas-4);
  }

  .tete h2::after,
  .duo.sans-media .duo-tete h2::after {
    margin-top: var(--espace-pas-3);
  }

  .tete .lead,
  .duo.sans-media:not(.riche) .duo-tete .lead {
    margin-top: var(--espace-pas-3);
  }

  .grille.g3,
  .galerie {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .carte-plan img,
  .carte-plan .emplacement {
    aspect-ratio: var(--format-bandeau-mobile);
  }

  .btns {
    gap: var(--espace-pas-2);
  }

  .btns .btn {
    flex: 1 1 var(--composant-colonne-occasion);
    text-align: center;
  }

  /* Offres : une par ligne ; defile_mobile : côte à côte, à faire défiler au pouce. */
  .grille:has(> .offre) {
    grid-template-columns: 1fr;
  }

  /* Défilé au pouce : calé au début (centré, le début d'un défilé plus large que l'écran serait inaccessible). */
  .grille.defile-mobile {
    grid-template-columns: none;
    justify-content: start;
    grid-auto-flow: column;
    grid-auto-columns: var(--composant-defile-offre-mobile);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--espace-marge-laterale));
    padding: 0 var(--espace-marge-laterale) var(--espace-pas-2);
    scroll-padding-inline: var(--espace-marge-laterale);
  }

  .grille.defile-mobile > * {
    scroll-snap-align: start;
  }

  /* mobile_2 : des cartes courtes (un titre, un prix, une ligne), deux par ligne. */
  .grille.mobile-2:has(> .offre) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espace-pas-2);
  }

  .grille.mobile-2 > .offre {
    padding: var(--espace-pas-3);
  }

  /* Pour aller plus loin : une liste compacte, vignette carrée à gauche, étiquette, titre et résumé à droite. */
  .grille.a-lire {
    grid-template-columns: 1fr;
    gap: var(--espace-pas-3);
  }

  .a-lire .carte {
    display: grid;
    grid-template-columns: var(--composant-lire-vignette-mobile) minmax(0, 1fr);
  }

  /* La vignette occupe toute la hauteur de la carte, au moins un carré. */
  .a-lire .carte img,
  .a-lire .carte .emplacement {
    align-self: stretch;
    aspect-ratio: auto;
    height: 100%;
    min-height: var(--composant-lire-vignette-mobile);
  }

  .a-lire .carte .pad {
    padding: var(--espace-pas-3);
  }

  .a-lire .carte h3 {
    margin-top: var(--espace-pas-1);
  }

  .a-lire .carte p {
    font-size: var(--taille-secondaire);
  }
}

@container site (max-width: 560px) {
  /* La vignette reste posée sur la photo, plus compacte. */
  .flottant {
    inset-inline: var(--espace-pas-2);
    bottom: var(--espace-pas-2);
    padding: var(--espace-pas-2);
  }

  .flottant img,
  .flottant .emplacement {
    width: var(--composant-flottant-vignette-mobile);
    height: var(--composant-flottant-vignette-mobile);
  }

  .entete-page .photo {
    border-radius: var(--rayon-carte);
  }

  .btns .btn {
    flex-basis: 100%;
  }

  .grille.defile-mobile {
    margin-inline: calc(-1 * var(--espace-marge-laterale-mobile));
    padding-inline: var(--espace-marge-laterale-mobile);
    scroll-padding-inline: var(--espace-marge-laterale-mobile);
  }
}

/* Tableau comparatif (bloc tableau) : une colonne de lecture, lignes séparées par un filet ; sur mobile, une carte par ligne. */
.tableau-cadre {
  max-width: var(--espace-largeur-etroite);
  margin-inline: auto;
}

.tableau {
  width: 100%;
  border-collapse: collapse;
  background: var(--couleur-base);
  border: var(--trait-filet) solid var(--couleur-filet);
  border-radius: var(--rayon-carte);
  overflow: hidden;
  font-size: var(--taille-secondaire);
}

.tableau th,
.tableau td {
  padding: var(--espace-pas-3);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--trait-filet) solid var(--couleur-filet);
}

.tableau thead th {
  background: var(--couleur-teinte-2);
  font-size: var(--taille-mini);
  text-transform: uppercase;
  letter-spacing: var(--typo-interlettrage-etiquette);
  color: var(--couleur-encre-douce);
}

.tableau tbody th {
  font-family: var(--police-titres);
  font-size: var(--taille-titre-carte);
  font-weight: normal;
}

.tableau tbody tr:last-child th,
.tableau tbody tr:last-child td {
  border-bottom: 0;
}

@container site (max-width: 780px) {
  .tableau thead {
    display: none;
  }

  .tableau,
  .tableau tbody,
  .tableau tr,
  .tableau th,
  .tableau td {
    display: block;
    width: 100%;
  }

  .tableau tr {
    border-bottom: var(--trait-filet) solid var(--couleur-filet);
    padding-block: var(--espace-pas-2);
  }

  .tableau th,
  .tableau td {
    border-bottom: 0;
    padding-block: var(--espace-pas-1);
  }

  .tableau td::before {
    content: attr(data-colonne) " : ";
    font-weight: var(--graisse-gras);
    color: var(--couleur-encre-douce);
  }

  /* Cellule vide : pas d'étiquette seule (« Bon à savoir : » sans rien derrière). */
  .tableau td:empty {
    display: none;
  }
}

/* Tableau en groupes (champ groupes) : un H3 et un tableau par groupe. Un groupe replie_mobile se replie sur téléphone
   derrière un bouton, sans script ; le contenu reste dans la page. Sur ordinateur, tout est affiché, sans bouton. */
.tableau-groupe h3 {
  margin: 0 0 var(--espace-pas-3);
}

.tableau-groupe h3 + p {
  margin: 0 0 var(--espace-pas-3);
  max-width: none;
}

.tableau-groupe ~ .tableau-groupe {
  margin-top: var(--espace-pas-5);
}

.tableau-voir {
  display: none;
}

@container site (max-width: 780px) {
  .tableau-voir {
    display: block;
    width: 100%;
    margin-top: var(--espace-pas-4);
    text-align: center;
    cursor: pointer;
  }

  .tableau-deplier:not(:checked) + .tableau-voir + .replie-mobile {
    display: none;
  }

  /* Une fois ouvert, le bouton laisse la place au groupe. */
  .tableau-deplier:checked + .tableau-voir {
    display: none;
  }

  .tableau-deplier:focus-visible + .tableau-voir {
    outline: var(--focus-epaisseur) solid var(--couleur-accent);
    outline-offset: var(--focus-decalage);
  }
}

/* Plan ou document dans un duo (photo_entiere) : affiché en entier, sans recadrage, à agrandir d'un appui. */
.duo .media-entiere img {
  aspect-ratio: auto;
  object-fit: contain;
  height: auto;
  cursor: zoom-in;
}

/* Mention en petit juste sous les cartes d'offres (bloc offres, champ mention), par exemple « Photos non contractuelles »
   (page abonnement, 12 octobre 2026). */
.mention-offres {
  font-size: var(--taille-mini);
  text-align: center;
  max-width: none;
  margin: var(--espace-pas-2) 0 0;
}

/* 10-pages.css */
/* Blocs des pages accueil, deuil et mariage, repris de leurs maquettes.
   Uniquement des variables générées depuis data/design.json. */

/* Teintes d'étiquette et d'encart. */
.chip.neutre {
  background: var(--couleur-neutre);
  color: var(--couleur-neutre-fonce);
}

.chip.rose {
  background: var(--couleur-rose-teinte);
  color: var(--couleur-rose-fonce);
}

.chip.abricot {
  background: var(--couleur-abricot-teinte);
  color: var(--couleur-abricot-fonce);
}

.teinte {
  background: var(--couleur-teinte-2);
}

/* Pages de deuil : sections plus aérées. */
.ambiance-deuil .sec {
  padding-block: var(--espace-section-deuil);
}

/* Repère d'un lien ou d'une page manquante : site de test uniquement. */
.manquant,
.manquant small {
  color: var(--couleur-encre-douce);
}

.btn.manquant {
  cursor: not-allowed;
  background: var(--couleur-filet);
  color: var(--couleur-encre-douce);
  box-shadow: none;
}

/* En-tête de page : compléments. */
.entete-page .complement {
  color: var(--couleur-encre-douce);
  margin-top: var(--espace-paragraphe);
}

.note-avis {
  display: flex;
  align-items: center;
  gap: var(--espace-pas-1);
  flex-wrap: wrap;
  margin-top: var(--espace-pas-3);
}

.note-avis .etoiles {
  margin: 0;
}

.stats {
  display: flex;
  gap: var(--espace-pas-5);
  flex-wrap: wrap;
  margin-top: var(--espace-pas-5);
}

.stats .v {
  font-family: var(--police-titres);
  font-size: var(--taille-statistique);
  color: var(--couleur-accent);
  line-height: 1;
}

/* Aiguillage vers les pages centrales (accueil, bloc univers) : une tuile par univers, cliquable en entier.
   Sur ordinateur, trois cartes par ligne, photo en paysage ; sur mobile, deux par ligne, photo carrée au-dessus. */
.aiguillage {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: grid;
  /* Trois tuiles par ligne (audit du 8 octobre 2026 : à cinq de front, titres sur trois lignes et prix illisibles). */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espace-pas-4);
}

.aiguillage > li {
  margin: 0;
  min-width: 0;
}

.tuile {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--couleur-base);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-douce);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: var(--composant-duree-transition);
}

a.tuile:hover {
  color: inherit;
  box-shadow: var(--ombre-moyenne);
  transform: translateY(var(--composant-carte-survol));
}

.tuile img,
.tuile .emplacement {
  display: block;
  width: 100%;
  aspect-ratio: var(--format-paysage);
  object-fit: cover;
}

.tuile-corps {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--espace-pas-1);
  padding: var(--espace-pas-3) var(--espace-pas-4) var(--espace-pas-4);
}

.tuile-corps h3 {
  margin: 0;
}

.tuile-corps .muted {
  font-size: var(--taille-secondaire);
}

.tuile-prix {
  color: var(--couleur-accent);
  font-family: var(--police-titres);
  font-size: var(--taille-montant-compo);
  line-height: var(--typo-interligne-serre);
}

/* Ce que le visiteur trouvera en cliquant : en bas de la tuile, un lien sobre (retour de Léa du 8 octobre 2026),
   souligné seulement au survol de la tuile. */
.tuile-lien {
  margin-top: auto;
  padding-top: var(--espace-pas-2);
  color: var(--couleur-accent-survol);
  font-size: var(--taille-secondaire);
}

a.tuile:hover .tuile-lien {
  text-decoration: underline;
  text-underline-offset: var(--focus-decalage);
}

/* Duo : variantes. */
.duo.media-droite .media {
  order: 2;
}

.duo .duo-suite > ul,
.duo .corps .texte {
  color: var(--couleur-encre-douce);
}

.mini-offres {
  gap: var(--espace-pas-2);
  margin-top: var(--espace-pas-3);
}

.duo .canaux {
  gap: var(--espace-pas-2);
  margin-top: var(--espace-paragraphe);
}

.lien-bas,
.duo .note {
  margin: var(--espace-pas-3) 0 0;
}

.rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espace-pas-3);
  margin-top: var(--espace-pas-4);
}

.rail img,
.rail .emplacement {
  width: 100%;
  aspect-ratio: var(--format-galerie);
  object-fit: cover;
  border-radius: var(--rayon-vignette);
  box-shadow: var(--ombre-douce);
}

.macro {
  background: var(--couleur-base);
  border-radius: var(--rayon-bloc);
  box-shadow: var(--ombre-moyenne);
  overflow: hidden;
}

.macro .duo {
  box-shadow: none;
  border-radius: 0;
}

.macro .interieur {
  padding: var(--espace-bloc);
  border-top: var(--trait-filet) solid var(--couleur-filet);
}

.titre-bloc {
  font-family: var(--police-titres);
  font-weight: var(--graisse-titres);
  line-height: var(--typo-interligne-titres);
  font-size: var(--taille-titre-bloc);
  margin-top: var(--espace-pas-2);
}

.plier {
  background: var(--couleur-base);
  border-radius: var(--rayon-vignette);
  box-shadow: var(--ombre-douce);
  padding: var(--espace-pas-3) var(--espace-pas-4);
  margin-bottom: var(--espace-pas-2);
}

.plier summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  font-family: var(--police-titres);
  font-size: var(--taille-titre-carte);
}

.plier summary::-webkit-details-marker {
  display: none;
}

.plier summary::after {
  content: "+";
  color: var(--couleur-marque);
  font-family: var(--police-texte);
}

.plier[open] summary::after {
  content: "\2212";
}

.plier p {
  font-size: var(--taille-secondaire);
  color: var(--couleur-encre-douce);
  margin: var(--espace-pas-2) 0 0;
}

.inscription {
  margin-top: var(--espace-pas-3);
}

.inscription .muted {
  margin-top: var(--espace-pas-2);
}

/* Offres : variantes. La carte mise en avant porte un filet en haut. */
.offre.en-avant {
  border-top: var(--trait-accent) solid var(--couleur-marque);
}

.ambiance-mariage .offre.en-avant {
  border-top-color: var(--couleur-rose);
}

.petite-liste {
  margin: var(--espace-pas-1) 0 0;
  font-size: var(--taille-secondaire);
}

.encart {
  background: var(--couleur-teinte);
  border-radius: var(--rayon-carte);
  padding: var(--espace-pas-3) var(--espace-pas-4);
  margin-top: var(--espace-pas-4);
}

.encart.rose {
  background: var(--couleur-rose-teinte);
}

.encart p {
  margin: 0;
  max-width: none;
}

.encart strong {
  color: var(--couleur-encre);
}

.sec .wrap > .note {
  margin-top: var(--espace-pas-3);
}

/* Sous un contenu centré (étapes, cartes, tuiles), les éléments posés seuls dans la section sont centrés eux aussi :
   encart, note, lien, boutons, repères du site de test. Le regard reste dans l'axe. */
/* L'encart se resserre sur son texte et le centre, dans une colonne étroite (Léa, 13 octobre 2026 : « centre plus »,
   « ça doit prendre moins de place en largeur ») ; le lien du bas suit la même largeur. */
.sec .wrap > .encart {
  width: fit-content;
  max-width: var(--typo-largeur-lecture);
  margin-inline: auto;
  /* Plus d'air avec le bloc au-dessus (Léa, 13 octobre 2026). */
  margin-top: var(--espace-bloc);
  text-align: center;
}

.sec .wrap > .note,
.sec .wrap > .lien-bas,
.sec .wrap > .manquant {
  text-align: center;
  margin-inline: auto;
}

.sec .wrap > .lien-bas {
  max-width: var(--typo-largeur-lecture);
}

/* Sur téléphone, l'encart reste calé à gauche, comme les têtes de section : un texte centré sur plusieurs lignes étroites
   se lit mal. */
@container site (max-width: 780px) {
  .sec .wrap > .encart {
    text-align: left;
  }
}

.sec .wrap > .btns {
  justify-content: center;
}

/* Encart sous des étapes numérotées : bien détaché de la dernière étape (Léa, 16 octobre 2026). */
.sec .wrap > .etapes + .encart {
  margin-top: var(--espace-encart-apres-etapes);
}

.sec .wrap > .tete + .encart {
  margin-top: 0;
  margin-bottom: var(--espace-pas-5);
}

/* Étapes numérotées : une frise. Les pastilles sont reliées par un filet, de la première à la dernière.
   Dans une colonne (duo, mobile), la frise descend ; seule dans sa section sur ordinateur, elle se lit de gauche à droite. */
.etapes {
  list-style: none;
  padding: 0;
  margin: var(--espace-pas-4) 0;
  max-width: none;
  display: grid;
  gap: var(--espace-pas-4);
}

.etapes li {
  position: relative;
  display: flex;
  gap: var(--espace-pas-3);
  align-items: flex-start;
  margin: 0;
}

.etapes li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--composant-etape-pastille) / 2 - var(--trait-repere) / 2);
  top: calc(var(--composant-etape-pastille) + var(--espace-pas-1));
  bottom: calc(-1 * var(--espace-pas-4) + var(--espace-pas-1));
  width: var(--trait-repere);
  background: var(--couleur-filet);
}

.etapes-boites li:not(:last-child)::after {
  display: none;
}

.etapes strong {
  display: block;
  padding-top: calc((var(--composant-etape-pastille) - var(--taille-texte) * var(--typo-interligne-texte)) / 2);
}

.etapes-boites li {
  background: var(--couleur-base);
  border-radius: var(--rayon-vignette);
  box-shadow: var(--ombre-douce);
  padding: var(--espace-pas-3) var(--espace-pas-4);
}

.etapes .n {
  flex: none;
  width: var(--composant-etape-pastille);
  height: var(--composant-etape-pastille);
  border-radius: var(--rayon-pilule);
  background: var(--couleur-base);
  box-shadow: inset 0 0 0 var(--trait-repere) var(--couleur-marque);
  color: var(--couleur-accent);
  font-family: var(--police-titres);
  font-size: var(--taille-chiffre-etape);
  display: grid;
  place-items: center;
}

/* Deuil : pas de couleur d'accent ; mariage : le rose de l'univers. */
.ambiance-deuil .etapes .n {
  color: var(--couleur-encre);
  box-shadow: inset 0 0 0 var(--trait-repere) var(--couleur-filet);
}

.ambiance-mariage .etapes .n {
  color: var(--couleur-rose-fonce);
  box-shadow: inset 0 0 0 var(--trait-repere) var(--couleur-rose);
}

/* Frise seule dans sa section, sur ordinateur : les étapes côte à côte, centrées, reliées à l'horizontale. */
@container site (min-width: 780px) {
  .sec .wrap > .etapes {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--espace-colonnes);
    margin-block: var(--espace-pas-5);
  }

  .sec .wrap > .etapes li {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .sec .wrap > .etapes li:not(:last-child)::after {
    top: calc(var(--composant-etape-pastille) / 2 - var(--trait-repere) / 2);
    bottom: auto;
    left: calc(50% + var(--composant-etape-pastille) / 2 + var(--espace-pas-2));
    width: calc(100% + var(--espace-colonnes) - var(--composant-etape-pastille) - 2 * var(--espace-pas-2));
    height: var(--trait-repere);
  }

  .sec .wrap > .etapes strong {
    padding-top: 0;
  }

  .sec .wrap > .etapes p {
    margin-inline: auto;
  }

  .sec .wrap > .etapes-boites li {
    padding: var(--espace-pas-4);
  }
}

/* Un peu d'air entre le titre d'une étape et son texte (Léa, 22 octobre 2026 : « c'est un peu serré »). */
.etapes p {
  margin: var(--espace-pas-2) 0 0;
  font-size: var(--taille-secondaire);
  color: var(--couleur-encre-douce);
}

.apres-etapes {
  margin-top: var(--espace-pas-4);
}

/* Les boutons posés juste sous la frise s'en détachent autant qu'un encart (22 octobre 2026, même retour de Léa). */
.etapes + .apres-etapes {
  margin-top: var(--espace-encart-apres-etapes);
}

/* Un encart posé sous une rangée de boutons : de l'air, pour ne pas coller aux boutons (22 octobre 2026). */
.sec .wrap > .btns + .encart {
  margin-top: var(--espace-bloc-ample);
}

/* Titre des étapes sous les offres (bloc etapes), centré au-dessus de la frise. */
.titre-etapes {
  margin-top: var(--espace-bloc);
  text-align: center;
}

/* Cartes. */
.carte {
  display: block;
  background: var(--couleur-base);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-douce);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: var(--composant-duree-transition);
}

a.carte:hover {
  color: inherit;
  box-shadow: var(--ombre-moyenne);
  transform: translateY(var(--composant-carte-survol));
}

.carte img,
.carte .emplacement {
  width: 100%;
  aspect-ratio: var(--format-carte);
  object-fit: cover;
}

.carte .pad {
  padding: var(--espace-pas-4);
}

.carte h3 {
  margin: var(--espace-pas-2) 0 var(--espace-pas-1);
}

.carte p {
  margin: 0;
}

/* Critères en liste (duo), bande de photos. */

.perso-liste {
  display: grid;
  gap: var(--espace-paragraphe);
}

.perso-liste > div {
  padding-left: var(--espace-pas-4);
  border-left: var(--trait-repere) solid var(--couleur-marque);
}

.perso-liste strong {
  display: block;
  font-family: var(--police-titres);
  font-size: var(--taille-titre-carte);
  font-weight: var(--graisse-texte);
  margin-bottom: var(--espace-pas-1);
}

.perso-liste .muted {
  display: block;
}

.bande {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--espace-pas-3);
  margin-top: var(--espace-section);
}

.bande img,
.bande .emplacement {
  width: 100%;
  aspect-ratio: var(--format-portrait);
  object-fit: cover;
  border-radius: var(--rayon-vignette);
}

/* Liste cochée. */

.liste-coche {
  list-style: none;
  padding: 0;
}

.liste-coche li {
  padding-left: var(--espace-pas-5);
  position: relative;
}

.liste-coche li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--couleur-accent);
  font-weight: var(--graisse-gras);
}

/* Bascules. */
@container site (max-width: 780px) {
  /* Pastilles d'étapes plus petites : tous les calculs de la frise suivent. */
  /* Étapes plus espacées sur téléphone (Léa, 22 octobre 2026 : « c'est un peu serré ») ; le filet suit l'écart. */
  .etapes {
    --composant-etape-pastille: var(--composant-etape-pastille-mobile);
    gap: var(--espace-pas-5);
  }

  .etapes li:not(:last-child)::after {
    bottom: calc(-1 * var(--espace-pas-5) + var(--espace-pas-1));
  }

  /* Mobile épuré (retour de Léa du 8 octobre 2026 : pas deux colonnes dans un même encart) : deux encarts par ligne,
     la photo carrée au-dessus, l'intention et le prix en dessous. L'encart entier est le lien : la phrase et le libellé
     du lien restent sur ordinateur. */
  .aiguillage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espace-pas-3);
  }

  .tuile-corps .muted,
  .tuile-lien {
    display: none;
  }

  .tuile img,
  .tuile .emplacement {
    aspect-ratio: var(--format-vignette-mobile);
  }

  .tuile .emplacement {
    overflow: hidden;
    font-size: 0;
  }

  .tuile-corps {
    padding: var(--espace-pas-2) var(--espace-pas-2) var(--espace-pas-3);
  }

  .tuile-corps h3 {
    font-size: var(--taille-titre-carte);
  }

  .tuile-prix {
    font-size: var(--taille-secondaire);
  }

}

@container site (max-width: 1040px) {

  .duo.media-droite .media {
    order: -1;
  }
}

@container site (max-width: 900px) {

  .bande {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container site (max-width: 560px) {
  .rail {
    grid-template-columns: repeat(2, 1fr);
  }

}

/* Brouillon (page ou bloc marqué brouillon) : bandeau du site de test, jamais en production. */
.repere-brouillon {
  max-width: var(--espace-largeur-max);
  margin: var(--espace-pas-3) auto;
  padding: var(--espace-pas-2) var(--espace-pas-3);
  border: var(--trait-filet) dashed var(--couleur-accent);
  border-radius: var(--rayon-vignette);
  color: var(--couleur-accent);
  font-size: var(--taille-secondaire);
  text-align: center;
}

@container site (max-width: 900px) {
  .aiguillage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Raccourcis sous le titre de l'accueil (audit du 8 octobre 2026) : chaque univers et son prix de départ, dès le
   premier écran, avant les tuiles. */
.raccourcis {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-pas-2);
  list-style: none;
  margin: var(--espace-pas-4) 0 0;
  padding: 0;
}

.raccourcis li {
  margin: 0;
}

.raccourcis a {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-pas-1);
  min-height: var(--composant-zone-tactile);
  padding: 0 var(--espace-pas-3);
  border: var(--trait-filet) solid var(--couleur-filet);
  border-radius: var(--rayon-pilule);
  background: var(--couleur-base);
  color: var(--couleur-encre);
  font-size: var(--taille-secondaire);
  font-weight: var(--graisse-gras);
  text-decoration: none;
}

.raccourcis a:hover {
  border-color: var(--couleur-accent);
}

.raccourcis span {
  color: var(--couleur-accent-survol);
  font-weight: var(--graisse-texte);
}

/* 11-plantes-realisations.css */
/* Blocs de la page plantes et des réalisations, repris de leurs maquettes.
   Uniquement des variables générées depuis data/design.json. */

/* En-tête de page : plusieurs étiquettes, photo plus large que haute. */
.etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-pas-1);
}

.etiquettes + h1 {
  margin-block: var(--espace-pas-3);
}

.entete-page .photo.format-carte > img,
.entete-page .photo.format-carte > .emplacement {
  aspect-ratio: var(--format-carte);
}

/* Critères dans un duo. */
.criteres {
  margin-block: var(--espace-pas-4);
}

/* Gamme de produits : trois cartes par rangée (deux avec .deux) ; une rangée incomplète est centrée. */
.gamme {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espace-pas-4);
}

.gamme > * {
  min-width: 0;
  flex: 0 1 calc((100% - 2 * var(--espace-pas-4)) / 3);
}

.gamme.deux > * {
  flex-basis: calc((100% - var(--espace-pas-4)) / 2);
}

/* Quatre cartes sur une ligne, sur ordinateur seulement (colonnes: 4, étapes de Peoc'h, 23 octobre 2026). */
@container site (min-width: 1040px) {
  .gamme.quatre > * {
    flex-basis: calc((100% - 3 * var(--espace-pas-4)) / 4);
  }
}

.gamme .carte h3 {
  margin-top: 0;
}

.gamme .tarif {
  display: block;
  font-family: var(--police-titres);
  font-size: var(--taille-titre-carte);
  color: var(--couleur-accent);
  margin-bottom: var(--espace-pas-1);
}

/* Encart d'appel : le texte prend la place, les boutons se calent à droite (dessous sur mobile). */
.appel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--espace-pas-4) var(--espace-colonnes);
  align-items: center;
  background: var(--couleur-teinte);
  border-radius: var(--rayon-carte);
  padding: var(--espace-pas-4);
  margin-top: var(--espace-pas-4);
}

/* Seul dans sa section (bloc appel) : un vrai bandeau. */
.wrap > .appel:only-child {
  border-radius: var(--rayon-bloc);
  padding: var(--espace-bloc-ample);
}

.appel.rose {
  background: var(--couleur-rose-teinte);
}

.appel.abricot {
  background: var(--couleur-abricot-teinte);
}

.appel.neutre {
  background: var(--couleur-neutre);
}

.wrap > .appel:first-child {
  margin-top: 0;
}

.appel p {
  margin: var(--espace-pas-1) 0 0;
  max-width: none;
}

.appel h2 + p {
  margin-top: var(--espace-pas-3);
}

.appel .btns {
  margin-top: 0;
}

/* Façons de commander (bloc etapes, champ lignes) : une carte chacune, côte à côte, titre, texte, bouton calé en bas. */
.etapes + .lieux {
  margin-top: var(--espace-bloc);
}

.lieux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--composant-colonne-occasion), 1fr));
  gap: var(--espace-pas-4);
}

.lieu {
  display: flex;
  flex-direction: column;
  gap: var(--espace-pas-2);
  background: var(--couleur-base);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-douce);
  padding: var(--espace-pas-4);
}

.lieu h3 {
  margin: 0;
  font-size: var(--taille-titre-carte);
}

.lieu p {
  margin: 0 0 var(--espace-pas-1);
}

.lieu p:last-child {
  margin-bottom: 0;
}

.lieu .btns {
  margin-top: auto;
  padding-top: var(--espace-pas-2);
}

/* Chiffres clés en cartes. */
.chiffre {
  background: var(--couleur-base);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-douce);
  padding: var(--espace-pas-4);
  text-align: center;
}

.chiffre .v {
  font-family: var(--police-titres);
  font-size: var(--taille-statistique);
  color: var(--couleur-accent);
  line-height: 1;
}

.chiffre p {
  margin: var(--espace-pas-1) auto 0;
}

/* Récit en colonne étroite : titres et texte sur toute la colonne, centrée dans la page. */
.wrap.recit {
  max-width: var(--espace-largeur-etroite);
}

.recit p,
.recit ul {
  max-width: none;
}

.recit .texte {
  color: var(--couleur-encre-douce);
}

.recit .texte + h2 {
  margin-top: var(--espace-bloc);
}

.recit h2 {
  margin-bottom: var(--espace-pas-3);
}

/* Bascules. */
@container site (max-width: 1040px) {
  .gamme > * {
    flex-basis: calc((100% - var(--espace-pas-4)) / 2);
  }
}

@container site (max-width: 900px) {
  /* Une façon de commander par carte serrée, les unes sous les autres. */
  .etapes + .lieux {
    margin-top: var(--espace-pas-4);
  }

  .lieux {
    gap: var(--espace-pas-2);
  }

  .lieu {
    gap: var(--espace-pas-1);
    padding: var(--espace-pas-3) var(--espace-pas-4);
  }
}

/* defile_mobile : les cartes côte à côte, à faire défiler au pouce (comme .grille.defile-mobile, 09-blocs.css). */
@container site (max-width: 780px) {
  .appel {
    grid-template-columns: 1fr;
  }

  .gamme.defile-mobile {
    display: grid;
    grid-template-columns: none;
    justify-content: start;
    grid-auto-flow: column;
    grid-auto-columns: var(--composant-defile-offre-mobile);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--espace-marge-laterale));
    padding: 0 var(--espace-marge-laterale) var(--espace-pas-2);
    scroll-padding-inline: var(--espace-marge-laterale);
  }

  .gamme.defile-mobile > * {
    scroll-snap-align: start;
  }
}

@container site (max-width: 560px) {
  .gamme > *,
  .gamme.deux > * {
    flex-basis: 100%;
  }

  .gamme.defile-mobile {
    grid-template-columns: none;
    margin-inline: calc(-1 * var(--espace-marge-laterale-mobile));
    padding-inline: var(--espace-marge-laterale-mobile);
    scroll-padding-inline: var(--espace-marge-laterale-mobile);
  }
}

/* 12-visionneuse.css */
/* Visionneuse de photos, reprise des maquettes. Script : assets/js/visionneuse.js. */

.agrandissable {
  cursor: zoom-in;
}

.visionneuse {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  padding: var(--espace-bloc-ample);
  background: color-mix(in srgb, var(--couleur-encre) var(--composant-visionneuse-opacite), transparent);
  color: var(--couleur-base);
}

.visionneuse[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.visionneuse::backdrop {
  background: transparent;
}

.visionneuse figure {
  margin: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--espace-pas-2);
}

.visionneuse img {
  max-height: var(--composant-visionneuse-hauteur);
  max-width: 100%;
  width: auto;
  height: auto;
  margin-inline: auto;
  border-radius: var(--rayon-vignette);
  object-fit: contain;
}

.visionneuse figcaption {
  color: var(--couleur-filet);
  font-size: var(--taille-secondaire);
  text-align: center;
  max-width: var(--typo-largeur-lecture);
  margin-inline: auto;
}

.visionneuse button {
  position: absolute;
  width: var(--composant-visionneuse-bouton);
  height: var(--composant-visionneuse-bouton);
  border: 0;
  border-radius: var(--rayon-pilule);
  background: color-mix(in srgb, var(--couleur-base) var(--composant-visionneuse-bouton-fond), transparent);
  color: var(--couleur-base);
  font-size: var(--taille-burger);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.visionneuse button:hover,
.visionneuse button:focus-visible {
  background: color-mix(in srgb, var(--couleur-base) var(--composant-visionneuse-bouton-survol), transparent);
}

.visionneuse button[hidden] {
  display: none;
}

.visionneuse .prec {
  left: var(--espace-pas-3);
}

.visionneuse .suiv {
  right: var(--espace-pas-3);
}

/* Écran tactile : pas de flèches dans la visionneuse, on passe d'une photo à l'autre en glissant du doigt
   (assets/js/visionneuse.js) ; la croix reste (Léa, 12 octobre 2026). */
@media (hover: none) {
  .visionneuse .prec,
  .visionneuse .suiv {
    display: none;
  }
}

.visionneuse .fermer {
  top: var(--espace-pas-3);
  right: var(--espace-pas-3);
  font-size: var(--taille-titre-carte);
}

/* 13-realisations.css */
/* Réalisations sur les pages centrales : pastilles de style et défilé horizontal.
   Pensé d'abord pour le téléphone : on fait glisser au pouce, la page ne s'allonge pas. */

/* Pastilles de style : boutons radio cachés, étiquettes en pilules qui défilent sur le côté. */
.puces {
  border: 0;
  margin: 0 0 var(--espace-pas-3);
  padding: 0 0 var(--espace-pas-1);
  min-width: 0;
  display: flex;
  gap: var(--espace-pas-2);
  overflow-x: auto;
  scrollbar-width: none;
}

.puces label {
  flex: none;
  padding: var(--espace-pas-1) var(--espace-pas-3);
  border-radius: var(--rayon-pilule);
  background: var(--couleur-teinte);
  color: var(--couleur-encre);
  font-size: var(--taille-secondaire);
  white-space: nowrap;
  cursor: pointer;
}

.puces input:checked + label {
  background: var(--couleur-accent);
  color: var(--couleur-base);
}

.puces input:focus-visible + label {
  outline: var(--focus-epaisseur) solid var(--couleur-accent);
  outline-offset: var(--focus-decalage);
}

.puces .compte {
  font-size: var(--taille-mini);
}

/* Filtre : la pastille cochée (f1, f2…) ne laisse voir que les photos de ce style (s1, s2…). */
.defile-styles:has(.f1:checked) .defile > li:not(.s1),
.defile-styles:has(.f2:checked) .defile > li:not(.s2),
.defile-styles:has(.f3:checked) .defile > li:not(.s3),
.defile-styles:has(.f4:checked) .defile > li:not(.s4),
.defile-styles:has(.f5:checked) .defile > li:not(.s5),
.defile-styles:has(.f6:checked) .defile > li:not(.s6),
.defile-styles:has(.f7:checked) .defile > li:not(.s7),
.defile-styles:has(.f8:checked) .defile > li:not(.s8) {
  display: none;
}

/* Ligne de tête d'un défilé : les pastilles, puis « Voir les N photos en grand ». */
.defile-tete {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-pas-2) var(--espace-pas-4);
  align-items: center;
  justify-content: center;
  margin-bottom: var(--espace-pas-4);
}

.defile-tete .puces {
  flex: 0 1 auto;
  margin-bottom: 0;
}

/* Le bouton ouvre la visionneuse (script) : absent sans script. */
.voir-photos {
  display: none;
  border: 0;
  background: none;
  padding: 0;
  color: var(--couleur-accent);
  font: inherit;
  font-size: var(--taille-secondaire);
  font-weight: var(--graisse-gras);
  cursor: pointer;
}

.voir-photos::after {
  content: " \2192";
}

.js .voir-photos {
  display: inline-flex;
}

/* Défilé : une rangée de photos qui glisse sur le côté, aimantée photo par photo. */
.defile {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--espace-pas-2);
  max-width: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--composant-defile-colonne);
  gap: var(--espace-pas-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.defile li {
  margin: 0;
  scroll-snap-align: start;
}

/* Flèches d'une rangée qui dépasse (assets/js/defile.js) : sans elles, une souris ne voit pas les photos au-delà du
   bord (8 octobre 2026). Posées sur les bords des photos, rondes et blanches, centrées sur leur hauteur, à la place des
   flèches sous la rangée (Léa, 16 octobre 2026). Chacune n'apparaît que s'il reste des photos de son côté, et un fondu
   sur ce bord montre qu'il y a la suite. Écran tactile (téléphone, tablette), quelle que soit sa largeur : ni flèches
   ni fondu, on fait glisser au doigt (Léa, 12 octobre 2026). */
.defile-cadre {
  position: relative;
  min-width: 0;
}

.defile-fleche {
  display: none;
}

@media (hover: hover) {
  /* Plus de barre de défilement sous les photos : les flèches et le fondu la remplacent. */
  .defile-cadre .defile {
    padding-bottom: 0;
    scrollbar-width: none;
  }

  .defile-cadre .defile::-webkit-scrollbar {
    display: none;
  }

  .defile-cadre.suite-apres .defile {
    mask-image: linear-gradient(to right, var(--couleur-encre) calc(100% - var(--composant-defile-fondu)), transparent);
  }

  .defile-cadre.suite-avant .defile {
    mask-image: linear-gradient(to left, var(--couleur-encre) calc(100% - var(--composant-defile-fondu)), transparent);
  }

  .defile-cadre.suite-avant.suite-apres .defile {
    mask-image: linear-gradient(to right, transparent, var(--couleur-encre) var(--composant-defile-fondu), var(--couleur-encre) calc(100% - var(--composant-defile-fondu)), transparent);
  }

  .defile-fleche {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: var(--composant-defile-fleche);
    height: var(--composant-defile-fleche);
    padding: 0;
    border: 0;
    border-radius: var(--rayon-pilule);
    background: var(--couleur-base);
    color: var(--couleur-encre);
    box-shadow: var(--ombre-moyenne);
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity var(--composant-duree-transition), color var(--composant-duree-transition), box-shadow var(--composant-duree-transition);
  }

  .defile-fleche.precedent {
    left: var(--espace-pas-2);
  }

  .defile-fleche.suivant {
    right: var(--espace-pas-2);
  }

  .defile-fleche:hover {
    color: var(--couleur-accent);
    box-shadow: var(--ombre-forte);
  }

  .defile-fleche:focus-visible {
    outline: var(--focus-epaisseur) solid var(--couleur-accent);
    outline-offset: var(--focus-decalage);
  }

  /* Plus rien de ce côté : la flèche s'efface. */
  .defile-fleche:disabled {
    opacity: 0;
    pointer-events: none;
  }
}

/* Réalisations de l'accueil : le même défilé partout, sur ordinateur comme sur téléphone (Léa, 12 octobre 2026, à la
   place de la grille du 8 octobre) ; à la souris, les flèches posées sur les bords (assets/js/defile.js). */

/* Avis Google (macro avisGoogle), présentés comme sur Google : logo G, étoiles jaunes, photos de profil, filet gris.
   Un défilé qu'on fait glisser (doigt, trackpad, flèches) ; assets/js/avis.js ajoute les flèches et l'avance automatique. */
.avis-google {
  background: var(--couleur-base);
  border-radius: var(--rayon-bloc);
  box-shadow: var(--ombre-moyenne);
  padding: var(--espace-bloc) 0;
  overflow: hidden;
}

.logo-google {
  width: var(--composant-avis-logo);
  height: var(--composant-avis-logo);
  flex: none;
}

.logo-google.petit {
  width: calc(var(--composant-avis-logo) * 0.8);
  height: calc(var(--composant-avis-logo) * 0.8);
}

.g-bleu { fill: var(--couleur-google-bleu); }
.g-rouge { fill: var(--couleur-google-rouge); }
.g-jaune { fill: var(--couleur-google-jaune); }
.g-vert { fill: var(--couleur-google-vert); }

.etoiles-google {
  color: var(--couleur-google-etoile);
  letter-spacing: var(--typo-interlettrage-etoiles);
  margin: 0;
  line-height: 1;
}

.avis-google-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-pas-4);
  padding-inline: var(--espace-bloc);
  margin-bottom: var(--espace-pas-5);
}

.avis-actions {
  display: flex;
  align-items: center;
  gap: var(--espace-pas-2);
}

/* Flèches : seulement avec le script, qui les fait fonctionner. */
.avis-fleches {
  display: none;
  gap: var(--espace-pas-2);
}

.js .avis-fleches {
  display: flex;
}

.avis-fleche {
  width: var(--composant-zone-tactile);
  height: var(--composant-zone-tactile);
  border-radius: var(--rayon-pilule);
  border: var(--trait-filet) solid var(--couleur-google-filet);
  background: var(--couleur-base);
  color: var(--couleur-encre);
  font: inherit;
  font-size: var(--taille-titre-bloc);
  line-height: 1;
  cursor: pointer;
  transition: var(--composant-duree-transition);
}

.avis-fleche:hover {
  box-shadow: var(--ombre-douce);
}

.avis-fleche:disabled {
  opacity: 0.4;
  cursor: default;
  box-shadow: none;
}

.avis-marque {
  display: flex;
  align-items: center;
  gap: var(--espace-pas-2);
  margin: 0 0 var(--espace-pas-2);
  font-weight: var(--graisse-gras);
  font-size: var(--taille-secondaire);
}

.avis-score {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espace-pas-2) var(--espace-pas-3);
  margin: 0;
  max-width: none;
}

.avis-note-valeur {
  font-size: var(--taille-note-avis);
  font-weight: var(--graisse-gras);
  line-height: 1;
}

.avis-score .etoiles-google {
  font-size: var(--taille-titre-bloc);
}

.avis-note-nombre {
  color: var(--couleur-encre-douce);
  font-size: var(--taille-secondaire);
}

.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-pas-2);
}

/* Le défilé : on le fait glisser, chaque carte s'aimante au bord ; fondu à droite pour montrer que ça continue. */
.avis-defile {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--espace-bloc);
  scrollbar-width: none;
  mask-image: linear-gradient(to right, var(--couleur-encre) calc(100% - var(--espace-bloc)), transparent);
}

.avis-defile::-webkit-scrollbar {
  display: none;
}

.avis-defile:focus-visible {
  outline: var(--focus-epaisseur) solid var(--couleur-accent);
  outline-offset: calc(-1 * var(--focus-epaisseur));
}

.avis-piste {
  list-style: none;
  margin: 0;
  padding: var(--espace-pas-1) var(--espace-bloc);
  max-width: none;
  display: flex;
  align-items: stretch;
  gap: var(--espace-pas-4);
  width: max-content;
}

.avis-carte {
  flex: none;
  width: var(--composant-avis-carte);
  margin: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--espace-pas-2);
  background: var(--couleur-base);
  border: var(--trait-filet) solid var(--couleur-google-filet);
  border-radius: var(--rayon-vignette);
  padding: var(--espace-pas-4);
}

.avis-auteur {
  display: flex;
  align-items: center;
  gap: var(--espace-pas-2);
  font-size: var(--taille-secondaire);
  line-height: var(--typo-interligne-serre);
}

.avis-qui {
  flex: 1;
  min-width: 0;
  display: grid;
}

.avis-date {
  color: var(--couleur-encre-douce);
  font-size: var(--taille-mini);
}

.avis-auteur a {
  min-width: 0;
  color: var(--couleur-encre);
  font-weight: var(--graisse-gras);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avis-auteur a:hover {
  text-decoration: underline;
}

.avis-photo {
  flex: none;
  width: var(--composant-avis-photo);
  height: var(--composant-avis-photo);
  border-radius: var(--rayon-pilule);
  object-fit: cover;
}

.avis-initiale {
  display: grid;
  place-items: center;
  background: var(--couleur-google-bleu);
  color: var(--couleur-base);
  font-weight: var(--graisse-gras);
}

.avis-carte blockquote {
  margin: 0;
}

.avis-carte blockquote p {
  margin: 0;
  max-width: none;
  font-size: var(--taille-secondaire);
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.avis-suite {
  margin: auto 0 0;
  font-size: var(--taille-mini);
}

/* Dernière carte : « Voir les N avis sur Google ». */
.avis-carte-fin {
  padding: 0;
  background: var(--couleur-teinte-2);
}

.avis-carte-fin a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espace-pas-2);
  padding: var(--espace-pas-4);
  color: var(--couleur-encre);
  text-decoration: none;
  text-align: center;
}

.avis-carte-fin .logo-google {
  width: calc(var(--composant-avis-logo) * 1.6);
  height: calc(var(--composant-avis-logo) * 1.6);
}

.avis-fin-lien {
  color: var(--couleur-accent);
  font-weight: var(--graisse-gras);
  text-decoration: underline;
  text-underline-offset: var(--focus-decalage);
}

.avis-google-source {
  font-size: var(--taille-mini);
  text-align: center;
  margin: var(--espace-pas-4) auto 0;
  padding-inline: var(--espace-bloc);
}

/* Ce que je crée : une rangée par catégorie, ce que je propose à gauche, ses photos à droite. */
.creations {
  display: grid;
  gap: var(--espace-pas-5);
}

.creation {
  display: grid;
  grid-template-columns: var(--composant-creation-texte) minmax(0, 1fr);
  gap: var(--espace-colonnes);
  align-items: start;
  padding-top: var(--espace-pas-5);
  border-top: var(--trait-filet) solid var(--couleur-filet);
}

.creation:first-child {
  padding-top: 0;
  border-top: 0;
}

.creation h3 {
  margin: 0 0 var(--espace-pas-2);
}

.creation > div:not(.defile-cadre) > p {
  margin: 0 0 var(--espace-pas-2);
}

.defile img,
.defile .emplacement {
  width: 100%;
  aspect-ratio: var(--format-portrait);
  object-fit: cover;
  border-radius: var(--rayon-vignette);
}

/* Rangées de créations : prix de départ et liste sur une ligne. */
.creation-prix {
  font-family: var(--police-titres);
  font-size: var(--taille-montant-compo);
  line-height: var(--typo-interligne-serre);
  color: var(--couleur-accent);
  margin: 0 0 var(--espace-pas-2);
}

.ambiance-deuil .creation-prix {
  color: var(--couleur-encre);
}

.liste-ligne {
  font-size: var(--taille-secondaire);
}

/* Réalisations de l'accueil (bloc actus) : un onglet par univers. Le lien sous le défilé suit l'onglet ouvert. */
.actus figure {
  margin: 0;
}

/* Onglets : peu nombreux, ils passent à la ligne au lieu de défiler, tous visibles même sur téléphone. */
.actus-onglets .puces {
  flex-wrap: wrap;
  justify-content: center;
  overflow: visible;
  margin-inline: 0;
  padding-inline: 0;
}

.actus-liens {
  text-align: center;
  margin: var(--espace-pas-3) auto 0;
  font-size: var(--taille-secondaire);
  font-weight: var(--graisse-gras);
}

.actus-onglets:has(.f1:checked) .actus-liens > a:not(.s1),
.actus-onglets:has(.f2:checked) .actus-liens > a:not(.s2),
.actus-onglets:has(.f3:checked) .actus-liens > a:not(.s3),
.actus-onglets:has(.f4:checked) .actus-liens > a:not(.s4),
.actus-onglets:has(.f5:checked) .actus-liens > a:not(.s5),
.actus-onglets:has(.f6:checked) .actus-liens > a:not(.s6),
.actus-onglets:has(.f7:checked) .actus-liens > a:not(.s7),
.actus-onglets:has(.f8:checked) .actus-liens > a:not(.s8) {
  display: none;
}

.actus figcaption {
  font-size: var(--taille-mini);
  color: var(--couleur-encre-douce);
  margin-top: var(--espace-pas-1);
}

/* Lien seul centré sous une section. */
.centre-lien {
  justify-content: center;
  margin-top: 0;
}

/* Bascules. */
@container site (max-width: 1040px) {
  .defile {
    grid-auto-columns: var(--composant-defile-colonne-tablette);
  }

  .creation {
    grid-template-columns: 1fr;
    gap: var(--espace-pas-3);
  }
}

@container site (max-width: 780px) {
  /* Défilé et pastilles débordent jusqu'au bord de l'écran, pour inviter à glisser. */
  .defile,
  .puces,
  .galerie {
    margin-inline: calc(-1 * var(--espace-marge-laterale));
    padding-inline: var(--espace-marge-laterale);
    scroll-padding-inline: var(--espace-marge-laterale);
  }

  .defile {
    grid-auto-columns: var(--composant-defile-colonne-mobile);
    scrollbar-width: none;
  }

  /* Ce que je crée : vignettes carrées (la visionneuse montre la photo entière), et le prix sur la ligne du titre,
     comme sur une carte de boutique. La page raccourcit sans rien perdre. */
  .creation .defile {
    grid-auto-columns: var(--composant-creation-colonne-mobile);
  }

  .creation .defile img,
  .creation .defile .emplacement {
    aspect-ratio: var(--format-vignette-mobile);
  }

  .creation > div:not(.defile-cadre) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: var(--espace-pas-3);
  }

  .creation > div:not(.defile-cadre) > * {
    flex: 1 1 100%;
  }

  /* Le titre et le prix partagent la ligne ; un prix trop long pour tenir passe dessous. */
  .creation > div:not(.defile-cadre) > h3 {
    flex: 1 1 auto;
    margin-bottom: 0;
  }

  .creation > div:not(.defile-cadre) > .creation-prix {
    flex: 0 1 auto;
    margin: 0;
  }

  .creation > div:not(.defile-cadre) > h3 + :not(.creation-prix),
  .creation > div:not(.defile-cadre) > .creation-prix + * {
    margin-top: var(--espace-pas-2);
  }

  .creation > div:not(.defile-cadre) > :last-child {
    margin-bottom: 0;
  }

  /* Rangées plus serrées : le filet suffit à les séparer, et le défilé n'a plus de barre à loger sous les photos. */
  .creations {
    gap: var(--espace-pas-4);
  }

  .creation {
    padding-top: var(--espace-pas-4);
  }

  .creation .defile {
    padding-bottom: 0;
  }

  /* Les pastilles prennent toute la ligne, le bouton passe dessous. */
  .defile-tete .puces {
    flex-basis: 100%;
  }

  /* Les galeries des pages deviennent elles aussi un défilé au pouce. */
  .galerie {
    display: grid;
    grid-template-columns: none;
    justify-content: start;
    grid-auto-flow: column;
    grid-auto-columns: var(--composant-defile-colonne-mobile);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .galerie > * {
    scroll-snap-align: start;
  }
}

@container site (max-width: 560px) {
  .defile,
  .puces,
  .galerie {
    margin-inline: calc(-1 * var(--espace-marge-laterale-mobile));
    padding-inline: var(--espace-marge-laterale-mobile);
    scroll-padding-inline: var(--espace-marge-laterale-mobile);
  }

  .defile,
  .galerie {
    grid-auto-columns: var(--composant-defile-colonne-petit-mobile);
  }

  .avis-google {
    padding-block: var(--espace-pas-5);
  }

  .avis-google-tete {
    padding-inline: var(--espace-pas-4);
    justify-content: center;
    text-align: left;
  }

  .avis-actions {
    width: 100%;
  }

  .avis-actions .btn {
    flex: 1;
  }

  .avis-defile {
    scroll-padding-inline: var(--espace-pas-4);
  }

  .avis-piste {
    padding-inline: var(--espace-pas-4);
  }

  .avis-carte {
    width: var(--composant-avis-carte-mobile);
  }

  /* Ce que je crée : deux photos et le début de la troisième par écran, la liste reste visible. */
  .creation .defile {
    grid-auto-columns: var(--composant-creation-colonne-mobile);
  }
}

/* 14-contenus.css */
/* Pages de contenu : sommaires (réalisations, conseils), fiches plantes et articles de conseil. */

/* En-tête des pages sommaires : centré, dans l'axe des têtes de section qui suivent. */
.entete-galerie {
  padding-block: var(--espace-pas-5) 0;
  text-align: center;
}

.entete-galerie .lead {
  margin: var(--espace-pas-3) auto 0;
}

/* Fiche plante. */
.fiche-tete .nom-latin {
  font-style: italic;
  color: var(--couleur-encre-douce);
  margin: 0 0 var(--espace-pas-3);
}

.fiche-prix {
  display: flex;
  align-items: center;
  gap: var(--espace-pas-3);
  flex-wrap: wrap;
  margin-top: var(--espace-pas-4);
}

.fiche-prix .montant {
  font-family: var(--police-titres);
  font-size: var(--taille-montant);
  color: var(--couleur-accent);
  line-height: 1;
}

.caracteristiques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--composant-caracteristique-colonne), 1fr));
  gap: var(--espace-pas-3);
  margin: 0 0 var(--espace-section);
}

.caracteristiques > div {
  background: var(--couleur-teinte-2);
  border-radius: var(--rayon-vignette);
  padding: var(--espace-pas-3) var(--espace-pas-4);
}

.caracteristiques dt {
  font-size: var(--taille-mini);
  text-transform: uppercase;
  letter-spacing: var(--typo-interlettrage-etiquette);
  color: var(--couleur-encre-douce);
}

.caracteristiques dd {
  margin: var(--espace-pas-1) 0 0;
  font-family: var(--police-titres);
  font-size: var(--taille-titre-carte);
}

.fiche-galerie {
  margin-top: var(--espace-pas-5);
}

/* Texte de la fiche et son encart : une colonne de lecture centrée, comme un article. */
.fiche > .texte-long,
.fiche > .encart {
  max-width: var(--espace-largeur-etroite);
  margin-inline: auto;
}

.fiche > .lien-retour {
  text-align: center;
}

.fiche > .texte-long p,
.fiche > .texte-long ul,
.fiche > .texte-long ol {
  max-width: none;
}

/* Texte long des fiches et des articles, en colonne de lecture. */
.texte-long {
  max-width: var(--typo-largeur-lecture);
}

.texte-long h2 {
  margin: var(--espace-bloc) 0 var(--espace-pas-3);
}

.texte-long h3 {
  margin: var(--espace-pas-5) 0 var(--espace-pas-2);
}

.texte-long ul,
.texte-long ol {
  padding-left: var(--espace-pas-5);
}

.texte-long li {
  margin-bottom: var(--espace-pas-1);
}

/* Article de conseil : une seule colonne de lecture, centrée. Titre, photo et texte partagent le même bord gauche
   (avant : un texte de 62 signes calé à gauche sous une photo plus large, le reste de la colonne vide). */
.article {
  max-width: var(--espace-largeur-etroite);
  margin-inline: auto;
  padding-block: var(--espace-pas-5) var(--espace-section);
}

.article .texte-long,
.article p,
.article ul,
.article ol {
  max-width: none;
}

.article-tete .chip + h1 {
  margin-block: var(--espace-pas-3);
}

.article .signature {
  margin: 0 0 var(--espace-pas-4);
}

.article-photo img,
.article-photo .emplacement {
  width: 100%;
  aspect-ratio: var(--format-paysage);
  object-fit: cover;
  border-radius: var(--rayon-carte);
  margin-block: var(--espace-pas-5);
}

/* Questions fréquentes d'un article : une seule colonne, dans la colonne de lecture. */
.article-faq .faq {
  grid-template-columns: 1fr;
}

.auteur {
  margin-top: var(--espace-pas-5);
  padding-top: var(--espace-pas-4);
  border-top: var(--trait-filet) solid var(--couleur-filet);
}

.lien-retour {
  margin-top: var(--espace-pas-5);
  font-size: var(--taille-secondaire);
}

/* Planche des styles (outil du site de test). */
.planche-styles {
  list-style: none;
  padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--composant-caracteristique-colonne), 1fr));
  gap: var(--espace-pas-2);
}

.planche-styles li {
  margin: 0;
  font-size: var(--taille-mini);
  text-align: center;
}

.planche-styles img,
.planche-styles .emplacement {
  width: 100%;
  aspect-ratio: var(--format-portrait);
  object-fit: cover;
  border-radius: var(--rayon-vignette);
}

/* Planche des galeries (site de test, /outils/galeries/) : une galerie par rangée, la place et le numéro sous chaque
   photo, un liseré sur les photos déjà choisies pour passer en premier. */
.planche-page {
  margin-block: var(--espace-section-mobile);
}

.planche-galerie span,
.planche-galerie small {
  display: block;
}

.planche-galerie small {
  color: var(--couleur-encre-douce);
}

.planche-galerie .choisie img {
  box-shadow: 0 0 0 var(--trait-repere) var(--couleur-accent);
}

/* Ce que d'autres sites disent d'Herborium (bloc mentions, page « Qui suis-je ») : des cartes vers la source. */
.mentions {
  list-style: none;
  padding: 0;
  max-width: var(--espace-largeur-recit);
  margin-inline: auto;
  display: grid;
  /* Deux cartes par ligne au plus (quatre sources, 23 octobre 2026 : sur trois colonnes, la dernière restait seule),
     une seule quand la place manque. */
  grid-template-columns: repeat(auto-fit, minmax(max(var(--composant-pied-colonne), calc((100% - var(--espace-pas-3)) / 2)), 1fr));
  gap: var(--espace-pas-3);
}

.mentions li {
  margin: 0;
}

.mentions a {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--espace-pas-1);
  padding: var(--espace-pas-3);
  background: var(--couleur-base);
  border: var(--trait-filet) solid var(--couleur-filet);
  border-radius: var(--rayon-carte);
  text-decoration: none;
  color: inherit;
}

/* Le logo de la source, ou son nom écrit en grand : la carte se reconnaît d'un coup d'œil. */
.mentions-logo {
  display: flex;
  align-items: center;
  min-height: var(--composant-zone-tactile);
  margin-bottom: var(--espace-pas-1);
}

/* Logos officiels des sources (Léa, 23 octobre 2026) : tous à la même hauteur, la largeur suit leur forme. */
.mentions-logo img {
  height: var(--composant-mention-logo);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.mentions-marque {
  font-family: var(--police-titres);
  font-size: var(--taille-titre-bloc);
  line-height: var(--typo-interligne-serre);
  color: var(--couleur-encre);
}

.mentions a:hover {
  box-shadow: var(--ombre-douce);
}

.mentions-source {
  font-size: var(--taille-mini);
  text-transform: uppercase;
  letter-spacing: var(--typo-interlettrage-surtitre);
  color: var(--couleur-accent);
}

.mentions-titre {
  font-family: var(--police-titres);
  font-size: var(--taille-h3);
}

/* Portrait de Léa dans la signature d'un article de conseil. */
.auteur-portrait {
  float: left;
  width: var(--composant-auteur-photo);
  height: var(--composant-auteur-photo);
  object-fit: cover;
  border-radius: var(--rayon-pilule);
  margin-right: var(--espace-pas-2);
}

/* Page de contrôle de la fiche Google (outil du site de test) : photos en grand, telles qu'elles partiront. */
.planche-fiche {
  list-style: none;
  padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--composant-controle-colonne), 1fr));
  gap: var(--espace-pas-3);
}

.planche-fiche li {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espace-pas-1);
  font-size: var(--taille-secondaire);
}

.planche-fiche img,
.planche-fiche .emplacement,
.controle-actualite img {
  width: 100%;
  height: auto;
  border-radius: var(--rayon-vignette);
}

.controle-actualite {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--composant-controle-colonne), 1fr));
  gap: var(--espace-pas-3);
  align-items: start;
}

.controle-liste li {
  margin-bottom: var(--espace-pas-2);
}

.controle-liste code {
  display: block;
  margin-top: var(--espace-pas-1);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Articles (audit du 8 octobre 2026) : encart d'action avec un vrai bouton, encadré d'urgence, sommaire repliable,
   sous-titres H3 lisibles dans les textes longs (en Lato gras, plus visibles que le Cormorant maigre). */
.article > .encart-action,
.article > .encart-alerte,
.article > .sommaire {
  max-width: var(--espace-largeur-etroite);
  margin-inline: auto;
}

.encart-action .btns {
  margin-top: var(--espace-pas-3);
}

.encart-alerte {
  background: var(--couleur-abricot-teinte);
  border-left: var(--trait-accent) solid var(--couleur-abricot-fonce);
}

.encart-alerte a {
  color: var(--couleur-abricot-fonce);
  font-weight: var(--graisse-gras);
}

.sommaire {
  margin-block: var(--espace-pas-5);
  padding: var(--espace-pas-3) var(--espace-pas-4);
  border: var(--trait-filet) solid var(--couleur-filet);
  border-radius: var(--rayon-vignette);
}

.sommaire summary {
  cursor: pointer;
  font-weight: var(--graisse-gras);
  min-height: var(--composant-zone-tactile);
  display: flex;
  align-items: center;
}

.sommaire ol {
  margin: var(--espace-pas-2) 0 0;
  padding-left: var(--espace-pas-5);
}

.sommaire li {
  margin-bottom: var(--espace-pas-2);
}

.texte-long h3 {
  font-family: var(--police-texte);
  font-weight: var(--graisse-gras);
  font-size: var(--taille-titre-carte);
  letter-spacing: normal;
}

/* Vidéo YouTube sans lecteur intégré (bloc video) : une photo, un bouton de lecture posé dessus, ouvre YouTube. */
.video-lien {
  position: relative;
  display: block;
  max-width: var(--espace-largeur-recit);
  margin-inline: auto;
  border-radius: var(--rayon-bloc);
  overflow: hidden;
}

.video-lien img {
  display: block;
  width: 100%;
  aspect-ratio: var(--format-paysage);
  object-fit: cover;
}

.video-bouton {
  position: absolute;
  left: 50%;
  bottom: var(--espace-pas-4);
  transform: translateX(-50%);
  background: var(--couleur-base);
  color: var(--couleur-encre);
  padding: var(--espace-pas-2) var(--espace-pas-4);
  border-radius: var(--rayon-bouton);
  font-weight: var(--graisse-gras);
  box-shadow: var(--ombre-moyenne);
  white-space: nowrap;
}

.video-bouton::before {
  content: "\25B6";
  margin-right: var(--espace-pas-2);
  color: var(--couleur-accent);
}

.video-lien:hover .video-bouton,
.video-lien:focus-visible .video-bouton {
  background: var(--couleur-accent);
  color: var(--couleur-base);
}

.video-lien:hover .video-bouton::before,
.video-lien:focus-visible .video-bouton::before {
  color: var(--couleur-base);
}

/* Photo en haut d'une carte d'offre (bloc offres, champ photo). */
.offre-photo {
  display: block;
  width: 100%;
  aspect-ratio: var(--format-offre);
  object-fit: cover;
  border-radius: var(--rayon-vignette);
  margin-bottom: var(--espace-pas-3);
}

/* Page « Plan du site » (11 octobre 2026) : une colonne par rubrique du menu, les contenus rattachés en retrait sous leur page. */
.plan-site {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--composant-pied-colonne), 1fr));
  gap: var(--espace-bloc) var(--espace-colonnes);
}

.plan-site h2 {
  font-size: var(--taille-titre-bloc);
  margin: 0 0 var(--espace-pas-3);
}

.plan-site ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.plan-site li {
  margin-bottom: var(--espace-pas-2);
}

.plan-site li ul {
  margin-top: var(--espace-pas-2);
  padding-left: var(--espace-pas-3);
  border-left: var(--trait-filet) solid var(--couleur-filet);
}

/* 15-mobile-aere.css */
/* Mobile aéré (retour de Léa du 8 octobre 2026 : « ça fait chargé sur mobile »). Le chargé venait des boîtes dans les
   boîtes (cartes blanches ombrées dans des sections de couleur, une carte par question), des pastilles sur chaque titre et
   des lignes de texte courtes dans ces cartes. Sur téléphone : le texte respire sur toute la largeur, les étiquettes sont
   de simples surtitres, les questions sont des lignes séparées par un filet, les avis sont plus courts, la ligne des
   diplômes reste dans le pied de page. L'ordinateur ne change pas. */
/* Une seule taille de texte courant, sur ordinateur comme sur téléphone (8 octobre 2026 sur téléphone, « les textes ont
   des tailles différentes » ; partout le 13 octobre 2026, Léa : « les paragraphes du site ne sont pas à la même taille ») :
   paragraphes, introductions de section, listes, textes de cartes, réponses de la FAQ, cellules de tableau et avis à la
   taille du texte. Restent à part : la réponse courte sous le grand titre, les prix, les titres, et les petites mentions
   (notes, sources, légendes), en petit. L'identifiant du main donne la priorité sur les règles des blocs. */
main#contenu :is(p, li, td, blockquote, dd):not(.offre-prix, .creation-prix, .reponse, .etoiles-google, .avis-score, .titre-bloc, .surtitre, .note, .note-avis, .mention, .mention-boutons, .mention-offres, .avis-google-source, .avis-suite, .repere-brouillon),
main#contenu span.muted {
  font-size: var(--taille-texte);
}

main#contenu :is(.note, .note-avis, .mention, .mention-boutons, .avis-google-source, .avis-suite, .repere-brouillon, figcaption, small) {
  font-size: var(--taille-secondaire);
}

main#contenu .mention-offres {
  font-size: var(--taille-mini);
}

@container site (max-width: 780px) {
  /* Étiquettes de section : un petit surtitre en capitales, sans pastille de fond. */
  .chip {
    background: none;
    padding: 0;
    color: var(--couleur-encre-douce);
  }

  /* Duo : plus de carte blanche autour du texte ; la photo garde ses coins arrondis, le texte prend toute la largeur. */
  .duo,
  .duo.sans-media.riche {
    background: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }

  .duo .media img,
  .duo .media .emplacement {
    border-radius: var(--rayon-bloc);
  }

  .duo .corps,
  .duo.sans-media.riche .corps {
    padding: var(--espace-pas-4) 0 0;
  }

  .duo.sans-media .corps {
    padding-top: 0;
  }

  /* La ligne des diplômes de Léa : déjà dans le pied de page, elle alourdissait chaque duo. */
  .duo .titres {
    display: none;
  }

  /* Plus d'air entre les paragraphes et les listes d'un même bloc. */
  .duo .corps > * + * {
    margin-top: var(--espace-pas-4);
  }

  /* Questions fréquentes : des lignes séparées par un filet, au lieu d'une carte ombrée par question. */
  .faq {
    gap: 0;
  }

  .faq details {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: var(--espace-pas-4) 0;
    border-bottom: var(--trait-filet) solid var(--couleur-filet);
  }

  .faq details:first-child {
    border-top: var(--trait-filet) solid var(--couleur-filet);
  }

  /* Avis Google : des cartes plus courtes, le texte entier reste sur Google. */
  .avis-carte blockquote p {
    -webkit-line-clamp: 5;
  }

  /* Cartes d'offres en version courte (champ mobile_court du bloc offres) : le titre et les boutons, sans la phrase. */
  .grille.mobile-court .offre > .muted {
    display: none;
  }

  /* Têtes de section calées à gauche sur téléphone : sur une colonne étroite, de longues introductions centrées se
     lisaient mal (le centrage du 5 octobre 2026 reste sur ordinateur, où il guide le regard). */
  .tete,
  .duo.sans-media:not(.riche) .duo-tete {
    text-align: left;
  }

  .tete h2,
  .duo.sans-media:not(.riche) .duo-tete h2,
  .tete .lead,
  .duo.sans-media:not(.riche) .duo-tete .lead {
    margin-inline: 0;
  }

  .tete h2::after,
  .duo.sans-media .duo-tete h2::after {
    margin-inline: 0;
  }

  /* Dans une carte, le bouton secondaire devient un simple lien : un seul gros bouton par carte. */
  .offre .btns .btn.ghost,
  .grille .carte .btns .btn.ghost {
    flex: none;
    min-height: 0;
    padding: 0;
    box-shadow: none;
    background: none;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: var(--focus-decalage);
  }

  /* Une échelle nette du H1 au texte (2 / 1,65 / 1,3 / 1 rem) : les titres de section se détachent des intertitres,
     et les intertitres, dans une police de titre fine, ne paraissent plus trop petits. */
  main#contenu h2 {
    font-size: var(--taille-h2-mobile);
  }

  main#contenu h3 {
    font-size: var(--taille-h3-mobile);
    line-height: var(--typo-interligne-titres);
    margin-bottom: var(--espace-pas-2);
  }

  main#contenu :is(.tuile-corps h3, .a-lire .carte h3, .mobile-2 .offre h3) {
    font-size: var(--taille-h3-carte-mobile);
  }

  .faq summary,
  .tableau tbody th {
    font-size: var(--taille-question-mobile);
  }

  /* Plus d'air : des sections plus hautes, des cartes plus espacées et plus généreuses. */
  .sec,
  .ambiance-deuil .sec {
    padding-block: var(--espace-section-mobile);
  }

  .grille:has(> .offre),
  .creations {
    gap: var(--espace-pas-5);
  }

  .offre {
    padding: var(--espace-carte-mobile);
  }

  /* Offres en lignes (page contact) : des lignes, pas des cartes ; les boutons sous la phrase, à leur taille. */
  .coordonnees {
    grid-template-columns: minmax(0, 1fr);
  }

  .grille.lignes:has(> .offre) {
    gap: 0;
  }

  /* Le titre et la phrase, puis les boutons, puis les liens vers les pages. */
  .grille.lignes > .offre {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--espace-pas-4) 0;
  }

  .grille.lignes .offre-texte {
    display: contents;
  }

  .grille.lignes .offre-liens {
    order: 1;
  }

  .grille.lignes > .offre > .btns {
    flex-direction: row;
    align-items: center;
    margin-top: var(--espace-pas-3);
  }

  main#contenu p {
    margin-bottom: var(--espace-pas-4);
  }
}

/* 16-pro.css */
/* Catalogue deuil pour les professionnels (/pro/deuil/, templates/pro.njk), 12 octobre 2026.
   Une page sans menu, en largeur de lecture, qui s'imprime en A4 : en-tête de marque, barre « Vous êtes », une photo
   à la une, des cartes, les compositions en grille, les engagements numérotés, le contact. Remplace le catalogue et la
   page pompes funèbres à imprimer du site de test (/outils/). */

.pro-largeur {
  max-width: var(--espace-largeur-max);
  margin-inline: auto;
  padding-inline: var(--espace-marge-laterale);
}

.pro-tete {
  border-bottom: var(--trait-filet) solid var(--couleur-filet);
  background: var(--couleur-base);
}

.pro-tete-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-pas-2);
  padding-block: var(--espace-pas-2);
}

.pro-marque {
  display: flex;
  align-items: center;
  gap: var(--espace-pas-2);
  color: var(--couleur-encre);
  text-decoration: none;
  min-width: 0;
}

.pro-marque img {
  width: var(--composant-logo-largeur);
  height: auto;
}

.pro-marque span {
  display: grid;
}

.pro-marque strong {
  font-family: var(--police-titres);
  font-size: var(--taille-titre-carte);
  font-weight: var(--graisse-titres);
}

.pro-marque small,
.pro-etiquette,
.pro-surtitre {
  font-size: var(--taille-mini);
  color: var(--couleur-encre-douce);
}

.pro-etiquette,
.pro-surtitre {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--graisse-gras);
}

.pro-publics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-pas-1);
  padding-block: var(--espace-pas-3) var(--espace-pas-2);
}

.pro-publics a {
  font-size: var(--taille-secondaire);
  color: var(--couleur-encre);
  text-decoration: none;
  border: var(--trait-filet) solid var(--couleur-filet);
  border-radius: var(--rayon-pilule);
  padding: var(--espace-pas-1) var(--espace-pas-2);
  background: var(--couleur-base);
}

.pro-publics a:hover,
.pro-publics a[aria-current="page"] {
  border-color: var(--couleur-accent);
  background: var(--couleur-teinte);
}

.pro-une {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--espace-colonnes);
  align-items: center;
  padding-block: var(--espace-pas-3) var(--espace-section);
}

.pro-une h1 {
  font-size: var(--taille-h1);
  margin: var(--espace-pas-1) 0 var(--espace-pas-2);
  text-wrap: balance;
}

.pro-chapeau {
  font-size: var(--taille-chapo);
  color: var(--couleur-encre-douce);
  margin: 0;
}

.pro-une-photo img {
  width: 100%;
  aspect-ratio: var(--format-portrait);
  object-fit: cover;
  border-radius: var(--rayon-bloc);
}

.pro-preuves {
  max-width: none;
  list-style: none;
  padding: 0;
  margin: var(--espace-pas-3) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-pas-1);
}

.pro-preuves li {
  font-size: var(--taille-secondaire);
  background: var(--couleur-teinte);
  border-radius: var(--rayon-pilule);
  padding: var(--espace-pas-1) var(--espace-pas-2);
}

.pro-section {
  padding-block: var(--espace-section-deuil) 0;
}

.pro-section h2 {
  font-size: var(--taille-h2);
  margin: 0 0 var(--espace-pas-3);
  text-wrap: balance;
}

.pro-intro {
  max-width: var(--espace-largeur-etroite);
  color: var(--couleur-encre-douce);
  margin: calc(-1 * var(--espace-pas-2)) 0 var(--espace-pas-3);
}

.pro-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--espace-pas-3);
}

.pro-carte {
  background: var(--couleur-base);
  border: var(--trait-filet) solid var(--couleur-filet);
  border-radius: var(--rayon-carte);
  padding: var(--espace-pas-3);
}

.pro-carte h3,
.pro-compo h3 {
  font-size: var(--taille-titre-carte);
  margin: 0 0 var(--espace-pas-1);
}

.pro-carte p,
.pro-compo p {
  margin: 0;
}

.pro-carte-lien {
  color: var(--couleur-encre);
  text-decoration: none;
}

.pro-carte-lien:hover {
  border-color: var(--couleur-accent);
}

.pro-offre {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--espace-pas-2);
  max-width: var(--espace-largeur-etroite);
}

.pro-offre li {
  padding-left: var(--espace-pas-3);
  border-left: var(--trait-filet) solid var(--couleur-accent);
}

.pro-compos {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: var(--espace-pas-3);
}

.pro-compo {
  display: grid;
  align-content: start;
  gap: var(--espace-pas-1);
}

.pro-compo-photos {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--espace-pas-1);
}

.pro-compo-photos img {
  width: 100%;
  aspect-ratio: var(--format-carte);
  object-fit: cover;
  border-radius: var(--rayon-vignette);
}

.pro-prix {
  font-weight: var(--graisse-gras);
  color: var(--couleur-accent);
}

.pro-engagements ol {
  margin: 0;
  padding-left: var(--espace-pas-3);
  display: grid;
  gap: var(--espace-pas-1);
  max-width: var(--espace-largeur-etroite);
}

.pro-sous {
  font-size: var(--taille-titre-carte);
  margin: var(--espace-pas-4) 0 var(--espace-pas-1);
}

.pro-communes {
  max-width: var(--espace-largeur-etroite);
}

.pro-horaires {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--espace-pas-1);
  max-width: var(--espace-largeur-etroite);
}

.pro-horaires li {
  display: flex;
  justify-content: space-between;
  gap: var(--espace-pas-2);
  border-bottom: var(--trait-filet) solid var(--couleur-filet);
  font-variant-numeric: tabular-nums;
}

.pro-contact {
  padding-bottom: var(--espace-section);
}

.pro-contact-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-pas-2);
  margin: var(--espace-pas-3) 0;
}

.pro-coordonnees {
  font-size: var(--taille-secondaire);
  color: var(--couleur-encre-douce);
  overflow-wrap: anywhere;
}

.pro-pied {
  border-top: var(--trait-filet) solid var(--couleur-filet);
  padding-block: var(--espace-pas-3);
  font-size: var(--taille-mini);
  color: var(--couleur-encre-douce);
}

@container site (max-width: 780px) {
  .pro-une {
    grid-template-columns: minmax(0, 1fr);
  }

  .pro-une-photo {
    order: -1;
  }

  .pro-une-photo img {
    aspect-ratio: var(--format-paysage);
  }

  .pro-appel {
    padding-inline: var(--espace-pas-2);
  }

  .pro-marque small {
    display: none;
  }
}

@media print {
  .pro-publics,
  .pro-appel,
  .pro-contact-ligne,
  .repere-brouillon {
    display: none;
  }

  .pro-une {
    padding-block: 0 var(--espace-pas-3);
  }

  .pro-section {
    padding-block: var(--espace-pas-3) 0;
    break-inside: avoid-page;
  }

  .pro-compos {
    grid-template-columns: repeat(4, 1fr);
  }

  .pro-compo,
  .pro-carte {
    break-inside: avoid;
  }
}

/* 17-catalogue.css */
/* Catalogue deuil (/pro/catalogue/ et onglet Commander de /pro/espace/), 17 octobre 2026 : en-tête des pages-outils pros
   (templates/pro-app.njk), barre de filtres collante, grille de compositions, fiche d'une composition, mode présentation
   plein écran pour la tablette, fenêtres (sélection, commande), version imprimée en A4.
   Script : assets/js/catalogue.js. Les fenêtres sont des <dialog> ouverts en premier plan (le corps de page est un
   conteneur, qui retient les éléments fixes). */

/* En-tête des pages-outils */
.app-tete {
  border-bottom: var(--trait-filet) solid var(--couleur-filet);
  background: var(--couleur-base);
}

.app-tete-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-pas-2);
  padding-block: var(--espace-pas-2);
}

.app-tete-actions {
  display: flex;
  align-items: center;
  gap: var(--espace-pas-1);
  min-width: 0;
}

.app-tete-actions [hidden] {
  display: none;
}

.app-tete-actions .btn {
  padding: var(--espace-pas-1) var(--espace-pas-3);
  white-space: nowrap;
}

.app-compte {
  font-size: var(--taille-secondaire);
  color: var(--couleur-encre-douce);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-pastille {
  display: inline-grid;
  place-items: center;
  min-width: 1.4em;
  height: 1.4em;
  padding-inline: 0.35em;
  margin-left: var(--espace-pas-1);
  border-radius: var(--rayon-pilule);
  background: var(--couleur-encre);
  color: var(--couleur-base);
  font-size: var(--taille-mini);
  font-weight: var(--graisse-gras);
  line-height: 1;
}

.app-pastille[hidden] {
  display: none;
}

.app main > .repere-brouillon {
  margin-top: var(--espace-pas-3);
}

/* Une du catalogue */
.cat-une {
  padding-block: var(--espace-entete-page) var(--espace-pas-4);
}

.cat-une h1 {
  font-size: var(--taille-h1);
  margin: var(--espace-pas-1) 0 var(--espace-pas-2);
}

.cat-une .pro-chapeau {
  max-width: var(--espace-largeur-recit);
}

.cat-propose {
  margin: var(--espace-pas-3) 0 0;
  padding: var(--espace-pas-2) var(--espace-pas-3);
  background: var(--couleur-teinte);
  border-radius: var(--rayon-carte);
  max-width: var(--espace-largeur-recit);
}

.cat-propose[hidden] {
  display: none;
}

/* Barre de filtres, collée en haut pendant qu'on fait défiler */
.cat-barre {
  position: sticky;
  top: 0;
  z-index: var(--composant-plan-fenetre);
  background: color-mix(in srgb, var(--couleur-base) var(--composant-entete-opacite), transparent);
  backdrop-filter: blur(var(--composant-entete-flou));
  border-bottom: var(--trait-filet) solid var(--couleur-filet);
  padding-block: var(--espace-pas-2);
  margin-bottom: var(--espace-pas-3);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--espace-pas-2);
  align-items: center;
}

/* Filtres ouverts : la barre ne colle plus, pour ne pas couvrir l'écran pendant qu'on fait défiler. */
.cat-barre:has(.cat-filtres:not([hidden])) {
  position: static;
}

.cat-familles {
  display: flex;
  gap: var(--espace-pas-1);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: var(--espace-pas-1);
  mask-image: linear-gradient(to right, var(--couleur-encre) calc(100% - var(--composant-defile-fondu)), transparent);
}

.cat-familles::-webkit-scrollbar {
  display: none;
}

.cat-puce {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--espace-pas-1);
  font: inherit;
  font-size: var(--taille-secondaire);
  color: var(--couleur-encre);
  background: var(--couleur-base);
  border: var(--trait-filet) solid var(--couleur-filet);
  border-radius: var(--rayon-pilule);
  padding: var(--espace-pas-1) var(--espace-pas-3);
  min-height: var(--composant-zone-tactile);
  cursor: pointer;
  white-space: nowrap;
}

.cat-puce:hover {
  border-color: var(--couleur-marque);
}

.cat-puce[aria-pressed="true"] {
  background: var(--couleur-encre);
  border-color: var(--couleur-encre);
  color: var(--couleur-base);
}

.cat-actions {
  display: flex;
  gap: var(--espace-pas-1);
}

.cat-bouton {
  font: inherit;
  font-size: var(--taille-secondaire);
  font-weight: var(--graisse-gras);
  color: var(--couleur-encre);
  background: var(--couleur-teinte);
  border: 0;
  border-radius: var(--rayon-bouton);
  padding: var(--espace-pas-1) var(--espace-pas-3);
  min-height: var(--composant-zone-tactile);
  cursor: pointer;
  white-space: nowrap;
}

.cat-bouton:hover,
.cat-bouton[aria-expanded="true"] {
  background: var(--couleur-filet);
}

.cat-lien {
  font: inherit;
  color: var(--couleur-accent);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.cat-filtres {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--espace-pas-3);
  padding-top: var(--espace-pas-2);
}

.cat-filtres[hidden] {
  display: none;
}

.cat-filtres fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-pas-1);
}

.cat-filtres legend {
  font-size: var(--taille-mini);
  font-weight: var(--graisse-gras);
  text-transform: uppercase;
  letter-spacing: var(--typo-interlettrage-etiquette);
  color: var(--couleur-encre-douce);
  margin-bottom: var(--espace-pas-1);
}

.cat-filtres-pied {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--espace-pas-2);
}

.cat-interrupteur {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-pas-1);
  font-size: var(--taille-secondaire);
  cursor: pointer;
}

.cat-interrupteur input {
  width: 1.15em;
  height: 1.15em;
  accent-color: var(--couleur-accent);
}

.cat-teinte {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  border-radius: var(--rayon-pilule);
  box-shadow: inset 0 0 0 var(--trait-filet) var(--couleur-filet);
  flex: none;
}

.cat-teinte-blanc {
  background: var(--couleur-fleur-blanc);
}

.cat-teinte-pastel {
  background: var(--couleur-fleur-pastel);
}

.cat-teinte-colore {
  background: var(--couleur-fleur-colore);
}

.cat-teinte-champetre {
  background: var(--couleur-fleur-champetre);
}

.cat-teinte-rouge {
  background: var(--couleur-fleur-rouge);
}

.cat-bandeau {
  margin: 0 0 var(--espace-pas-3);
  padding: var(--espace-pas-2) var(--espace-pas-3);
  background: var(--couleur-teinte);
  border-radius: var(--rayon-carte);
}

.cat-bandeau[hidden],
.cat-resultat:empty {
  display: none;
}

.cat-resultat {
  margin: 0 0 var(--espace-pas-3);
  color: var(--couleur-encre-douce);
}

/* Familles et grille */
.cat-famille {
  padding-bottom: var(--espace-bloc-ample);
  scroll-margin-top: var(--espace-section);
}

.cat-famille[hidden],
.cat-produit[hidden] {
  display: none;
}

.cat-famille-tete {
  margin-bottom: var(--espace-pas-3);
  max-width: var(--espace-largeur-recit);
}

.cat-famille-tete h2,
.cat-famille-tete h3 {
  font-size: var(--taille-h2);
  margin: 0 0 var(--espace-pas-1);
}

.cat-famille-tete p {
  margin: 0;
  color: var(--couleur-encre-douce);
}

.cat-grille {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--composant-carte-produit)), 1fr));
  gap: var(--espace-pas-4) var(--espace-pas-3);
}

.cat-produit article {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  gap: var(--espace-pas-2);
}

.cat-ouvrir {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--couleur-creme);
  border-radius: var(--rayon-carte);
  overflow: hidden;
  cursor: zoom-in;
}

.cat-ouvrir img {
  width: 100%;
  aspect-ratio: var(--format-catalogue);
  object-fit: cover;
  transition: transform var(--composant-duree-transition);
}

.cat-ouvrir:hover img {
  transform: scale(1.03);
}

.cat-sans-photo {
  display: grid;
  place-items: center;
  aspect-ratio: var(--format-catalogue);
  font-family: var(--police-titres);
  font-size: var(--taille-titre-bloc);
  color: var(--couleur-encre-douce);
}

.cat-produit-texte h3,
.cat-produit-texte h4 {
  font-size: var(--taille-titre-carte);
  font-family: var(--police-titres);
  margin: 0;
}

.cat-style {
  display: flex;
  align-items: center;
  gap: var(--espace-pas-1);
  margin: 0 0 var(--espace-pas-1);
  font-size: var(--taille-mini);
  text-transform: uppercase;
  letter-spacing: var(--typo-interlettrage-etiquette);
  color: var(--couleur-encre-douce);
}

.cat-prix {
  margin: var(--espace-pas-1) 0 0;
  font-weight: var(--graisse-gras);
  font-variant-numeric: tabular-nums;
}

.cat-pro {
  display: block;
  font-size: var(--taille-mini);
  font-weight: var(--graisse-gras);
  color: var(--couleur-accent);
}

/* Chaque taille et son prix exact, sur la carte (Léa, 17 octobre 2026) : une ligne par taille, qui ouvre la fiche sur elle. */
.cat-ref {
  margin-left: auto;
  font-weight: var(--graisse-gras);
  color: var(--couleur-encre);
  letter-spacing: var(--typo-interlettrage-etiquette);
}

.cat-tailles {
  list-style: none;
  margin: var(--espace-pas-2) 0 0;
  padding: 0;
  max-width: none;
  display: grid;
}

.cat-tailles li + li {
  border-top: var(--trait-filet) solid var(--couleur-filet);
}

.cat-taille {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espace-pas-2);
  width: 100%;
  padding: var(--espace-pas-1) 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--taille-secondaire);
  color: var(--couleur-encre);
  text-align: left;
  cursor: pointer;
}

.cat-taille:hover .cat-taille-nom {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.cat-taille-nom small {
  color: var(--couleur-encre-douce);
  font-size: var(--taille-mini);
}

.cat-taille .cat-montant {
  font-weight: var(--graisse-gras);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

.cat-produit-actions {
  display: flex;
  gap: var(--espace-pas-1);
  align-items: center;
}

.cat-produit-actions .btn {
  flex: 1;
  text-align: center;
  padding: var(--espace-pas-2) var(--espace-pas-3);
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.cat-coeur {
  flex: none;
  width: var(--composant-zone-tactile);
  height: var(--composant-zone-tactile);
  border-radius: var(--rayon-pilule);
  border: var(--trait-filet) solid var(--couleur-filet);
  background: var(--couleur-base);
  color: var(--couleur-encre);
  font-size: var(--taille-titre-carte);
  cursor: pointer;
}

.cat-coeur[aria-pressed="true"] {
  color: var(--couleur-rose-fonce);
  border-color: var(--couleur-rose);
  background: var(--couleur-rose-teinte);
}

.cat-mention {
  font-size: var(--taille-secondaire);
  color: var(--couleur-encre-douce);
  max-width: var(--espace-largeur-recit);
}

/* Prix masqués (option « Afficher les prix », lien ?prix=non) */
.sans-prix .cat-pro,
.sans-prix .cat-montant,
.sans-prix .cat-fiche-taille-prix,
.sans-prix .cat-fiche-borne {
  display: none;
}

/* Guide « Qui offre quoi ? » et commande */
.cat-tableau {
  overflow-x: auto;
}

.cat-tableau table,
.esp-tableau table {
  width: 100%;
  border-collapse: collapse;
}

.cat-tableau th,
.cat-tableau td {
  text-align: left;
  vertical-align: top;
  padding: var(--espace-pas-2) var(--espace-pas-3) var(--espace-pas-2) 0;
  border-bottom: var(--trait-filet) solid var(--couleur-filet);
}

.cat-tableau thead th {
  font-size: var(--taille-mini);
  text-transform: uppercase;
  letter-spacing: var(--typo-interlettrage-etiquette);
  color: var(--couleur-encre-douce);
}

.cat-tableau tbody th {
  font-weight: var(--graisse-gras);
  min-width: var(--composant-tableau-colonne);
}

.cat-commander {
  padding-bottom: var(--espace-section);
}

.cat-commander .btns {
  margin-top: var(--espace-pas-3);
}

.cat-commander .pro-carte[hidden] {
  display: none;
}

.cat-engagements {
  margin: var(--espace-bloc) 0 0;
  padding-left: var(--espace-pas-4);
  display: grid;
  gap: var(--espace-pas-1);
  max-width: var(--espace-largeur-recit);
}

/* Fenêtres : fiche, sélection, commande */
.cat-fiche,
.cat-fenetre {
  border: 0;
  padding: 0;
  border-radius: var(--rayon-bloc);
  box-shadow: var(--ombre-forte);
  color: var(--couleur-encre);
  background: var(--couleur-base);
  width: min(100% - 2 * var(--espace-marge-laterale), var(--composant-fiche-largeur));
  max-height: calc(100dvh - 2 * var(--espace-marge-laterale));
  overflow: hidden;
}

.cat-fenetre {
  width: min(100% - 2 * var(--espace-marge-laterale), var(--composant-fenetre-largeur));
}

.cat-fiche::backdrop,
.cat-fenetre::backdrop {
  background: color-mix(in srgb, var(--couleur-encre) var(--composant-fenetre-voile), transparent);
}

.cat-fiche-cadre,
.cat-fenetre-cadre {
  position: relative;
  max-height: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cat-fiche-cadre {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

.cat-fenetre-cadre {
  padding: var(--espace-bloc);
}

.cat-fenetre-cadre h2 {
  font-size: var(--taille-h2);
  margin: 0 var(--espace-section) var(--espace-pas-2) 0;
}

.cat-fermer {
  position: absolute;
  top: var(--espace-pas-2);
  right: var(--espace-pas-2);
  z-index: 2;
  width: var(--composant-zone-tactile);
  height: var(--composant-zone-tactile);
  border-radius: var(--rayon-pilule);
  border: 0;
  background: var(--couleur-base);
  box-shadow: var(--ombre-douce);
  color: var(--couleur-encre);
  font-size: var(--taille-titre-carte);
  cursor: pointer;
}

.cat-fiche-photos {
  background: var(--couleur-creme);
  display: grid;
  align-content: start;
  gap: var(--espace-pas-2);
  padding: var(--espace-pas-3);
}

.cat-fiche-grande {
  position: relative;
}

.cat-fiche-grande img {
  width: 100%;
  aspect-ratio: var(--format-portrait);
  object-fit: cover;
  border-radius: var(--rayon-carte);
}

.cat-fleche {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: var(--composant-visionneuse-bouton);
  height: var(--composant-visionneuse-bouton);
  border-radius: var(--rayon-pilule);
  border: 0;
  background: color-mix(in srgb, var(--couleur-base) var(--composant-fleche-fond), transparent);
  color: var(--couleur-encre);
  font-size: var(--taille-burger);
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--ombre-douce);
}

.cat-fleche[hidden] {
  display: none;
}

.cat-fleche.prec {
  left: var(--espace-pas-2);
}

.cat-fleche.suiv {
  right: var(--espace-pas-2);
}

.cat-fiche-vignettes {
  display: flex;
  gap: var(--espace-pas-1);
  overflow-x: auto;
}

.cat-fiche-vignettes[hidden] {
  display: none;
}

.cat-fiche-vignettes button {
  flex: none;
  padding: 0;
  border: var(--trait-repere) solid transparent;
  border-radius: var(--rayon-vignette);
  background: none;
  cursor: pointer;
  overflow: hidden;
}

.cat-fiche-vignettes button[aria-current="true"] {
  border-color: var(--couleur-encre);
}

.cat-fiche-vignettes img {
  width: var(--composant-flottant-vignette);
  height: var(--composant-flottant-vignette);
  object-fit: cover;
}

.cat-fiche-infos {
  padding: var(--espace-bloc) var(--espace-bloc) var(--espace-pas-4);
  display: grid;
  align-content: start;
  gap: var(--espace-pas-2);
}

.cat-fiche-infos h2 {
  font-size: var(--taille-h2);
  margin: 0;
  padding-right: var(--espace-section);
}

.cat-fiche-texte {
  margin: 0;
}

.cat-fiche-pour {
  margin: 0;
  display: grid;
  gap: var(--espace-pas-1);
  font-size: var(--taille-secondaire);
}

.cat-fiche-pour div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--espace-pas-2);
}

.cat-fiche-pour dt {
  color: var(--couleur-encre-douce);
}

.cat-fiche-pour dd {
  margin: 0;
}

.cat-fiche-form {
  display: grid;
  gap: var(--espace-pas-3);
}

.cat-fiche-tailles {
  border: 0;
  margin: 0;
  padding: 0;
}

.cat-fiche-tailles[hidden],
.cat-fiche-budget[hidden],
.cat-fiche-quantite[hidden],
.cat-fiche-nav[hidden],
.cat-fiche-form [hidden] {
  display: none;
}

.cat-fiche-tailles legend,
.cat-fiche-budget label,
.cat-fiche-quantite label {
  font-size: var(--taille-mini);
  font-weight: var(--graisse-gras);
  text-transform: uppercase;
  letter-spacing: var(--typo-interlettrage-etiquette);
  color: var(--couleur-encre-douce);
  margin-bottom: var(--espace-pas-1);
}

.cat-fiche-tailles > div {
  display: grid;
  gap: var(--espace-pas-1);
}

.cat-fiche-taille {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--espace-pas-2);
  padding: var(--espace-pas-2) var(--espace-pas-3);
  border: var(--trait-filet) solid var(--couleur-filet);
  border-radius: var(--rayon-bouton);
  cursor: pointer;
}

.cat-fiche-taille:has(input:checked) {
  border-color: var(--couleur-encre);
  box-shadow: inset 0 0 0 var(--trait-filet) var(--couleur-encre);
}

.cat-fiche-taille input {
  accent-color: var(--couleur-encre);
}

.cat-fiche-taille-nom {
  display: grid;
}

.cat-fiche-taille-nom small,
.cat-fiche-borne {
  font-size: var(--taille-mini);
  color: var(--couleur-encre-douce);
  font-weight: var(--graisse-texte);
  text-transform: none;
  letter-spacing: 0;
}

.cat-fiche-taille-prix {
  text-align: right;
  font-weight: var(--graisse-gras);
  font-variant-numeric: tabular-nums;
}

.cat-fiche-budget label,
.cat-fiche-quantite label {
  display: grid;
  gap: var(--espace-pas-1);
}

.app input[type="text"],
.app input[type="email"],
.app input[type="tel"],
.app input[type="number"],
.app input[type="date"],
.app input[type="time"],
.app input[type="search"],
.app input[type="password"],
.app select,
.app textarea {
  font: inherit;
  font-size: var(--taille-texte);
  color: var(--couleur-encre);
  background: var(--couleur-base);
  border: var(--trait-filet) solid var(--couleur-filet);
  border-radius: var(--rayon-bouton);
  padding: var(--espace-pas-2) var(--espace-pas-3);
  min-height: var(--composant-zone-tactile);
  width: 100%;
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--graisse-texte);
}

.app textarea {
  min-height: 5.5rem;
  resize: vertical;
}

.app input:focus-visible,
.app select:focus-visible,
.app textarea:focus-visible,
.app button:focus-visible {
  outline: var(--focus-epaisseur) solid var(--couleur-accent);
  outline-offset: var(--focus-decalage);
}

.cat-fiche-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-pas-2);
}

.cat-fiche-actions .btn {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.cat-fiche-message {
  margin: 0;
  font-size: var(--taille-secondaire);
  color: var(--couleur-accent);
}

.cat-fiche-message:empty {
  display: none;
}

.cat-fiche-nav {
  display: flex;
  justify-content: space-between;
  border-top: var(--trait-filet) solid var(--couleur-filet);
  padding-top: var(--espace-pas-2);
  margin-top: var(--espace-pas-2);
}

/* Ma sélection */
.cat-sel-liste {
  list-style: none;
  margin: var(--espace-pas-3) 0;
  padding: 0;
  display: grid;
  gap: var(--espace-pas-2);
  max-width: none;
}

.cat-sel-liste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-pas-2);
}

.cat-sel-voir {
  display: flex;
  align-items: center;
  gap: var(--espace-pas-2);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.cat-sel-voir img {
  width: var(--composant-pictogramme);
  height: var(--composant-pictogramme);
  object-fit: cover;
  border-radius: var(--rayon-vignette);
}

.cat-sel-voir span {
  display: grid;
}

.cat-sel-option {
  margin: var(--espace-pas-3) 0 var(--espace-pas-2);
}

.cat-fenetre .btns .btn {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

/* Mode présentation : plein écran, fond sombre, une composition à la fois */
.cat-presentation {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  background: color-mix(in srgb, var(--couleur-encre) var(--composant-presentation-opacite), transparent);
  color: var(--couleur-base);
  overflow: hidden;
}

.cat-presentation::backdrop {
  background: var(--couleur-encre);
}

.cat-presentation[open] {
  display: grid;
}

.cat-pres-scene {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--espace-colonnes);
  padding: var(--espace-bloc-ample) calc(var(--composant-visionneuse-bouton) + var(--espace-pas-4));
  height: 100dvh;
}

.cat-pres-photo {
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
}

.cat-pres-photo img {
  max-width: 100%;
  max-height: calc(100dvh - 2 * var(--espace-bloc-ample));
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--rayon-carte);
}

.cat-pres-infos {
  display: grid;
  gap: var(--espace-pas-2);
  align-content: center;
}

.cat-presentation .cat-style,
.cat-presentation .cat-ref {
  color: var(--couleur-filet);
}

.cat-fiche-infos .cat-style {
  padding-right: var(--espace-section);
}

.cat-pres-nom {
  font-family: var(--police-titres);
  font-weight: var(--graisse-titres);
  font-size: var(--taille-h1);
  line-height: var(--typo-interligne-titres);
  margin: 0;
}

.cat-pres-texte {
  margin: 0;
  font-size: var(--taille-chapo);
  color: var(--couleur-filet);
}

.cat-pres-tailles {
  list-style: none;
  margin: var(--espace-pas-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--espace-pas-1);
}

.cat-pres-tailles li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--espace-pas-3);
  padding-block: var(--espace-pas-1);
  border-bottom: var(--trait-filet) solid color-mix(in srgb, var(--couleur-base) var(--composant-presentation-filet), transparent);
  font-size: var(--taille-chapo);
}

.cat-pres-tailles small {
  color: var(--couleur-filet);
  font-size: var(--taille-secondaire);
}

.cat-pres-tailles .cat-montant {
  font-family: var(--police-titres);
  font-size: var(--taille-montant-compo);
  white-space: nowrap;
}

.cat-pres-compteur {
  margin: var(--espace-pas-2) 0 0;
  font-size: var(--taille-secondaire);
  color: var(--couleur-filet);
}

.cat-presentation .cat-fleche {
  position: fixed;
  background: color-mix(in srgb, var(--couleur-base) var(--composant-visionneuse-bouton-fond), transparent);
  color: var(--couleur-base);
  box-shadow: none;
}

.cat-presentation .cat-fleche.prec {
  left: var(--espace-pas-3);
}

.cat-presentation .cat-fleche.suiv {
  right: var(--espace-pas-3);
}

.cat-pres-outils {
  position: fixed;
  top: var(--espace-pas-3);
  right: var(--espace-pas-3);
  display: flex;
  align-items: center;
  gap: var(--espace-pas-3);
}

.cat-pres-outils .cat-interrupteur {
  color: var(--couleur-filet);
}

.cat-pres-fermer {
  font: inherit;
  font-weight: var(--graisse-gras);
  color: var(--couleur-encre);
  background: var(--couleur-base);
  border: 0;
  border-radius: var(--rayon-pilule);
  padding: var(--espace-pas-1) var(--espace-pas-4);
  min-height: var(--composant-zone-tactile);
  cursor: pointer;
}

/* Tablette en portrait et téléphone */
@container site (max-width: 900px) {
  .cat-fiche-cadre {
    grid-template-columns: minmax(0, 1fr);
  }

  .cat-fiche-grande img {
    aspect-ratio: var(--format-carte);
  }
}

@container site (max-width: 780px) {
  .cat-barre {
    grid-template-columns: minmax(0, 1fr);
  }

  .cat-actions {
    overflow-x: auto;
  }

  .cat-grille {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--composant-carte-produit-mobile)), 1fr));
    gap: var(--espace-pas-4) var(--espace-pas-2);
  }

  .cat-produit-actions .btn {
    padding-inline: var(--espace-pas-2);
  }

  .cat-famille-tete h2,
  .cat-famille-tete h3 {
    font-size: var(--taille-h2-mobile);
  }

  .app-tete-actions .app-lien-espace,
  .pro-marque small {
    display: none;
  }

  .cat-fiche-pour div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .cat-taille-nom small {
    display: none;
  }
}

/* Mode présentation sur un écran en hauteur (tablette en portrait, téléphone) : photo en haut, texte dessous */
@media (orientation: portrait) {
  .cat-pres-scene {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: start;
    padding: calc(var(--composant-zone-tactile) + var(--espace-pas-4)) var(--espace-pas-4) calc(var(--composant-visionneuse-bouton) + var(--espace-pas-5));
    gap: var(--espace-pas-3);
    overflow-y: auto;
  }

  .cat-pres-photo {
    height: auto;
    min-height: auto;
  }

  .cat-pres-photo img {
    max-height: 50dvh;
  }

  .cat-pres-compteur {
    text-align: center;
  }

  .cat-pres-nom {
    font-size: var(--taille-h2);
  }

  .cat-presentation .cat-fleche {
    top: auto;
    bottom: var(--espace-pas-3);
    translate: none;
  }
}

/* Téléphone : la fiche prend tout l'écran */
@container site (max-width: 560px) {
  .cat-fiche,
  .cat-fenetre {
    width: 100%;
    max-width: none;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    margin: 0;
  }

  .cat-fiche-cadre,
  .cat-fenetre-cadre {
    max-height: 100dvh;
    height: 100%;
  }

  .cat-fiche-infos,
  .cat-fenetre-cadre {
    padding: var(--espace-pas-4);
  }
}

/* Impression : le catalogue complet en A4, tailles et prix compris */
@media print {
  .app-tete-actions,
  .cat-barre,
  .cat-produit-actions,
  .cat-resultat,
  .cat-bandeau,
  .cat-commander .btns,
  .repere-brouillon,
  .cat-fiche,
  .cat-fenetre,
  .cat-presentation {
    display: none !important;
  }

  .cat-famille[hidden],
  .cat-produit[hidden] {
    display: block;
  }

  .cat-grille {
    grid-template-columns: repeat(3, 1fr);
  }

  .cat-produit {
    break-inside: avoid;
  }

  .cat-taille {
    font-size: var(--taille-mini);
  }

  .cat-famille {
    break-before: auto;
  }
}

/* 18-espace-pro.css */
/* Espace pro du deuil (/pro/espace/), 17 octobre 2026 : accueil et connexion, barre des rubriques collée en haut,
   commande en quatre étapes (fenêtre), commandes, chiffres (tuiles et barres des douze mois), factures, compte, partie
   de Léa. Script : assets/js/espace-pro.js. Le catalogue de l'onglet Commander suit 17-catalogue.css. */

.esp-tete {
  padding-block: var(--espace-entete-page) var(--espace-pas-3);
}

.esp-tete h1 {
  font-size: var(--taille-h1);
  margin: var(--espace-pas-1) 0 0;
}

.esp-chargement,
.esp-erreur {
  margin: var(--espace-pas-3) 0 0;
  padding: var(--espace-pas-2) var(--espace-pas-3);
  border-radius: var(--rayon-carte);
}

.esp-chargement {
  background: var(--couleur-teinte);
}

.esp-erreur {
  background: var(--couleur-statut-annule-fond);
  color: var(--couleur-statut-annule);
}

.esp-chargement[hidden],
.esp-erreur[hidden],
[data-vue][hidden],
.esp-onglet[hidden],
.esp-demo[hidden],
.esp [hidden] {
  display: none;
}

.esp-accueil {
  padding-bottom: var(--espace-section);
}

.esp-accueil .pro-chapeau {
  max-width: var(--espace-largeur-recit);
}

.esp-entrees {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--espace-pas-3);
  margin-top: var(--espace-bloc);
}

.esp-entrees .pro-carte {
  display: grid;
  align-content: start;
  gap: var(--espace-pas-2);
  padding: var(--espace-pas-4);
}

.esp-entrees h2 {
  font-size: var(--taille-titre-bloc);
  margin: 0;
}

.esp-entrees .btn,
.esp .btn,
.esp-fenetre .btn {
  border: 0;
  font-family: inherit;
  cursor: pointer;
  justify-self: start;
}

.esp-form-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-pas-1);
}

.esp-form-ligne input {
  flex: 1 1 12rem;
}

.esp-message {
  margin: 0;
  font-size: var(--taille-secondaire);
  color: var(--couleur-accent);
}

.esp-message:empty {
  display: none;
}

.esp-fenetre .esp-message[role="alert"],
.esp-form .esp-message {
  color: var(--couleur-statut-annule);
}

.esp-atouts {
  padding-top: var(--espace-section);
}

.esp-atouts h2 {
  font-size: var(--taille-h2);
  margin: 0 0 var(--espace-pas-3);
}

.esp-atouts ul {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--espace-pas-4);
}

.esp-atouts li {
  border-top: var(--trait-accent) solid var(--couleur-marque);
  padding-top: var(--espace-pas-3);
}

.esp-atouts h3 {
  font-size: var(--taille-h3);
  margin: 0 0 var(--espace-pas-1);
}

.esp-atouts p {
  margin: 0;
  color: var(--couleur-encre-douce);
}

/* Barre des rubriques, collée en haut */
.esp-barre {
  position: sticky;
  top: 0;
  z-index: var(--composant-plan-fenetre);
  background: color-mix(in srgb, var(--couleur-base) var(--composant-entete-opacite), transparent);
  backdrop-filter: blur(var(--composant-entete-flou));
  border-block: var(--trait-filet) solid var(--couleur-filet);
}

.app-espace .cat-barre {
  position: static;
  backdrop-filter: none;
}

.esp-barre-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-pas-2);
  padding-block: var(--espace-pas-1);
}

.esp-onglets {
  display: flex;
  gap: var(--espace-pas-1);
  overflow-x: auto;
  scrollbar-width: none;
}

.esp-onglets::-webkit-scrollbar {
  display: none;
}

.esp-onglets button {
  flex: none;
  font: inherit;
  font-size: var(--taille-secondaire);
  font-weight: var(--graisse-gras);
  color: var(--couleur-encre-douce);
  background: none;
  border: 0;
  border-bottom: var(--trait-accent) solid transparent;
  padding: var(--espace-pas-2) var(--espace-pas-2);
  min-height: var(--composant-zone-tactile);
  cursor: pointer;
  white-space: nowrap;
}

.esp-onglets button[aria-current="page"] {
  color: var(--couleur-encre);
  border-bottom-color: var(--couleur-encre);
}

/* Vue famille : rien de ce qui est réservé à l'agence (prix pro, livraison, marge) ne se voit. */
.esp-vue-famille .esp-agence {
  display: none !important;
}

.esp-barre-boutons {
  display: flex;
  align-items: center;
  gap: var(--espace-pas-1);
  flex: none;
}

.esp-vue-fenetre {
  float: right;
  margin: calc(-1 * var(--espace-pas-1)) var(--espace-section) 0 0;
}

.esp-vue-bouton[hidden] {
  display: none;
}

.esp-vue-bouton[aria-pressed="true"] {
  background: var(--couleur-encre);
  color: var(--couleur-base);
}

.esp-ref {
  font-family: var(--police-texte);
  font-size: var(--taille-mini);
  font-weight: var(--graisse-gras);
  letter-spacing: var(--typo-interlettrage-etiquette);
  color: var(--couleur-encre-douce);
}

.esp-groupe {
  border: var(--trait-filet) solid var(--couleur-filet);
  border-radius: var(--rayon-carte);
  padding: var(--espace-pas-3);
  margin: 0;
  display: grid;
  gap: var(--espace-pas-2);
}

.esp-groupe legend {
  font-size: var(--taille-secondaire);
  font-weight: var(--graisse-gras);
  padding-inline: var(--espace-pas-1);
}

.esp-groupe .esp-deux > label {
  display: grid;
  gap: var(--espace-pas-1);
  font-size: var(--taille-secondaire);
  font-weight: var(--graisse-gras);
}

.esp-groupe p {
  margin: 0;
}

.esp-carte-large {
  grid-column: 1 / -1;
}

.esp-commande-montant .esp-agence {
  font-size: var(--taille-mini);
  color: var(--couleur-accent);
}

.esp-bouton-panier {
  flex: none;
  padding: var(--espace-pas-2) var(--espace-pas-3);
}

.esp-bouton-panier .app-pastille {
  background: var(--couleur-base);
  color: var(--couleur-accent);
}

.esp-secousse {
  animation: esp-secousse 0.5s;
}

@keyframes esp-secousse {
  30% {
    transform: scale(1.08);
  }
  60% {
    transform: scale(0.97);
  }
}

@media (prefers-reduced-motion: reduce) {
  .esp-secousse {
    animation: none;
  }
}

.esp-demo {
  margin: var(--espace-pas-3) auto 0;
  padding: var(--espace-pas-2) var(--espace-pas-3);
  background: var(--couleur-statut-attente-fond);
  color: var(--couleur-statut-attente);
  border-radius: var(--rayon-carte);
  font-size: var(--taille-secondaire);
}

.esp-onglet {
  padding-block: var(--espace-pas-4) var(--espace-section);
}

.esp-onglet-tete {
  margin-bottom: var(--espace-pas-3);
  max-width: var(--espace-largeur-recit);
}

.esp-onglet-tete h2 {
  font-size: var(--taille-h2);
  margin: 0 0 var(--espace-pas-1);
}

.esp-onglet-tete p {
  margin: 0;
  color: var(--couleur-encre-douce);
}

.esp-outils {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-pas-2);
  margin-bottom: var(--espace-pas-3);
}

.esp-outils .cat-familles {
  mask-image: none;
  flex-wrap: wrap;
}

.esp-recherche input {
  min-width: 15rem;
}

.esp-vide {
  padding: var(--espace-bloc) var(--espace-pas-3);
  background: var(--couleur-creme);
  border-radius: var(--rayon-carte);
  text-align: center;
  color: var(--couleur-encre-douce);
}

/* Fenêtre de la commande */
.esp-fenetre-large {
  width: min(100% - 2 * var(--espace-marge-laterale), var(--composant-fiche-largeur));
}

.esp-fenetre h3 {
  font-size: var(--taille-h3);
}

.esp-fil {
  list-style: none;
  padding: 0;
  margin: var(--espace-pas-2) 0 var(--espace-pas-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-pas-1) var(--espace-pas-3);
  font-size: var(--taille-secondaire);
  color: var(--couleur-encre-douce);
}

.esp-fil li {
  display: flex;
  align-items: center;
  gap: var(--espace-pas-1);
}

.esp-fil span {
  display: inline-grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: var(--rayon-pilule);
  border: var(--trait-filet) solid var(--couleur-filet);
  font-weight: var(--graisse-gras);
}

.esp-fil li[aria-current="step"] {
  color: var(--couleur-encre);
  font-weight: var(--graisse-gras);
}

.esp-fil li[aria-current="step"] span,
.esp-fil li.fait span {
  background: var(--couleur-encre);
  border-color: var(--couleur-encre);
  color: var(--couleur-base);
}

.esp-articles,
.esp-recap-articles,
.esp-commandes,
.esp-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: none;
  display: grid;
  gap: var(--espace-pas-3);
}

.esp-article {
  border: var(--trait-filet) solid var(--couleur-filet);
  border-radius: var(--rayon-carte);
  padding: var(--espace-pas-3);
  display: grid;
  gap: var(--espace-pas-2);
}

.esp-article-tete {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--espace-pas-3);
  align-items: start;
}

.esp-article-tete img {
  width: var(--composant-pictogramme);
  height: var(--composant-pictogramme);
  object-fit: cover;
  border-radius: var(--rayon-vignette);
}

.esp-article-tete > div:nth-child(2) {
  display: grid;
  gap: var(--espace-pas-1);
}

.esp-mini {
  display: flex;
  align-items: center;
  gap: var(--espace-pas-1);
  font-size: var(--taille-secondaire);
  color: var(--couleur-encre-douce);
}

.esp-mini input[type="number"] {
  width: 5.5rem;
}

.esp-mini select {
  width: auto;
}

.esp-article-prix {
  display: grid;
  justify-items: end;
  text-align: right;
}

.esp-montant {
  font-weight: var(--graisse-gras);
  font-variant-numeric: tabular-nums;
}

.esp-article-prix small {
  font-size: var(--taille-mini);
  color: var(--couleur-encre-douce);
}

.esp-champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--espace-pas-2);
}

.esp-champs details {
  grid-column: 1 / -1;
}

.esp-champs details[open] {
  display: grid;
  gap: var(--espace-pas-2);
}

.esp-champs summary,
.esp-commande summary {
  cursor: pointer;
  color: var(--couleur-accent);
  font-size: var(--taille-secondaire);
}

.esp-champs label,
.esp-form > label,
.esp-form .esp-deux > label {
  display: grid;
  gap: var(--espace-pas-1);
  font-size: var(--taille-secondaire);
  font-weight: var(--graisse-gras);
  color: var(--couleur-encre);
}

.esp-retirer {
  justify-self: end;
  font-size: var(--taille-secondaire);
}

.esp-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--espace-pas-2);
  margin: var(--espace-pas-3) 0 0;
}

.esp-total strong {
  font-size: var(--taille-montant);
  font-family: var(--police-titres);
}

.esp-total small {
  width: 100%;
  text-align: right;
  font-size: var(--taille-mini);
  color: var(--couleur-encre-douce);
}

.esp-nav {
  justify-content: space-between;
  margin-top: var(--espace-pas-4);
}

.esp-form {
  display: grid;
  gap: var(--espace-pas-3);
}

.esp-form > label.cat-interrupteur {
  display: inline-flex;
  align-items: center;
  font-weight: var(--graisse-texte);
}

.esp-deux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--espace-pas-3);
}

.esp-deux > [hidden],
.esp-form [hidden] {
  display: none;
}

.esp-choix {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-pas-1);
}

.esp-choix legend {
  font-size: var(--taille-secondaire);
  font-weight: var(--graisse-gras);
  margin-bottom: var(--espace-pas-1);
}

.esp-choix label {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-pas-1);
  border: var(--trait-filet) solid var(--couleur-filet);
  border-radius: var(--rayon-pilule);
  padding: var(--espace-pas-1) var(--espace-pas-3);
  min-height: var(--composant-zone-tactile);
  font-size: var(--taille-secondaire);
  cursor: pointer;
}

.esp-choix label:has(input:checked) {
  border-color: var(--couleur-encre);
  background: var(--couleur-encre);
  color: var(--couleur-base);
}

.esp-choix input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.esp-choix label:has(input:focus-visible) {
  outline: var(--focus-epaisseur) solid var(--couleur-accent);
  outline-offset: var(--focus-decalage);
}

.esp-note {
  margin: 0;
  padding: var(--espace-pas-2) var(--espace-pas-3);
  background: var(--couleur-statut-attente-fond);
  color: var(--couleur-statut-attente);
  border-radius: var(--rayon-bouton);
  font-size: var(--taille-secondaire);
}

.esp-note-demo {
  margin-top: var(--espace-pas-2);
}

.esp-recap {
  margin: 0 0 var(--espace-pas-3);
  display: grid;
  gap: var(--espace-pas-1);
}

.esp-recap div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--espace-pas-2);
}

.esp-recap dt {
  color: var(--couleur-encre-douce);
  font-size: var(--taille-secondaire);
}

.esp-recap dd {
  margin: 0;
}

.esp-recap-articles {
  gap: var(--espace-pas-2);
  margin-bottom: var(--espace-pas-3);
}

.esp-recap-articles li {
  display: flex;
  justify-content: space-between;
  gap: var(--espace-pas-3);
  padding-bottom: var(--espace-pas-2);
  border-bottom: var(--trait-filet) solid var(--couleur-filet);
}

.esp-recap-articles small {
  color: var(--couleur-encre-douce);
}

.esp-totaux {
  margin-left: auto;
  border-collapse: collapse;
  min-width: min(100%, 20rem);
}

.esp-totaux th,
.esp-totaux td {
  padding: var(--espace-pas-1) 0;
  font-weight: var(--graisse-texte);
  text-align: left;
}

.esp-totaux td {
  text-align: right;
  padding-left: var(--espace-pas-4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.esp-total-ligne th,
.esp-total-ligne td {
  font-weight: var(--graisse-gras);
  border-top: var(--trait-repere) solid var(--couleur-encre);
}

.esp-marge th,
.esp-marge td {
  color: var(--couleur-accent);
}

.esp-grand {
  font-size: var(--taille-chapo);
}

/* Mes commandes */
.esp-commande {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--espace-pas-3);
  padding: var(--espace-pas-3);
  border: var(--trait-filet) solid var(--couleur-filet);
  border-radius: var(--rayon-carte);
  background: var(--couleur-base);
}

.esp-commande-date {
  display: grid;
  justify-items: center;
  align-content: start;
  min-width: 4.2rem;
  padding: var(--espace-pas-2) var(--espace-pas-1);
  background: var(--couleur-creme);
  border-radius: var(--rayon-vignette);
  font-size: var(--taille-mini);
  color: var(--couleur-encre-douce);
  text-transform: capitalize;
}

.esp-commande-date strong {
  font-family: var(--police-titres);
  font-size: var(--taille-montant);
  font-weight: var(--graisse-titres);
  color: var(--couleur-encre);
  line-height: var(--typo-interligne-serre);
}

.esp-commande-date small {
  font-weight: var(--graisse-gras);
  color: var(--couleur-encre);
}

.esp-commande-corps {
  display: grid;
  gap: var(--espace-pas-1);
  min-width: 0;
}

.esp-commande-corps p {
  margin: 0;
}

.esp-commande-titre {
  font-size: var(--taille-chapo);
}

.esp-commande details[open] {
  padding: var(--espace-pas-3);
  margin-top: var(--espace-pas-1);
  background: var(--couleur-teinte-2);
  border-radius: var(--rayon-vignette);
}

.esp-commande details[open] summary {
  margin-bottom: var(--espace-pas-2);
}

.esp-commande-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-pas-2);
  margin-top: var(--espace-pas-1);
}

.esp-commande-actions .btn {
  padding: var(--espace-pas-1) var(--espace-pas-3);
  font-size: var(--taille-secondaire);
}

.esp-commande-montant {
  display: grid;
  justify-items: end;
  align-content: start;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.esp-commande-montant small {
  font-size: var(--taille-mini);
  color: var(--couleur-encre-douce);
}

.esp-statut {
  display: inline-block;
  padding: 0.15em 0.65em;
  border-radius: var(--rayon-pilule);
  font-size: var(--taille-mini);
  font-weight: var(--graisse-gras);
}

.esp-statut-attente {
  background: var(--couleur-statut-attente-fond);
  color: var(--couleur-statut-attente);
}

.esp-statut-ok {
  background: var(--couleur-statut-ok-fond);
  color: var(--couleur-statut-ok);
}

.esp-statut-annule {
  background: var(--couleur-statut-annule-fond);
  color: var(--couleur-statut-annule);
}

.esp-photo {
  width: 100%;
  border-radius: var(--rayon-carte);
}

.esp-photo-bouton {
  cursor: pointer;
}

/* Mes chiffres */
.esp-tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--espace-pas-2);
  margin: var(--espace-pas-3) 0 var(--espace-bloc);
}

.esp-tuile {
  display: grid;
  gap: var(--espace-pas-1);
  align-content: start;
  padding: var(--espace-pas-3);
  border-radius: var(--rayon-carte);
  background: var(--couleur-creme);
}

.esp-tuile span {
  font-size: var(--taille-mini);
  text-transform: uppercase;
  letter-spacing: var(--typo-interlettrage-etiquette);
  color: var(--couleur-encre-douce);
}

.esp-tuile strong {
  font-family: var(--police-titres);
  font-weight: var(--graisse-titres);
  font-size: var(--taille-statistique);
  line-height: var(--typo-interligne-serre);
  font-variant-numeric: tabular-nums;
}

.esp-tuile small {
  font-size: var(--taille-mini);
  color: var(--couleur-encre-douce);
}

.esp-tuile-forte {
  background: var(--couleur-teinte);
}

.esp-tuile-forte strong {
  color: var(--couleur-olive-fonce);
}

.esp-graphique {
  margin: 0 0 var(--espace-bloc);
}

.esp-graphique figcaption {
  font-weight: var(--graisse-gras);
  margin-bottom: var(--espace-pas-3);
}

.esp-barres {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--espace-pas-1);
  align-items: end;
  height: var(--composant-graphique-hauteur);
  border-bottom: var(--trait-filet) solid var(--couleur-filet);
}

.esp-colonne {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
}

.esp-pile {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: min(100%, 2.4rem);
  justify-self: center;
}

.esp-barre-achats,
.esp-barre-marge {
  display: block;
  width: 100%;
}

.esp-barre-achats {
  background: var(--couleur-accent-clair);
  border-radius: 0 0 var(--trait-repere) var(--trait-repere);
}

.esp-barre-marge {
  background: var(--couleur-olive-fonce);
  border-radius: var(--trait-repere) var(--trait-repere) 0 0;
}

.esp-colonne-mois {
  text-align: center;
  font-size: var(--taille-mini);
  color: var(--couleur-encre-douce);
  padding-top: var(--espace-pas-1);
  transform: translateY(100%);
}

.esp-legende {
  display: flex;
  align-items: center;
  gap: var(--espace-pas-1);
  margin: var(--espace-pas-5) 0 0;
  font-size: var(--taille-secondaire);
  color: var(--couleur-encre-douce);
}

.esp-puce-achats,
.esp-puce-marge {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  border-radius: var(--trait-repere);
  margin-left: var(--espace-pas-2);
}

.esp-puce-achats {
  background: var(--couleur-accent-clair);
}

.esp-puce-marge {
  background: var(--couleur-olive-fonce);
}

.esp-deux-tableaux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--espace-bloc);
}

.esp-tableau {
  overflow-x: auto;
}

.esp-tableau h3 {
  font-size: var(--taille-h3);
  margin: 0 0 var(--espace-pas-2);
}

.esp-tableau th,
.esp-tableau td {
  text-align: left;
  vertical-align: top;
  padding: var(--espace-pas-2) var(--espace-pas-3) var(--espace-pas-2) 0;
  border-bottom: var(--trait-filet) solid var(--couleur-filet);
  font-variant-numeric: tabular-nums;
}

.esp-tableau thead th {
  font-size: var(--taille-mini);
  text-transform: uppercase;
  letter-spacing: var(--typo-interlettrage-etiquette);
  color: var(--couleur-encre-douce);
  white-space: nowrap;
}

/* Mes factures */
.esp-encours p {
  display: grid;
  gap: var(--espace-pas-1);
  margin: 0 0 var(--espace-pas-3);
  padding: var(--espace-pas-4);
  border-radius: var(--rayon-carte);
  background: var(--couleur-teinte);
  max-width: var(--espace-largeur-etroite);
}

.esp-encours strong {
  font-family: var(--police-titres);
  font-weight: var(--graisse-titres);
  font-size: var(--taille-statistique);
}

.esp-encours small {
  color: var(--couleur-encre-douce);
}

/* Mon compte */
.esp-compte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--espace-pas-3);
}

.esp-compte .pro-carte {
  display: grid;
  align-content: start;
  gap: var(--espace-pas-2);
  padding: var(--espace-pas-4);
}

.esp-compte h3 {
  font-size: var(--taille-h3);
  margin: 0;
}

.esp-compte p {
  margin: 0;
}

.esp-lien {
  margin: 0;
}

.esp-lien input {
  font-size: var(--taille-secondaire);
}

.esp-liste {
  gap: var(--espace-pas-2);
}

.esp-liste li {
  padding-left: var(--espace-pas-3);
  border-left: var(--trait-filet) solid var(--couleur-marque);
}

.esp-admin {
  padding-bottom: var(--espace-section);
}

.esp-admin h3 {
  font-size: var(--taille-h3);
  margin: var(--espace-bloc) 0 var(--espace-pas-3);
}

.esp-connexion-admin {
  display: grid;
  gap: var(--espace-pas-2);
  max-width: var(--composant-fenetre-largeur);
  padding: var(--espace-pas-4);
}

/* Message bref (popover) */
.esp-avis {
  inset: auto auto var(--espace-pas-4) 50%;
  translate: -50% 0;
  margin: 0;
  border: 0;
  padding: var(--espace-pas-2) var(--espace-pas-4);
  border-radius: var(--rayon-pilule);
  background: var(--couleur-encre);
  color: var(--couleur-base);
  font-size: var(--taille-secondaire);
  box-shadow: var(--ombre-forte);
  max-width: calc(100% - 2 * var(--espace-marge-laterale));
}

.esp-avis:not([popover]) {
  display: none;
}

.esp-avis.visible:not([popover]) {
  display: block;
  position: sticky;
  bottom: var(--espace-pas-4);
}

@container site (max-width: 560px) {
  .esp-fenetre-large {
    width: 100%;
  }

  .app-compte {
    display: none;
  }
}

@container site (max-width: 780px) {
  .esp-barre-ligne {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .esp-barre-boutons {
    order: -1;
    margin-top: var(--espace-pas-1);
  }

  .esp-bouton-panier {
    flex: 1;
    text-align: center;
  }

  .esp-commande {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .esp-commande-montant {
    grid-column: 2;
    justify-items: start;
    text-align: left;
  }

  .esp-article-tete {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .esp-article-prix {
    grid-column: 1 / -1;
    justify-items: start;
    text-align: left;
  }

  .esp-recap div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .esp-recherche,
  .esp-recherche input {
    width: 100%;
    min-width: 0;
  }

  .esp-nav {
    flex-direction: column-reverse;
  }

  .esp-nav .btn {
    justify-self: stretch;
    text-align: center;
  }
}