/* editorial.css : la famille éditoriale dans le système Arche (méthode,
   à propos, avis, réalisations, FAQ, conseils, articles).

   La mise en page commune des héros intérieurs est dans core.css (texte à
   gauche, baie cintrée à droite) ; on n'ajoute ici que ce qui est propre à
   la famille : la moulure de pierre qui suit la baie (comme sur l'accueil),
   le rameau en filigrane, et une composition de téléphone à part entière.

   Le geste de la famille est « la marge illustrée » : comme dans un livre,
   une baie collante accompagne la lecture et change de vue avec le chapitre
   (data-vues, sur bureau). Sur téléphone, chaque chapitre porte sa propre
   petite baie.

   Rien n'est caché en attendant le JavaScript : ces règles sont l'état final.
   Les numéros sont toujours dans une petite arche de pierre, jamais en grand
   chiffre posé sur un titre (correction de l'audit sur la méthode). */

@layer components {

  /* ======================================================================
     Le héros éditorial
     ====================================================================== */
  .edito-hero { --baie-h: clamp(460px, 74svh, 720px); --baie-m: clamp(230px, 34svh, 340px); }
  .edito-hero__titre { font-size: var(--fs-h1); }
  .edito-hero__titre--long { font-size: clamp(2.2rem, 1.1rem + 2.6vw, 3.9rem); max-width: 16em; }
  .edito-hero__dates { font-size: var(--fs-petit); color: var(--encre-doux); }
  .rameau--edito { width: min(38vw, 520px); height: min(38vw, 520px); top: -8%; left: -7%; transform: rotate(-10deg); }
  @media (min-width: 900px) {
    .edito-hero .edito-hero__panneau { height: var(--baie-h); }
    /* La moulure de pierre : elle suit l'arche à 16 px, côtés et cintre, base ouverte. */
    .edito-hero .edito-hero__moulure { grid-column: 2; grid-row: 1 / span 2; align-self: start; justify-self: stretch; height: calc(var(--baie-h) + 16px); margin: -16px -16px 0; border: 1px solid var(--pierre); border-bottom: 0; border-radius: var(--cintre); pointer-events: none; }
    /* Un héros sans image (recherche de la FAQ, côte des réalisations) : la colonne de droite prend sa hauteur naturelle. */
    .edito-hero .edito-hero__aside { height: auto; align-self: center; }
  }
  @media (max-width: 899px) {
    /* Téléphone : titre, baie, chapo puis bouton tiennent dans le premier écran. */
    .edito-hero__grille { display: flex; flex-direction: column; }
    .edito-hero__titre { order: 1; font-size: clamp(2.15rem, 1.2rem + 4.4vw, 3rem); }
    .edito-hero__titre--long { font-size: clamp(1.95rem, 1.1rem + 4vw, 2.6rem); }
    .edito-hero .edito-hero__panneau { order: 2; width: 88%; height: var(--baie-m); margin-left: auto; }
    .edito-hero__moulure { display: none; }
    .edito-hero__intro { order: 3; }
    .edito-hero .edito-hero__aside { order: 4; width: 100%; margin-top: var(--esp-l); }
    .rameau--edito { width: 80vw; height: 80vw; top: -4%; left: -34%; }
  }
  /* Tablette : une baie plus étroite et plus haute, jamais une demi-lune
     écrasée, centrée sous le titre : poussée à droite, elle laissait un tiers
     vide à gauche, bancal plutôt que voulu. */
  @media (min-width: 600px) and (max-width: 899px) {
    .edito-hero { --baie-m: clamp(320px, 42svh, 460px); }
    .edito-hero .edito-hero__panneau { width: min(72%, 520px); margin-inline: auto; }
  }

  /* Un en-tête de section : surtitre, titre, chapo. */
  .ed-tete { max-width: 44rem; }
  .ed-tete > h2 { font-size: var(--fs-h2-s); }
  .ed-tete > p:not(.surtitre) { margin-top: var(--esp-m); color: var(--encre-doux); }
  .ed-tete--centre { margin-inline: auto; text-align: center; }
  .ed-tete--centre .surtitre { justify-content: center; }
  .ed-tete--centre > p:not(.surtitre) { margin-inline: auto; }

  /* ======================================================================
     La méthode : cinq chapitres, une baie collante qui change de vue
     ====================================================================== */
  .chapitres { padding-block: var(--section-y); }
  .chapitres__grille { display: grid; grid-template-columns: minmax(0, 1fr); }
  .chapitres__liste { position: relative; }
  .chapitres__fil { position: absolute; top: 24px; bottom: 24px; left: 19px; width: 1px; background: linear-gradient(180deg, var(--pierre), rgba(205, 184, 149, .15)); transform-origin: top; pointer-events: none; }
  .chapitre { position: relative; display: flex; flex-direction: column; gap: var(--esp-m); padding-left: 68px; }
  .chapitre + .chapitre { margin-top: var(--esp-2xl); }
  .chapitre__tete { display: flex; align-items: center; gap: 1rem; margin-left: -68px; }
  .chapitre__tete .surtitre { margin: 0; }
  .chapitre__tete .surtitre::before { display: none; }
  /* Le numéro dans une arche de pierre de 40 × 48, sur l'enduit : il ne passe jamais sur un titre. */
  .chapitre__num { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 48px; padding-top: 6px; border: 1px solid var(--pierre); border-radius: 999px 999px 4px 4px; background: var(--chaux); font-size: .95rem; color: var(--argile); }
  .chapitre h2 { font-size: var(--fs-h2-s); max-width: 15em; }
  .chapitre__texte > * + * { margin-top: var(--esp-m); }
  .chapitre__texte p { color: var(--encre-doux); max-width: 34em; }
  .chapitres__baie { display: none; }
  .chapitre .arche--mobile { margin: 0 0 .5rem -68px; }
  @media (min-width: 900px) {
    .chapitres__grille { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: clamp(48px, 7vw, 120px); }
    .chapitres__liste { grid-column: 1; grid-row: 1; }
    .chapitre { min-height: 70svh; justify-content: center; padding-block: 5vh; }
    .chapitre + .chapitre { margin-top: 0; }
    .chapitres__baie { display: block; grid-column: 2; grid-row: 1; position: sticky; top: 13svh; align-self: start; height: 74svh; }
    /* La baie occupe toute la hauteur : la légende qui la suivait répétait le repère du chapitre. */
    .chapitres__arche { height: 100%; box-shadow: var(--ombre-baie); }
    .chapitres__arche img { position: absolute; inset: 0; opacity: 0; transform: scale(1.05); transition: opacity 1.6s var(--doux), transform 2.4s var(--doux); }
    .chapitres__arche img.is-actif { opacity: 1; transform: none; }
  }
  @media (max-width: 899px) {
    .chapitre .arche--mobile { width: calc(100% + 68px); aspect-ratio: 5 / 4; border-radius: var(--anse); }
    .chapitre:nth-child(odd of .chapitre) .arche--mobile { width: calc(88% + 68px); }
    .chapitre:nth-child(even of .chapitre) .arche--mobile { width: 88%; margin-left: auto; margin-right: 0; }
    .chapitres__fil { display: none; }
  }
  @media (max-width: 599px) {
    .chapitre { padding-left: 0; }
    .chapitre__tete, .chapitre .arche--mobile { margin-left: 0; }
    .chapitre .arche--mobile, .chapitre:nth-child(odd of .chapitre) .arche--mobile { width: 92%; }
  }
  .sechage { display: grid; border-top: var(--filet); max-width: 34em; }
  .sechage > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding-block: .8rem; border-bottom: var(--filet); }
  .sechage dt { font: italic 1.15rem / 1.3 var(--serif); color: var(--argile); }
  .sechage dd { margin: 0; color: var(--encre); }

  /* Les limites : le texte, puis le relevé dans une niche de chaux. */
  .limites { position: relative; padding-block: var(--section-y); background: var(--enduit); }
  .limites__grille { display: grid; gap: var(--esp-xl) clamp(2.5rem, 7vw, 8rem); align-items: center; }
  .limites__texte > * + * { margin-top: var(--esp-m); }
  .limites__texte h2 { font-size: var(--fs-h2-s); margin-top: 0; }
  .limites__texte p { color: var(--encre-doux); max-width: 32em; }
  .limites__niche { position: relative; max-width: 30rem; width: 100%; justify-self: center; padding: clamp(5.5rem, 9vw, 7.5rem) clamp(1.75rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem); border-radius: 999px 999px var(--rayon) var(--rayon); background: var(--chaux-clair); box-shadow: inset 0 0 0 1px rgba(205, 184, 149, .55), var(--ombre-douce); }
  .limites__intro { margin: 0 auto var(--esp-m); text-align: center; font: italic 1.25rem / 1.3 var(--serif); color: var(--argile); }
  .limites__liste { border-top: var(--filet); }
  /* Un retrait intérieur et un retour équilibré : la ligne la plus longue
     (« Les décolorations anciennes… ») ne touche plus les flancs de la niche. */
  .limites__liste li { padding: .95rem .9rem; border-bottom: var(--filet); text-align: center; font: 400 var(--fs-h4) / 1.3 var(--serif); text-wrap: balance; max-width: none; }
  @media (min-width: 900px) { .limites__grille { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }

  /* ======================================================================
     À propos
     ====================================================================== */
  .apropos-reperes { padding-block: var(--section-y-s); }
  .apropos-reperes .stat > span { max-width: 13em; margin-inline: auto; }
  /* Les quatre libellés réservent la même hauteur (deux lignes) : « 15 textiles
     et 10 nautiques » passe sur deux lignes, les autres n'en ont qu'une, et
     la rangée paraissait boiter. */
  @media (min-width: 900px) { .apropos-reperes .stat > span { min-height: 2.6em; } }

  /* L'approche : trois matières dans trois baies en gradins, puis le texte. */
  .approche { padding-block: var(--section-y); background: var(--enduit); }
  .approche__grille { display: grid; gap: var(--esp-xl) clamp(2.5rem, 7vw, 8rem); align-items: center; }
  .approche__baies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 22px); align-items: start; }
  .approche__baie { margin: 0; }
  .approche__baie .arche { aspect-ratio: 9 / 16; box-shadow: var(--ombre-douce); }
  .approche__baie:nth-child(2) { margin-top: clamp(2rem, 5vw, 4.5rem); }
  .approche__baie:nth-child(3) { margin-top: clamp(4rem, 10vw, 9rem); }
  .approche__baie figcaption { margin-top: .8rem; text-align: center; font: italic 1.1rem / 1.3 var(--serif); color: var(--encre-doux); text-wrap: balance; }
  /* Le salon voûté : le canapé est à gauche de la photo, on le garde dans la baie. */
  .approche__baie:first-child img { object-position: 22% 50%; }
  .approche__baies:focus-visible { outline: 2px solid var(--argile); outline-offset: 6px; border-radius: var(--rayon); }
  /* Téléphone : une bande qui défile au doigt, une baie et demie à l'écran
     (environ 62 % de la largeur chacune), au lieu de trois baies de 110 px
     illisibles. Les gradins restent, plus serrés. Sans JS, rien ne change. */
  @media (max-width: 599px) {
    .approche__baies { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge); overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--marge)); padding: 4px var(--marge) 1rem; scrollbar-width: none; }
    .approche__baies::-webkit-scrollbar { display: none; }
    .approche__baie { flex: 0 0 62%; scroll-snap-align: start; }
    .approche__baie:nth-child(2) { margin-top: 1.5rem; }
    .approche__baie:nth-child(3) { margin-top: 3rem; }
  }
  .approche__texte > * + * { margin-top: var(--esp-m); }
  .approche__texte h2 { font-size: var(--fs-h2-s); margin-top: 0; }
  .approche__texte p:not(.lead, .surtitre) { color: var(--encre-doux); }
  @media (min-width: 900px) { .approche__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

  /* Les quatre principes : une colonnade, chaque principe sous sa petite arche. */
  .principes-section { padding-block: var(--section-y); }
  .principes { display: grid; gap: var(--esp-xl) 0; margin-top: var(--esp-xl); }
  .principe { position: relative; display: flex; flex-direction: column; gap: .9rem; max-width: none; }
  .principe__num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 48px; padding-top: 6px; border: 1px solid var(--pierre); border-radius: 999px 999px 4px 4px; font-size: .9rem; color: var(--argile); }
  .principe h3 { font-size: var(--fs-h4); }
  .principe p { color: var(--encre-doux); font-size: var(--fs-petit); }
  @media (min-width: 600px) { .principes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .principe { padding-inline: clamp(1rem, 2vw, 2rem); } .principe:nth-child(odd) { padding-left: 0; } .principe:nth-child(even) { border-left: var(--filet); } }
  @media (min-width: 1100px) { .principes { grid-template-columns: repeat(4, minmax(0, 1fr)); } .principe + .principe { border-left: var(--filet); } .principe:nth-child(odd) { padding-left: clamp(1rem, 2vw, 2rem); } .principe:first-child { padding-left: 0; } }

  /* Le matériel : la buse dans sa baie, collante sur bureau, et la fiche. */
  .materiel { padding-block: var(--section-y); background: var(--enduit); }
  .materiel__grille { display: grid; gap: var(--esp-xl) clamp(2.5rem, 7vw, 8rem); align-items: start; }
  .materiel__baie { aspect-ratio: 4 / 5; max-height: 72svh; width: 100%; box-shadow: var(--ombre-baie); }
  .materiel__baie picture { inset: -6% 0; }
  .materiel__texte > .fiche { margin-top: var(--esp-xl); }
  @media (min-width: 900px) {
    .materiel__grille { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
    .materiel__baie { position: sticky; top: 14svh; }
    .materiel .fiche > div { grid-template-columns: 12rem minmax(0, 1fr); }
  }
  @media (max-width: 899px) { .materiel__baie { width: 78%; aspect-ratio: 4 / 4.4; } }

  /* La zone et la frise des 30 ports. */
  .zone { position: relative; padding-block: var(--section-y) var(--section-y-s); overflow: hidden; }
  .zone__grille { display: grid; gap: var(--esp-xl) clamp(2.5rem, 7vw, 8rem); align-items: end; }
  .zone__texte > * + *, .zone__aside > * + * { margin-top: var(--esp-m); }
  .zone__texte h2 { font-size: var(--fs-h2-s); margin-top: 0; }
  .zone__texte p:not(.lead, .surtitre) { color: var(--encre-doux); }
  @media (min-width: 900px) { .zone__grille { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
  /* Bureau avec JS : toute la section s'épingle, calée par le bas de l'écran
     (data-horizontal="bas"), pendant que la frise glisse. Le texte, la liste
     et la frise remplissent ensemble l'écran : plus d'aplat vide sous la
     frise. Le haut de section est resserré pour que l'ensemble tienne dans
     une fenêtre de portable. */
  .js-bureau .zone.js-galerie { padding-block: var(--section-y-s) clamp(1.5rem, 4svh, 3rem); }
  .js-bureau .zone.js-galerie .ports { margin-top: var(--esp-l); }
  .ports { position: relative; margin-top: var(--esp-xl); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--marge); scrollbar-width: none; padding-inline: var(--marge); }
  /* Les fondus des bords disent que la frise continue hors champ. Un masque
     sur la fenêtre, et non un calque : il ne défile pas avec la piste (au doigt
     comme épinglée par le JS) et ne capte aucun clic. Il reste opaque sur toute
     la largeur du .wrap : le premier port, à l'arrivée, n'est pas voilé, et
     le dernier, au bout de la piste, s'arrête avant le fondu (marge de fin). */
  .ports { --fondu: max(var(--marge), 3rem); -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--marge), #000 calc(100% - var(--fondu)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--marge), #000 calc(100% - var(--fondu)), transparent); }
  .ports::-webkit-scrollbar { display: none; }
  .ports__titre { position: sticky; left: 0; margin-bottom: var(--esp-l); font: 400 var(--fs-h3) / 1.15 var(--serif); max-width: none; }
  .ports__titre em { color: var(--argile); }
  /* La piste porte sa propre marge de fin : au bout du défilement, le dernier
     port garde la gouttière du .wrap au lieu de coller au bord. */
  .ports__piste { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); gap: 16px; width: max-content; padding: 6px var(--fondu, var(--marge)) 1rem 0; }
  .port { scroll-snap-align: start; max-width: none; }
  /* Chaque port dans une niche, d'une seule taille : un nom long passe à la ligne, jamais en plus petit. */
  .port a { display: flex; flex-direction: column; justify-content: flex-end; gap: .3rem; width: 15rem; height: 100%; min-height: 9.5rem; padding: 1.8rem 1.4rem 1.3rem; border-radius: 120px 120px var(--rayon) var(--rayon); background: var(--chaux-clair); box-shadow: inset 0 0 0 1px rgba(205, 184, 149, .6); transition: translate var(--dur-survol) var(--doux), box-shadow var(--dur-survol) var(--doux); }
  .port a:is(:hover, :focus-visible) { translate: 0 -5px; box-shadow: inset 0 0 0 1px var(--argile), var(--ombre-douce); }
  .port__nom { display: block; font: 400 1.35rem / 1.2 var(--serif); text-wrap: balance; }
  .port__commune { font-size: var(--fs-petit); color: var(--encre-doux); }

  /* Garanties et liens. */
  .garanties { padding-block: var(--section-y); }
  .garanties .retire { margin-top: var(--esp-xl); }
  /* Trois colonnes : 3 + 2 garanties (3 + 3 quand le SIRET s'affiche), jamais une orpheline seule en deuxième ligne. */
  @media (min-width: 900px) { .garanties .retire { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .garanties__lien { margin-top: var(--esp-l); }
  .plus-loin { padding-block: var(--section-y-s) var(--section-y); }
  .plus-loin .link-list { margin-top: var(--esp-l); }

  /* ======================================================================
     Avis : six niches en arcade, la source
     ====================================================================== */
  .temoignages { padding-block: var(--section-y); }
  .temoignages__grille { display: grid; gap: var(--gouttiere); margin-top: var(--esp-xl); align-items: start; }
  .temoignage { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--esp-m); padding: 5rem clamp(1.5rem, 2.4vw, 2.4rem) 2.2rem; border-radius: 999px 999px var(--rayon) var(--rayon); background: var(--chaux-clair); box-shadow: inset 0 0 0 1px rgba(205, 184, 149, .5), var(--ombre-douce); text-align: center; max-width: none; transition: translate var(--dur-survol) var(--doux); }
  .temoignage:hover { translate: 0 -5px; }
  .temoignage::before { content: "«"; position: absolute; left: 50%; top: 1.5rem; transform: translateX(-50%); font: 3.4rem / 1 var(--serif); color: var(--argile-doux); }
  .temoignage blockquote { font: italic 400 clamp(1.3rem, 1.1rem + .5vw, 1.55rem) / 1.35 var(--serif); color: var(--encre); max-width: 22ch; text-wrap: pretty; }
  .temoignage__auteur { display: flex; flex-direction: column; gap: 2px; max-width: none; font-size: var(--fs-petit); font-weight: var(--fw-appui); }
  .temoignage__auteur small { font: italic 400 1.05rem / 1.3 var(--serif); color: var(--encre-doux); }
  /* Téléphone : une piste au doigt plutôt qu'un empilement de six niches
     (environ 3 000 px). La carte suivante dépasse à droite : on voit qu'il y
     en a d'autres. Sans JS, le défilement natif suffit. */
  @media (max-width: 719px) {
    .temoignages__grille { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--marge)); padding: 4px 16px 1.25rem; scrollbar-width: none; align-items: stretch; }
    .temoignages__grille::-webkit-scrollbar { display: none; }
    .temoignage { flex: 0 0 82vw; scroll-snap-align: start; padding-top: 4.5rem; }
    .temoignage:hover { translate: none; }
  }
  @media (min-width: 720px) { .temoignages__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .temoignage:nth-child(even) { margin-top: 3.5rem; } }
  @media (min-width: 1100px) {
    .temoignages__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* L'arcade : la colonne du milieu descend d'un demi-cintre. */
    .temoignage:nth-child(even) { margin-top: 0; }
    .temoignage:nth-child(3n + 2) { margin-top: 4.5rem; }
  }
  .avis-source { padding-block: 0 var(--section-y); }
  .avis-source__panneau { display: grid; gap: var(--esp-m) var(--esp-xl); align-items: center; max-width: 60rem; margin-inline: auto; padding: clamp(1.75rem, 4vw, 3rem); border-radius: var(--rayon); background: var(--enduit); text-align: center; }
  .avis-source__panneau p { margin-inline: auto; color: var(--encre-doux); }
  .avis-source__note { display: flex; justify-content: center; align-items: baseline; gap: .7rem; max-width: none; }
  .avis-source__note strong { font: 300 var(--fs-repere) / 1 var(--sans); color: var(--argile); }
  .avis-source__note span { font: italic 1.2rem / 1.3 var(--serif); color: var(--encre-doux); }

  /* ======================================================================
     Réalisations : des relevés, jamais des photos de chantier
     ====================================================================== */
  /* La côte des escales, dans un cartouche en anse de panier. */
  .chantiers__carte { padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--anse); background: var(--chaux-clair); box-shadow: inset 0 0 0 1px rgba(205, 184, 149, .55), var(--ombre-douce); }
  .chantiers__carte .coastline__point text { font-size: 40px; opacity: 1; }
  .chantiers__carte .coastline__point circle { r: 9; }
  /* Tablette : la carte est plus haute que large, le cintre descend bas ; on
     pousse le tracé sous la courbe (Sainte-Maxime touchait le cintre). */
  @media (min-width: 700px) and (max-width: 899px) { .chantiers__carte { padding-top: clamp(4.5rem, 10vw, 6rem); } }
  /* Les escales en texte : masquées sur bureau, où le tracé les nomme. */
  .chantiers__escales { display: none; }
  @media (max-width: 699px) {
    /* Sur téléphone, le texte du tracé (30 unités sur 1 200) tomberait vers 9 px :
       on le masque et on nomme les escales en HTML, à taille de lecture. */
    .chantiers__carte .coastline__point text { display: none; }
    .chantiers__escales { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.1rem; margin-top: var(--esp-s); font-size: var(--fs-petit); color: var(--encre); }
    .chantiers__escales li { position: relative; max-width: none; }
    .chantiers__escales li + li::before { content: ""; position: absolute; left: -.62rem; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--argile); }
  }
  .chantiers__carte > p { margin: var(--esp-s) auto 0; text-align: center; font: italic 1.15rem / 1.4 var(--serif); color: var(--encre-doux); }
  .releves { padding-block: var(--section-y-s) var(--section-y); }
  .releves .filters { margin-top: 0; }
  .releves__grille { display: grid; gap: var(--gouttiere); margin-top: var(--esp-l); }
  @media (min-width: 720px) { .releves__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  /* Téléphone : une piste au doigt (la carte suivante dépasse au bord) plutôt
     que six cartes identiques empilées sur 2 600 px. Les filtres restent
     au-dessus ; gallery.js masque une carte par l'attribut hidden, ce qui
     la retire aussi de la piste. Sans JS, le défilement natif suffit. */
  @media (max-width: 719px) {
    .releves__grille { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge); overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--marge)); padding: 4px var(--marge) 1.25rem; scrollbar-width: none; align-items: stretch; }
    .releves__grille::-webkit-scrollbar { display: none; }
    .releve { flex: 0 0 85%; scroll-snap-align: start; }
    .releve[hidden] { display: none; }
    .releve:hover { translate: none; }
  }
  @media (min-width: 1100px) { .releves__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .releve { display: flex; flex-direction: column; margin: 0; padding: clamp(1.25rem, 2vw, 1.6rem); border-radius: var(--rayon); background: var(--chaux-clair); box-shadow: inset 0 0 0 1px rgba(205, 184, 149, .5); transition: translate var(--dur-survol) var(--doux), box-shadow var(--dur-survol) var(--doux); }
  .releve:hover { translate: 0 -4px; box-shadow: inset 0 0 0 1px rgba(205, 184, 149, .8), var(--ombre-douce); }
  /* La fiche de relevé, toute en texte : un en-tête d'une ligne (le rang dans
     la même petite arche de pierre que les chapitres de la méthode, le type
     en surtitre), puis la fibre en grand italique posée sur la carte. Plus de
     plaque d'enduit unie en tête : elle prenait 40 % de la carte pour deux
     mots (la « vignette beige » relevée par l'audit). */
  .releve__tete { display: flex; align-items: center; gap: .9rem; }
  .releve__rang { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 48px; padding-top: 6px; border: 1px solid var(--pierre); border-radius: 999px 999px 4px 4px; background: var(--chaux); font-size: .95rem; color: var(--argile); }
  .releve__type { margin: 0; font-size: var(--fs-mini); font-weight: var(--fw-appui); letter-spacing: .14em; text-transform: uppercase; color: var(--encre-doux); max-width: none; }
  .releve__fibre { margin-top: var(--esp-m); padding-bottom: var(--esp-m); border-bottom: var(--filet); font: italic 400 clamp(1.7rem, 1.3rem + 1vw, 2.2rem) / 1.1 var(--serif); color: var(--argile); text-wrap: balance; max-width: none; }
  /* Téléphone : la carte reste compacte, l'en-tête et la fibre tiennent sous 3 rem chacun. */
  @media (max-width: 719px) { .releve__fibre { margin-top: .6rem; padding-bottom: .7rem; font-size: 1.6rem; } }
  .releve figcaption { display: flex; flex-direction: column; gap: var(--esp-s); padding-top: var(--esp-m); flex: 1 1 auto; }
  .releve__titre { font-size: var(--fs-h4); line-height: 1.22; }
  .releve__lieu { max-width: none; }
  .releve__lieu .btn--lin { min-height: var(--cible); padding: 0 1.1rem; font-size: .92rem; }
  .releve__mesures { display: grid; margin-top: auto; border-top: var(--filet); }
  .releve__mesures > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .8rem; padding-block: .6rem; border-bottom: var(--filet); }
  .releve__mesures dt { font: italic 1.05rem / 1.35 var(--serif); color: var(--argile); }
  .releve__mesures dd { margin: 0; font-size: var(--fs-petit); color: var(--encre); }

  /* ======================================================================
     FAQ : la recherche dans une niche, le sommaire en pilules, les catégories
     ====================================================================== */
  .faq-niche { position: relative; display: grid; gap: 1.4rem; padding: clamp(5rem, 9vw, 7.5rem) clamp(1.5rem, 3vw, 2.75rem) clamp(1.9rem, 3vw, 2.75rem); border-radius: 999px 999px var(--rayon) var(--rayon); background: var(--chaux-clair); box-shadow: inset 0 0 0 1px rgba(205, 184, 149, .55), var(--ombre-douce); }
  .faq-recherche { position: relative; display: grid; gap: .5rem; }
  .faq-niche__titre { margin-top: .4rem; padding-top: 1.2rem; border-top: var(--filet); text-align: center; font: italic 1.08rem / 1.3 var(--serif); color: var(--encre-doux); max-width: none; }
  .faq-niche .faq-sommaire { justify-content: center; }
  .faq-recherche label { text-align: center; font: italic 1.2rem / 1.3 var(--serif); color: var(--argile); }
  /* Sans JavaScript, le champ ne filtrerait rien : une commande morte. On le
     retire (les catégories et les details natifs suffisent). Une requête
     média et non une classe posée par le JS : aucun saut de mise en page au
     chargement quand le JS est là. */
  @media (scripting: none) { .faq-recherche { display: none; } .faq-niche__titre { margin-top: 0; padding-top: 0; border-top: 0; } }
  .faq-sommaire { display: flex; flex-wrap: wrap; gap: 10px; }
  .faq-sommaire a { display: inline-flex; align-items: center; gap: .6rem; min-height: var(--cible); padding: 0 1.1rem; border-radius: var(--pill); box-shadow: inset 0 0 0 1px var(--contour); font-size: .92rem; transition: background-color var(--dur-survol) var(--doux); }
  .faq-sommaire a:is(:hover, :focus-visible) { background: var(--lin); }
  .faq-sommaire .u-num { font-size: .8rem; color: var(--argile); }
  .faq-cat { padding-block: var(--section-y-s); }
  .faq-cat:nth-child(even of .faq-cat) { background: var(--enduit); }
  .faq-cat:nth-child(even of .faq-cat) .faq__num { background: var(--chaux-clair); }
  .faq-cat__grille { display: grid; gap: var(--esp-l) clamp(2.5rem, 6vw, 7rem); align-items: start; }
  .faq-cat__tete > * + * { margin-top: var(--esp-s); }
  .faq-cat__tete h2 { font-size: var(--fs-h2-s); }
  .faq-cat__nb { font: italic 1.15rem / 1.3 var(--serif); color: var(--argile); }
  @media (min-width: 900px) { .faq-cat__grille { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } .faq-cat__tete { position: sticky; top: calc(var(--h-entete) + 2.5rem); } .faq-cat .faq-zone { max-width: none; } }

  /* ======================================================================
     Conseils : l'article à la une, les guides
     ====================================================================== */
  .une { padding-block: var(--section-y-s) var(--section-y); }
  .une__grille { display: grid; gap: var(--esp-xl) clamp(2.5rem, 7vw, 8rem); align-items: center; }
  /* La une dans une anse de panier couchée : plus large que haute, elle ne
     peint jamais la photo au-delà de 640 px de large (source nette jusqu'à
     1 280 px, donc nette aussi sur écran dense), et varie les formes de baie. */
  .une__baie { aspect-ratio: 4 / 3; width: 100%; max-width: 600px; box-shadow: var(--ombre-baie); }
  .une__baie picture { inset: -6% 0; }
  .une__texte > * + * { margin-top: var(--esp-m); }
  .une__texte h2 { font-size: var(--fs-h2-s); margin-top: 0; }
  @media (min-width: 900px) { .une__grille { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
  @media (max-width: 899px) { .une__baie { width: 86%; } }
  .guides-liste { padding-block: var(--section-y); background: var(--enduit); }
  .guides { margin-top: var(--esp-xl); border-top: var(--filet); }
  .guide { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 1rem clamp(1.25rem, 3vw, 2.5rem); align-items: center; padding-block: 1.6rem; border-bottom: var(--filet); max-width: none; }
  .guide > .guide__pied { grid-column: 2; }
  .guide__baie { display: block; width: 88px; height: 112px; box-shadow: var(--ombre-douce); }
  .guide__corps > * + * { margin-top: .35rem; }
  .guide__cat { font: italic 1.05rem / 1.3 var(--serif); color: var(--argile); }
  .guide__titre { font-size: var(--fs-h4); line-height: 1.22; transition: color var(--dur-survol) var(--doux), translate var(--dur-survol) var(--doux); }
  /* Toute la ligne est cliquable : le lien du titre la couvre. */
  .guide .guide__titre a { color: inherit; font-weight: inherit; background: none; }
  .guide__titre a::after { content: ""; position: absolute; inset: 0; }
  .guide:is(:hover, :focus-within) .guide__titre { color: var(--argile); translate: 6px 0; }
  .guide__reponse { font-size: var(--fs-petit); color: var(--encre-doux); max-width: 62ch; }
  /* Le pied de la ligne : une pilule « Lire l'article » (décorative, le lien du
     titre couvre la ligne) et la date. Sous le texte sur téléphone ; sur
     bureau, dans une colonne de droite (voir plus bas), pour que la liste
     occupe toute la largeur au lieu d'en laisser la moitié vide. */
  .guide__pied { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; max-width: none; }
  .guide__lire { min-height: 40px; padding: .55rem 1.15rem; font-size: .9rem; pointer-events: none; }
  .guide:is(:hover, :focus-within) .guide__lire { box-shadow: inset 0 0 0 1px var(--argile); }
  .guide:is(:hover, :focus-within) .guide__lire::before { clip-path: inset(0 0 0 0 round 0); }
  .guide:is(:hover, :focus-within) .guide__lire::after { transform: translateX(5px); }
  .guide__date { font-size: var(--fs-petit); color: var(--encre-doux); }
  @media (min-width: 900px) {
    .guide { grid-template-columns: 112px minmax(0, 1fr) minmax(11rem, auto); column-gap: clamp(2rem, 4vw, 4rem); }
    .guide__baie { width: 112px; height: 142px; }
    .guide > .guide__pied { grid-column: 3; flex-direction: column; align-items: flex-end; text-align: right; }
    .guide__reponse { max-width: 70ch; }
  }
  @media (max-width: 899px) { .guide { align-items: start; } .guide > .guide__pied { margin-top: -.25rem; } }

  /* ======================================================================
     Article : la marge (repères, sommaire), le texte
     ====================================================================== */
  .article-corps { padding-block: var(--section-y-s) var(--section-y); }
  .article-grille { display: grid; gap: var(--esp-xl) clamp(2.5rem, 6vw, 7rem); align-items: start; }
  .article-marge { display: grid; gap: var(--esp-l); }
  .article-marge dl { display: grid; border-top: var(--filet); }
  .article-marge dl > div { display: grid; gap: .2rem; padding-block: .7rem; border-bottom: var(--filet); }
  .article-marge dt { font: italic 1.05rem / 1.3 var(--serif); color: var(--argile); }
  .article-marge dd { margin: 0; font-size: var(--fs-petit); }
  .article-marge__sommaire > p { margin-bottom: .4rem; font: italic 1.15rem / 1.3 var(--serif); color: var(--argile); }
  .article-marge__sommaire ol { display: grid; list-style: none; padding: 0; margin: 0; }
  .article-marge__sommaire a { display: flex; align-items: center; min-height: var(--cible); padding-block: .5rem; font-size: var(--fs-petit); line-height: 1.4; color: var(--encre-doux); background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: color var(--dur-survol) var(--doux), background-size var(--dur-survol) var(--doux); }
  .article-marge__sommaire a:is(:hover, :focus-visible) { color: var(--argile); }
  .article-texte h2 { font-size: var(--fs-h3); }
  .article-texte h2:not(:first-child) { margin-top: var(--esp-xl); }
  .article-texte p { margin-top: var(--esp-m); color: var(--encre-doux); }
  @media (min-width: 900px) { .article-grille { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); } .article-marge { position: sticky; top: calc(var(--h-entete) + 2rem); } }
  /* Les dates à un seul endroit : la marge sur bureau, la ligne compacte du
     héros sur téléphone (elles apparaissaient deux fois). */
  @media (min-width: 900px) { .edito-hero__dates { display: none; } }
  @media (max-width: 899px) { .article-marge__sommaire, .article-marge dl > .article-marge__date { display: none; } }
  .article-diy { padding-block: var(--section-y); background: var(--enduit); }
  .article-diy__grille, .article-liens__grille, .article-auteurs__grille { display: grid; gap: var(--esp-xl) clamp(2.5rem, 6vw, 7rem); align-items: start; }
  .article-diy__grille h2, .article-liens__grille h2, .article-auteurs__grille h2 { font-size: var(--fs-h2-s); }
  @media (min-width: 900px) { .article-diy__grille, .article-liens__grille, .article-auteurs__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
  .article-liens { padding-block: var(--section-y) var(--section-y-s); }
  .article-liens .link-list { margin-top: 0; }
  .article-auteurs { padding-block: var(--section-y-s) var(--section-y); }
  .article-auteurs p { color: var(--encre-doux); }
  .diy { display: grid; gap: var(--esp-xl) clamp(2rem, 4vw, 3.5rem); }
  @media (min-width: 720px) { .diy { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .diy h3 { padding-bottom: var(--esp-s); border-bottom: var(--filet-plein); font-size: var(--fs-h4); }
  .diy ul { list-style: none; margin: 0; padding: 0; }
  .diy li { position: relative; padding: .9rem 0 .9rem 2rem; border-bottom: var(--filet); max-width: none; }
  .diy__ok li::before { content: ""; position: absolute; left: 2px; top: 1.3rem; width: 9px; height: 15px; border-radius: 0 100% 0 100%; background: var(--olive); opacity: .75; transform: rotate(28deg); }
  .diy__non li::before { content: ""; position: absolute; left: 0; top: 1.6rem; width: 13px; height: 1px; background: var(--argile); }
}