/* nautisme.css : le silo nautisme dans le système Arche.
   Hub /nautisme/, intervention à quai, fiches prestations
   (tpl/nautisme-prestation.php), fiches matières (tpl/matiere.php), ports
   (tpl/port.php) et les pages index. Le silo partage la chaux, l'enduit et le
   lin du reste du site ; la mise en page des héros est dans core.css (classes
   hero-naut), ici seulement leurs finitions.

   Le geste propre du silo, la « baie de bord » (.naut-vues) : une baie
   collante qui change de vue pendant la lecture, sur bureau à pointeur fin
   seulement (là où motion.js la pilote) ; ailleurs chaque article porte sa
   propre baie, à la largeur de l'écran.

   Sans JavaScript, tout ce qui suit est l'état final : aucune règle ne cache
   un contenu en attendant une animation. Feuille chargée sur toutes les
   pages : toutes les classes nouvelles portent le préfixe naut-. */

@layer components {
  /* Les photos de mer étaient saturées, sans étalonnage : sur l'ivoire et le
     sable d'Arche, le silo semblait appartenir à un autre site. Un léger
     réchauffement rapproche les bleus de la palette sans les délaver (les
     fiches textiles font de même avec .arche--rechauffee). */
  .silo-nautisme main picture img { filter: saturate(.88) sepia(.07); }

  /* ---- Héros : moulure de pierre autour de la baie, rameau en filigrane ---- */
  .hero-naut__titre { font-size: var(--fs-h1); }
  .hero-naut__lead { max-width: 32em; }
  /* Variante de tpl/nautisme-hero.php (gabarit de la direction précédente,
     plus inclus par le silo) : gardée pour qu'il reste correct s'il resservait. */
  .hero-naut--fiche { min-width: 0; }
  /* La moulure suit l'arche à 16 px (côtés et cintre, base ouverte), comme à
     l'accueil ; motion.js la fait apparaître (--moulure) après l'ouverture. */
  .hero-naut--arche .hero-naut__panneau::before { content: ""; position: absolute; inset: -16px -16px 0; border: 1px solid var(--pierre); border-bottom: 0; border-radius: var(--cintre); pointer-events: none; opacity: var(--moulure, 1); }
  /* Photo en paysage dans la baie du héros : débord de 3 % seulement (la
     course de parallaxe est réduite d'autant), pour rester sous la largeur
     native de l'image à DPR 2 (tpl/nautisme-arche.php, naut_heros()). */
  .hero-naut__volet.hero-naut__volet--paysage picture { inset: -3% 0; }
  .rameau--naut { width: min(38vw, 520px); height: min(38vw, 520px); top: -8%; left: -7%; transform: rotate(-12deg); }
  .hero-naut__meta { border-top: var(--filet); max-width: 34rem; }
  .hero-naut__meta > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .3rem 1rem; padding-block: .8rem; border-bottom: var(--filet); align-items: baseline; }
  .hero-naut__meta dt { font: italic 1.08rem / 1.3 var(--serif); color: var(--argile); }
  .hero-naut__meta dd { margin: 0; font-size: var(--fs-petit); color: var(--encre-doux); max-width: none; }
  .hero-naut__surtitre { margin: 0 0 .9rem; }
  @media (min-width: 900px) {
    .hero-naut--arche { min-height: calc(100svh - var(--h-entete)); align-content: center; }
    /* Comme à l'accueil : surtitre, titre et chapô forment une colonne
       centrée verticalement face à la baie (le titre était collé au sommet
       de la baie), au corps du titre de l'accueil. Les deux rangées 1fr
       encadrent la colonne ; la baie les couvre toutes. */
    .hero-naut--arche { grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr); }
    .hero-naut--arche > .hero-naut__surtitre { grid-column: 1; grid-row: 2; }
    .hero-naut--arche > .hero-naut__titre { grid-row: 3; align-self: start; padding-top: 0; font-size: var(--fs-h1-accueil); line-height: 1.04; }
    .hero-naut--arche > .hero-naut__bas { grid-row: 4; }
    .hero-naut--arche > .hero-naut__panneau { grid-row: 1 / -1; align-self: center; }
  }
  @media (max-width: 899px) {
    /* Téléphone : titre, baie, chapô, bouton dans le premier écran ; les
       repères viennent ensuite. */
    .hero-naut { display: flex; flex-direction: column; }
    .hero-naut__surtitre { order: 0; margin-bottom: .6rem; }
    .hero-naut__titre { order: 1; font-size: clamp(2.15rem, 1.1rem + 4.6vw, 3rem); }
    .hero-naut__panneau { order: 2; }
    .hero-naut__bas { order: 3; }
    .hero-naut--arche .hero-naut__panneau::before { inset: -10px -10px 0; }
    .hero-naut__meta > div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
    .rameau--naut { width: 92vw; height: 92vw; top: -6%; left: -36%; }
  }
  @media (max-width: 600px) and (max-height: 700px) {
    /* Petit téléphone (375 × 667) : la baie et les marges se resserrent pour
       que le bouton « Devis pour mon bateau » reste dans le premier écran. */
    .hero-naut--arche { padding-top: .75rem; }
    .hero-naut--arche .hero-naut__panneau { height: clamp(190px, 29svh, 300px); margin-top: 1.1rem; }
    .hero-naut--arche .hero-naut__titre { font-size: clamp(2rem, 1rem + 4.4vw, 2.6rem); }
    .hero-naut--arche .hero-naut__bas { margin-top: 1rem; }
    .hero-naut--arche .hero-naut__bas > * + * { margin-block-start: 1rem; }
    .hero-naut--arche .hero-naut__lead { font-size: 1.02rem; line-height: 1.55; }
  }

  /* ---- Repères chiffrés sous le héros ---- */
  .naut-reperes { overflow: clip; }
  .naut-reperes--seuls { padding-bottom: var(--section-y-s); }

  /* ---- Grille commune : tête collante à gauche, corps à droite ---- */
  .naut-grille { display: grid; gap: var(--esp-xl) var(--gouttiere); }
  .naut-grille__tete > * + * { margin-block-start: var(--esp-m); }
  .naut-grille__tete > .surtitre + h2 { margin-block-start: 0; }
  .naut-grille__tete h2 { max-width: 12em; }
  .naut-grille__corps { min-width: 0; }
  .naut-grille__corps > .registre + *, .naut-grille__corps > .naut-sous-titre + .link-list { margin-top: var(--esp-l); }
  .naut-grille__corps > .link-list + .link-list { margin-top: var(--esp-m); }
  .naut-grille__corps > .lead + .fiche { margin-top: var(--esp-l); }
  @media (min-width: 900px) {
    .naut-grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
    .naut-grille__tete { position: sticky; top: calc(var(--h-entete) + 2.5rem); }
    .naut-grille--large { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  }
  .naut-liste-ports a { font-size: .9rem; }
  .naut-sous-titre { margin-top: var(--esp-xl); font: italic 400 1.35rem / 1.3 var(--serif); color: var(--argile); }
  .naut-note { font-size: var(--fs-petit); color: var(--encre-doux); }

  /* ---- La baie du silo : l'image déborde de 6 % pour la parallaxe ---- */
  .naut-baie { display: block; width: 100%; box-shadow: var(--ombre-baie); }
  .naut-baie picture { inset: -6% 0; }

  /* ---- Duo : une baie et son texte côte à côte ---- */
  .naut-duo__grille { display: grid; gap: var(--esp-xl) clamp(2.5rem, 7vw, 8rem); align-items: center; }
  .naut-duo__baie { height: clamp(420px, 78svh, 760px); }
  /* Photo en paysage : peinte sur la hauteur de la baie, elle déborde en
     largeur ; 640 px de haut au plus la gardent sous sa largeur native
     (2 400 px) à DPR 2, même au rapport 1,6. */
  @media (min-width: 900px) { .naut-duo__baie.naut-baie--paysage { height: clamp(380px, 64svh, 640px); } }
  .naut-duo__texte { min-width: 0; }
  .naut-duo__texte > * + * { margin-block-start: var(--esp-l); }
  .naut-duo__texte > .surtitre + h2 { margin-block-start: 0; }
  .naut-duo__texte .checklist { max-width: 36rem; }
  @media (min-width: 900px) {
    .naut-duo__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .naut-duo--inverse .naut-duo__baie { order: 2; }
    /* La liste est plus haute que l'écran : la baie reste en vue pendant la lecture. */
    .naut-duo--colle .naut-duo__grille { align-items: start; }
    .naut-duo--colle .naut-duo__baie { position: sticky; top: calc(var(--h-entete) + 4svh); height: calc(100svh - var(--h-entete) - 9svh); max-height: 760px; }
    .naut-duo--colle .naut-duo__baie.naut-baie--paysage { max-height: 640px; }
  }
  @media (max-width: 899px) {
    /* Téléphone : la baie au-dessus du texte, en retrait d'un côté puis de l'autre. */
    .naut-duo__baie { width: 90%; height: clamp(300px, 108vw, 520px); }
    .naut-duo--inverse .naut-duo__baie { margin-left: auto; }
  }

  /* ---- Les quatre agressions du milieu marin ---- */
  .naut-agressions { border-top: var(--filet); }
  .naut-agressions li { padding-block: 1.3rem; border-bottom: var(--filet); max-width: none; }
  .naut-agressions h3 { font-size: var(--fs-h3); }
  .naut-agressions p { margin-top: .4rem; color: var(--encre-doux); max-width: 38ch; }

  /* ---- La baie de bord : baie collante qui change de vue (data-vues) ---- */
  .naut-vues__tete { margin-bottom: var(--esp-xl); }
  .naut-coques .naut-vues__tete { margin-bottom: var(--esp-2xl); }
  .naut-vues__liste { min-width: 0; }
  .naut-vues__item > * + * { margin-block-start: var(--esp-m); }
  .naut-vues__item > .surtitre + h3, .naut-vues__item > .naut-protocole__num + h2 { margin-block-start: .4rem; }
  .naut-vues__item h3 { font-size: clamp(2rem, 1.3rem + 1.6vw, 3rem); }
  .naut-vues__item > p:not(.surtitre, .naut-protocole__num) { color: var(--encre-doux); max-width: 34em; }
  .naut-vues__item .naut-vues__accroche { font: italic 400 1.3rem / 1.4 var(--serif); color: var(--encre); max-width: 26em; }
  .naut-vues__duree { padding-top: var(--esp-s); border-top: var(--filet); font-size: var(--fs-petit); max-width: 34rem; }
  .naut-vues__item .checklist { max-width: 34rem; }
  .naut-vues__baie { display: none; }
  .naut-vues__mobile { width: 100%; max-width: 100%; height: clamp(280px, 100vw, 500px); margin-bottom: var(--esp-l); }
  .naut-vues__item { padding-bottom: clamp(4rem, 12vh, 7rem); }
  .naut-vues__item:last-child { padding-bottom: 0; }
  .naut-vues__item:nth-child(even) .naut-vues__mobile { width: 88%; margin-left: auto; }
  .naut-vues__item:nth-child(odd):not(:first-child) .naut-vues__mobile { width: 88%; }
  /* Sans baie collante (pas de JavaScript, mouvement réduit, écran tactile),
     chaque article garde sa baie : sur bureau, la colonne de lecture reste étroite. */
  @media (min-width: 900px) { .naut-vues__liste { max-width: 46rem; } }
  /* La baie collante n'existe que là où motion.js la pilote : bureau, pointeur
     fin, JavaScript présent et mouvement autorisé. Sinon elle montrerait
     une seule vue figée pendant que les articles défilent. */
  @media (min-width: 900px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .js .naut-vues__grille { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 8rem); }
    .js .naut-vues__baie { display: block; position: sticky; top: calc(var(--h-entete) + 5svh); height: calc(100svh - var(--h-entete) - 10svh); max-height: 760px; align-self: start; }
    .js .naut-vues__arche { height: calc(100% - 56px); box-shadow: var(--ombre-baie); }
    /* 760 px au plus : les vues en paysage (catamaran, yacht) sont peintes sur
       la hauteur et restent ainsi sous leurs 2 400 px natifs à DPR 2. */
    .js .naut-vues__arche img { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity 1.6s var(--doux), transform 2.4s var(--doux); }
    .js .naut-vues__arche img.is-actif { opacity: 1; transform: none; }
    .js .naut-vues__repere { margin: 20px auto 0; text-align: center; font: italic 1.3rem / 1.3 var(--serif); color: var(--argile); max-width: none; }
    .js .naut-vues__mobile { display: none; }
    .js .naut-vues__item { min-height: calc(100svh - var(--h-entete) - 10svh); display: flex; flex-direction: column; justify-content: center; padding-block: 8vh; }
    .js .naut-vues__item:last-child { padding-bottom: 8vh; }
  }

  /* ---- Le protocole à quai : six points, numérotés dans une arche de pierre ---- */
  .naut-protocole__num { display: flex; align-items: center; gap: .9rem; font: italic 1.2rem / 1.3 var(--serif); color: var(--argile); }
  .naut-protocole__arche { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 48px; padding-top: 6px; border: 1px solid var(--pierre); border-radius: 999px 999px 4px 4px; background: var(--chaux-clair); font-size: .95rem; font-style: normal; color: var(--argile); }
  .naut-protocole { scroll-margin-top: var(--h-entete); }
  .naut-protocole__point h2 { font-size: var(--fs-h2-s); }
  .naut-protocole__point .table-wrap { max-width: 40rem; }

  /* ---- Énoncés : ce que comprend l'intervention, ce que nous ne faisons pas ---- */
  .enonces { border-top: var(--filet); counter-reset: enonce; }
  .enonces li { position: relative; min-height: 4.6rem; padding: 1.2rem 0 1.2rem 4rem; border-bottom: var(--filet); font: 400 var(--fs-h4) / 1.32 var(--serif); max-width: none; }
  .enonces li::before { content: counter(enonce); counter-increment: enonce; position: absolute; left: 0; top: .95rem; 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-clair); font: 400 .95rem / 1 var(--sans); font-variant-numeric: var(--fvn); color: var(--argile); }
  .enonces--non li { min-height: 0; padding-left: 2.6rem; color: var(--encre-doux); }
  .enonces--non li::before { content: ""; top: 1.95rem; width: 16px; height: 1px; padding: 0; border: 0; border-radius: 0; background: var(--argile); }
  .enonces--serre li { font-size: 1.2rem; }

  /* ---- Catalogue : le registre des prestations, une petite baie par ligne ---- */
  .catalogue__ligne { grid-template-columns: auto minmax(0, 1fr); }
  /* La vignette d'une ligne : la photo de la fiche dans une petite baie,
     assez grande pour se lire (42 × 50 px ne montraient aucun sujet). */
  .catalogue__ligne .registre__fibre { width: 72px; height: 88px; }
  .naut-vignette { background-size: cover; background-repeat: no-repeat; }
  .catalogue__texte { min-width: 0; }
  .catalogue__texte .registre__meta { max-width: 60ch; }
  .catalogue__saison { display: block; margin-bottom: .2rem; font: italic 1.02rem / 1.3 var(--serif); color: var(--argile); }

  /* ---- Les matières : la rangée de baies, le nom toujours sous l'image ---- */
  .matieres-bande .naut-grille { margin-bottom: var(--esp-xl); }
  .persienne--liens { padding-bottom: .5rem; }
  /* Au doigt, la première baie se cale sur la gouttière, jamais contre le bord de l'écran. */
  .naut-nuancier { scroll-padding-inline: var(--marge); }
  .naut-nuancier .lame__nom { color: var(--encre); }
  /* « Lire la fiche » : une petite pilule à contour et sa flèche, jamais un
     texte qui ressemble à un lien (toute la carte reste la cible). */
  .naut-nuancier .lame__nom small { align-self: flex-start; display: inline-flex; align-items: center; min-height: 32px; margin-top: .45rem; padding: 4px 12px; border: 1px solid var(--pierre); border-radius: var(--pill); font: 450 .84rem / 1.2 var(--sans); color: var(--encre); transition: border-color var(--dur-survol) var(--doux), color var(--dur-survol) var(--doux); }
  .naut-nuancier .lame__nom small::after { content: ""; display: inline-block; width: .95em; height: .6em; margin-left: .5em; background: var(--fleche) center / contain no-repeat; transition: transform var(--dur-survol) var(--doux); }
  .naut-nuancier .lame:is(:hover, :focus-visible) .lame__nom small { border-color: var(--argile); color: var(--argile); }
  .naut-nuancier .lame:is(:hover, :focus-visible) .lame__nom small::after { transform: translateX(4px); }
  .naut-nuancier__intro { font-size: var(--fs-petit); line-height: 1.6; color: var(--encre-doux); }
  .naut-nuancier__invite { display: none; }
  @media (max-width: 699px) {
    /* Une carte presque pleine largeur et l'arrêt sur chaque carte : la
       suivante ne dépasse que de son image, jamais au milieu d'un mot. */
    .naut-nuancier { scroll-snap-type: x mandatory; padding-inline-end: var(--marge); }
    .naut-nuancier .lame { flex: 0 0 min(74vw, 300px); scroll-snap-align: start; }
    .naut-nuancier__invite { display: block; margin: .2rem var(--marge) 0; font: italic 1rem / 1.3 var(--serif); color: var(--encre-doux); }
    .naut-nuancier__invite::after { content: ""; display: inline-block; width: .95em; height: .6em; margin-left: .5em; background: var(--fleche) center / contain no-repeat; }
  }
  @media (min-width: 700px) {
    /* Quatre baies au plus : dès la tablette elles tiennent sur la largeur,
       sans défilement (à 768, la quatrième était coupée et la première collée au bord). */
    .naut-nuancier { justify-content: center; overflow: visible; }
    .naut-nuancier .lame { flex: 0 1 290px; min-width: 0; }
    .naut-nuancier .lame__nom { font-size: clamp(1.3rem, .9rem + .8vw, 1.6rem); }
  }
  @media (min-width: 700px) and (max-width: 1099px) {
    /* Avec l'introduction de chaque fiche, quatre colonnes seraient trop
       étroites pour se lire : deux par rangée, sur la largeur du texte. */
    .naut-nuancier--fiches { flex-wrap: wrap; row-gap: var(--esp-xl); max-width: 46rem; margin-inline: auto; }
    .naut-nuancier--fiches .lame { flex: 0 1 calc(50% - 16px); }
  }

  /* ---- La côte du silo ---- */
  .cote-naut { overflow: hidden; }
  .cote-naut__grille { display: grid; gap: var(--esp-l) var(--gouttiere); }
  .cote-naut__tete > .surtitre + h2 { margin-top: 0; }
  .cote-naut__titre { max-width: 12em; }
  .cote-naut__texte { display: grid; gap: var(--esp-m); align-content: end; }
  .cote-naut__chiffres { font: 400 1.45rem / 1.4 var(--serif); max-width: 30ch; }
  .cote-naut__chiffres strong { font: 300 var(--fs-repere) / 1 var(--sans); color: var(--argile); vertical-align: -.1em; margin-right: .15em; }
  .cote-naut__trace { min-width: 0; }
  .cote-naut__trace .link-list { margin-top: var(--esp-xl); }
  @media (min-width: 900px) {
    .cote-naut__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
    .cote-naut__trace { grid-column: 1 / -1; margin-top: var(--esp-l); }
  }
  @media (max-width: 899px) {
    /* La côte garde sa lisibilité : elle défile au doigt plutôt que de rétrécir. */
    .cote-naut__trace > .coastline > svg { min-width: 760px; }
    .cote-naut__trace > .coastline { overflow-x: auto; margin-inline: calc(-1 * var(--marge)); padding-inline: var(--marge); scrollbar-width: none; }
  }

  /* ---- Les saisons : trois niches de chaux ---- */
  .saisons { display: grid; gap: var(--gouttiere); }
  .saisons li { display: flex; flex-direction: column; gap: .8rem; padding: 3rem 2rem 2.2rem; border-radius: 180px 180px var(--rayon) var(--rayon); background: var(--chaux-clair); box-shadow: inset 0 0 0 1px rgba(205, 184, 149, .55); max-width: none; transition: translate var(--dur-survol) var(--doux), box-shadow var(--dur-survol) var(--doux); }
  .saisons li:hover { translate: 0 -4px; box-shadow: inset 0 0 0 1px rgba(205, 184, 149, .9), var(--ombre-douce); }
  .saisons__periode { font: italic 1.15rem / 1.3 var(--serif); color: var(--argile); max-width: none; text-align: center; }
  .saisons__titre { font-size: var(--fs-h3); text-align: center; }
  .saisons__texte { color: var(--encre-doux); }
  .naut-saisons__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-m) var(--esp-l); }
  .naut-saisons__pied .tarif-note { font-size: var(--fs-petit); color: var(--encre-doux); max-width: 46ch; }
  @media (min-width: 900px) { .saisons { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* ---- Selon votre bateau : quatre niches (fiches prestations) ---- */
  .naut-niches { display: grid; gap: var(--gouttiere); }
  .naut-niche { display: flex; flex-direction: column; gap: .8rem; padding: 3rem 1.7rem 1.8rem; border-radius: 160px 160px var(--rayon) var(--rayon); background: var(--chaux-clair); box-shadow: inset 0 0 0 1px rgba(205, 184, 149, .55); max-width: none; transition: translate var(--dur-survol) var(--doux), box-shadow var(--dur-survol) var(--doux); }
  .naut-niche:hover { translate: 0 -4px; box-shadow: inset 0 0 0 1px rgba(205, 184, 149, .9), var(--ombre-douce); }
  .naut-niche h3 { font-size: var(--fs-h3); text-align: center; }
  .naut-niche > p { font-size: var(--fs-petit); color: var(--encre-doux); }
  .naut-niche__taille { text-align: center; font: italic 1.1rem / 1.3 var(--serif); color: var(--argile); }
  .naut-niche > .naut-niche__taille { font-size: 1.1rem; color: var(--argile); }
  .naut-niche__duree { margin-top: auto; padding-top: .8rem; border-top: var(--filet); }
  @media (min-width: 720px) { .naut-niches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1180px) { .naut-niches { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  /* ---- Les métiers du nautisme : six encadrés à haut cintré ---- */
  .metiers__tete { margin-bottom: var(--esp-xl); align-items: end; }
  .metiers { display: grid; gap: var(--gouttiere); }
  .metiers__cellule { position: relative; display: flex; flex-direction: column; gap: .9rem; padding: 2.8rem 2rem 2rem; border-radius: 120px 120px var(--rayon) var(--rayon); background: var(--chaux-clair); box-shadow: inset 0 0 0 1px rgba(205, 184, 149, .55); transition: box-shadow var(--dur-survol) var(--doux), translate var(--dur-survol) var(--doux); }
  .metiers__cellule:is(:hover, :focus-within) { translate: 0 -4px; box-shadow: inset 0 0 0 1px rgba(205, 184, 149, .9), var(--ombre-douce); }
  .metiers__cellule h3 { font-size: var(--fs-h3); text-align: center; }
  .metiers__cellule > p { color: var(--encre-doux); }
  .metiers__engagements { display: grid; gap: .5rem; padding-top: .9rem; border-top: var(--filet); }
  .metiers__engagements > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .8rem; font-size: var(--fs-petit); }
  .metiers__engagements dt { font: italic 1rem / 1.35 var(--serif); color: var(--argile); }
  .metiers__engagements dd { margin: 0; color: var(--encre-doux); }
  .metiers__cellule > .metiers__action { margin-top: auto; padding-top: .4rem; }
  @media (min-width: 720px) { .metiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .metiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* ---- La frise des trente ports (défile à l'horizontale sur bureau) ---- */
  .frise { position: relative; overflow: hidden; }
  .frise__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--esp-m) var(--esp-l); margin-bottom: var(--esp-xl); }
  .frise__tete > p { color: var(--encre-doux); max-width: 34ch; }
  .frise__piste { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
  .frise__piste > li { max-width: none; }
  .frise__port, .naut-voisin { display: flex; flex-direction: column; justify-content: flex-end; gap: .3rem; height: 100%; min-height: 11rem; padding: 2rem 1.4rem 1.3rem; border-radius: 110px 110px var(--rayon) var(--rayon); background: var(--chaux-clair); box-shadow: inset 0 0 0 1px rgba(205, 184, 149, .6); text-align: center; transition: translate var(--dur-survol) var(--doux), box-shadow var(--dur-survol) var(--doux); }
  .frise__port:is(:hover, :focus-visible), .naut-voisin:is(:hover, :focus-visible) { translate: 0 -5px; box-shadow: inset 0 0 0 1px var(--argile), var(--ombre-douce); }
  /* Un seul corps pour tous les noms : un nom long passe sur deux lignes, il ne grossit ni ne rétrécit. */
  .frise__nom, .naut-voisin__nom { display: block; font: 400 1.3rem / 1.2 var(--serif); text-wrap: balance; }
  .frise__commune, .frise__anneaux, .naut-voisin__commune, .naut-voisin__anneaux { font-size: var(--fs-petit); color: var(--encre-doux); }
  .frise__commune, .naut-voisin__commune { font: italic 1.02rem / 1.3 var(--serif); color: var(--argile); }
  @media (max-width: 599px) {
    /* Téléphone : deux niches par rangée, la frise ne fait plus cinq mètres de long. */
    .frise__piste, .naut-voisins__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .frise__port, .naut-voisin { min-height: 9.5rem; padding: 1.8rem .8rem 1rem; border-radius: 90px 90px var(--rayon-s) var(--rayon-s); }
    .frise__nom, .naut-voisin__nom { font-size: 1.1rem; }
    .frise__commune, .naut-voisin__commune { font-size: .92rem; }
    .frise__anneaux, .naut-voisin__anneaux { font-size: var(--fs-mini); }
  }
  .js-galerie .frise__piste { grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: 15rem; width: max-content; }

  /* ---- Page port : ports voisins en niches ---- */
  .naut-voisins__liste { display: grid; gap: var(--gouttiere); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 22rem)); }
  .naut-voisin { min-height: 13rem; }
  .naut-voisins__liste > li { max-width: none; }
  .naut-voisins__liste + .link-list { margin-top: var(--esp-l); }
  .port-cote { margin-top: var(--esp-l); max-width: 30rem; }
  @media (max-width: 599px) {
    /* À 356 px de large, 30 unités du tracé faisaient 9 px : 46 unités font
       environ 14 px. L'étiquette placée sous son point descend d'autant. */
    .port-cote.coastline--mini .coastline__point text { font-size: 46px; stroke-width: 7px; }
    .port-cote.coastline--mini .coastline__point--bas text { transform: translateY(16px); }
  }

  /* ---- Fiche matière : les étapes sur un fil, numérotées dans une arche ---- */
  .fiche-matiere { overflow: clip; }
  .fiche-matiere__grille { display: grid; gap: var(--esp-xl) var(--gouttiere); }
  .fiche-matiere__tete > .surtitre { margin-bottom: .6rem; }
  .fiche-matiere__nom { font: italic 400 var(--fs-h2) / 1.08 var(--serif); color: var(--argile); max-width: 10ch; }
  .fiche-matiere__etapes { position: relative; display: grid; gap: var(--esp-xl); }
  .fiche-matiere__fil { position: absolute; top: 24px; bottom: 24px; left: 20px; width: 1px; background: linear-gradient(180deg, var(--pierre), rgba(205, 184, 149, 0)); transform-origin: top; }
  .fiche-matiere__etape { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 1.6rem; max-width: 40rem; }
  .fiche-matiere__num { position: relative; z-index: 1; 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-clair); font-size: .95rem; color: var(--argile); }
  .fiche-matiere__etape > div > * + * { margin-block-start: .6rem; }
  .fiche-matiere__etape h2 { font-size: var(--fs-h3); max-width: 20ch; }
  .fiche-matiere__etape p { color: var(--encre-doux); }
  @media (min-width: 900px) {
    .fiche-matiere__grille { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(2.5rem, 6vw, 7rem); }
    .fiche-matiere__tete { position: sticky; top: calc(var(--h-entete) + 2.5rem); align-self: start; }
  }

  /* ---- Catalogue /nautisme/prestations/ : la galerie d'arches ---- */
  .naut-catalogue__tete { margin-bottom: var(--esp-2xl); }
  .naut-galerie { display: grid; gap: var(--esp-2xl) var(--gouttiere); }
  .naut-galerie__item { position: relative; display: flex; flex-direction: column; gap: .45rem; max-width: none; }
  .naut-galerie__baie { height: clamp(300px, 33vw, 480px); margin-bottom: .9rem; box-shadow: var(--ombre-douce); }
  .naut-galerie__baie img { object-position: var(--cadrage, 50% 50%); transition: scale 1.8s var(--doux); }
  .naut-galerie__item:is(:hover, :focus-within) .naut-galerie__baie img { scale: 1.04; }
  .naut-galerie__saison { font: italic 1.05rem / 1.3 var(--serif); color: var(--argile); }
  .naut-galerie__nom { font: 400 var(--fs-h3) / 1.15 var(--serif); max-width: none; transition: color var(--dur-survol) var(--doux); }
  .naut-galerie__nom a { color: inherit; }
  /* Le nom est le lien ; il couvre toute la carte (baie comprise). */
  .naut-galerie__nom a::after { content: ""; position: absolute; inset: 0; }
  .naut-galerie__item:is(:hover, :focus-within) .naut-galerie__nom { color: var(--argile); }
  .naut-galerie__chapo { font-size: var(--fs-petit); color: var(--encre-doux); max-width: 40ch; }
  @media (min-width: 600px) { .naut-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1100px) {
    .naut-galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* La dixième baie, seule sur sa rangée, se centre au lieu de rester à gauche. */
    .naut-galerie__item:last-child:nth-child(3n + 1) { grid-column: 2; }
  }
  @media (max-width: 599px) {
    /* Téléphone : une rangée qui défile au doigt, aimantée carte par carte ;
       la suivante dépasse au bord pour dire qu'il y en a d'autres. */
    .naut-galerie { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--marge)); padding: .5rem var(--marge) 1.5rem; scroll-padding-inline: var(--marge); scrollbar-width: none; overscroll-behavior-x: contain; }
    .naut-galerie::-webkit-scrollbar { display: none; }
    .naut-galerie__item { flex: 0 0 78%; scroll-snap-align: start; }
    .naut-galerie__baie { height: clamp(300px, 92vw, 420px); }
  }

  /* ---- Fiche prestation : l'offre de saison, sous les points ---- */
  .naut-offre { display: grid; gap: .45rem; justify-items: center; max-width: 30rem; margin-top: var(--esp-xl); padding: 2.6rem 1.8rem 1.9rem; border-radius: 160px 160px var(--rayon) var(--rayon); background: var(--chaux-clair); box-shadow: inset 0 0 0 1px rgba(205, 184, 149, .55); text-align: center; }
  .section--alt .naut-offre { background: var(--chaux); }
  .naut-offre__label { font-size: var(--fs-mini); color: var(--encre-doux); }
  .naut-offre h3 { font-size: var(--fs-h3); }
  .naut-offre__periode { font: italic 1.1rem / 1.3 var(--serif); color: var(--argile); }
  .naut-offre > p:last-child { margin-top: .4rem; font-size: var(--fs-petit); color: var(--encre-doux); }

  /* ---- Fiche prestation : le conseil (article de data/articles.php) ---- */
  .naut-conseil .naut-grille__tete h2 { max-width: 13em; }
  .naut-conseil__reponse { font: 400 var(--fs-h4) / 1.45 var(--serif); color: var(--encre); max-width: 34em; }
  .naut-conseil__listes { display: grid; gap: var(--esp-xl) var(--gouttiere); margin-top: var(--esp-xl); }
  .naut-conseil__listes h3 { margin-bottom: .9rem; font-size: var(--fs-h4); }
  @media (min-width: 700px) { .naut-conseil__listes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* ---- Fiche prestation : les coques concernées, en une rangée compacte ---- */
  .naut-rangee { display: grid; gap: 0 var(--gouttiere); }
  .naut-rangee__coque { display: flex; flex-direction: column; gap: .45rem; padding-block: 1.3rem; border-top: var(--filet); max-width: none; }
  .naut-rangee__taille { font: italic 1.05rem / 1.3 var(--serif); color: var(--argile); }
  .naut-rangee__coque h3 { font-size: var(--fs-h4); }
  .naut-rangee__duree { margin-top: auto; padding-top: .5rem; font-size: var(--fs-petit); color: var(--encre-doux); }
  .naut-rangee__suite { margin-top: var(--esp-l); }
  /* naut-rangee--N : le nombre de coques retenues (2 à 4). */
  @media (min-width: 700px) { .naut-rangee, .naut-rangee--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1100px) {
    .naut-rangee--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .naut-rangee--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* ---- Matières : « Ce qui nettoie, ce qui détruit » ---- */
  .naut-detruit__grille { display: grid; gap: var(--esp-l) var(--gouttiere); }
  .naut-detruit__matiere summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--cible); padding-block: .5rem; border-bottom: var(--filet); list-style: none; cursor: pointer; }
  .naut-detruit__matiere summary::-webkit-details-marker { display: none; }
  /* Le signe d'ouverture : une croix fine, réduite à un tiret une fois ouvert. */
  .naut-detruit__matiere summary::after { content: ""; flex: none; width: 13px; height: 13px; background: linear-gradient(var(--argile), var(--argile)) center / 100% 1.5px no-repeat, linear-gradient(var(--argile), var(--argile)) center / 1.5px 100% no-repeat; transition: background-size var(--dur-survol) var(--doux); }
  .naut-detruit__matiere[open] summary::after { background-size: 100% 1.5px, 1.5px 0; }
  .naut-detruit__nom { font: 400 var(--fs-h4) / 1.2 var(--serif); }
  .naut-detruit__matiere .enonces { border-top: 0; }
  .naut-detruit__matiere > p { margin-top: var(--esp-m); }
  .naut-detruit__lien { font-size: .92rem; }
  @media (min-width: 700px) { .naut-detruit__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .naut-detruit__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  /* ---- Intervention à quai : les durées types ---- */
  /* La longueur du bateau et les intitulés ne se coupent jamais (« 10 à / 15 m »). */
  .naut-durees :is(thead th, tbody th) { white-space: nowrap; }
  .naut-durees tbody th { font: 400 var(--fs-petit) / 1.4 var(--sans); color: var(--encre); }
  @media (max-width: 599px) {
    /* Téléphone : une carte par ligne, titrée par la longueur du bateau ;
       chaque valeur porte son intitulé (data-label). Les en-têtes de
       colonnes restent lus par les lecteurs d'écran. */
    .naut-durees { overflow: visible; }
    .naut-durees :is(table, tbody, tr, th, td) { display: block; }
    .naut-durees thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .naut-durees tbody tr { padding-block: 1rem; border-bottom: var(--filet); }
    .naut-durees tbody th { padding: 0 0 .45rem; border: 0; font-size: 1.05rem; font-weight: 500; }
    .naut-durees td { display: grid; grid-template-columns: 8.6rem minmax(0, 1fr); gap: .8rem; padding: .2rem 0; border: 0; font-size: var(--fs-petit); }
    .naut-durees td::before { content: attr(data-label); font: italic 1rem / 1.35 var(--serif); color: var(--argile); }
  }

  /* Un intervalle chiffré ne se coupe jamais au milieu (« 8 / à 10 m »,
     « 10 à / 15 m ») : chiffres() l'enveloppe d'un seul .u-num. */
  :is(.hero-naut, .naut-vues, .naut-rangee, .naut-protocole, .naut-grille, .naut-duo, .saisons, .metiers, .naut-offre, .naut-galerie, .frise, .naut-voisins) .u-num { white-space: nowrap; }

  /* ---- Les trente ports en pilules : deux colonnes au téléphone ---- */
  @media (max-width: 599px) {
    :is(.naut-pilules .link-list, .link-list.naut-pilules) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    :is(.naut-pilules .link-list, .link-list.naut-pilules) li { min-width: 0; }
    :is(.naut-pilules .link-list, .link-list.naut-pilules) a { width: 100%; justify-content: center; padding-inline: .6rem; font-size: .875rem; line-height: 1.25; text-align: center; }
  }

  /* ---- Tablette (700 à 899 px) : deux colonnes au lieu d'un empilement ----
     Les règles de bureau ne commencent qu'à 900 px : à 768, chaque baie
     faisait 315 px collée à gauche et les colonnes de texte laissaient la
     moitié de l'écran vide (le hub mesurait 19 000 px de haut). */
  @media (min-width: 700px) and (max-width: 899px) {
    .naut-duo__grille { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--esp-l) clamp(1.75rem, 4vw, 2.5rem); }
    .naut-duo__baie, .naut-duo--inverse .naut-duo__baie { width: 100%; height: 420px; margin-left: 0; }
    .naut-duo--inverse .naut-duo__baie { order: 2; }
    /* La liste des agressions est plus longue que la baie : la baie passe
       au-dessus, sur toute la largeur, et les quatre agressions en 2 × 2. */
    .naut-duo--colle .naut-duo__grille { grid-template-columns: minmax(0, 1fr); }
    .naut-duo--colle .naut-duo__baie { height: 400px; border-radius: var(--anse); }
    .naut-agressions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gouttiere); }
    .naut-grille { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: clamp(1.75rem, 4vw, 2.5rem); align-items: start; }
    .naut-grille--large { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
    /* Le catalogue du hub : sa tête passe au-dessus de la liste. Dans la
       colonne de 284 px, la pilule « Voir les 10 prestations nautiques »
       se cassait sur deux lignes (revue mobile, 768 px). */
    .catalogue .naut-grille { grid-template-columns: minmax(0, 1fr); }
    .catalogue .naut-grille__tete h2 { max-width: none; }
    /* Chaque point : sa baie à gauche, le texte à droite. La baie couvre
       les douze rangées ; la dernière (1fr) absorbe sa hauteur, sans
       écarter les paragraphes du texte. */
    .naut-vues__item { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: repeat(11, auto) minmax(0, 1fr); column-gap: clamp(1.75rem, 4vw, 2.5rem); align-content: start; }
    .naut-vues__item > * { grid-column: 2; }
    .naut-vues .naut-vues__liste .naut-vues__item:nth-child(n) > .naut-vues__mobile { grid-column: 1; grid-row: 1 / -1; align-self: start; width: 100%; height: 420px; margin: 0; }
    .naut-vues__item > .naut-vues__mobile + * { margin-block-start: 0; }
    .naut-vues__liste { max-width: none; }
    .cote-naut__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
    .cote-naut__trace { grid-column: 1 / -1; }
  }

  /* Blocs de structure du silo : rien ne déborde de l'écran du téléphone. */
  .naut-duo, .naut-vues, .naut-saisons, .naut-coques-niches, .naut-ports, .naut-voisins, .catalogue, .naut-catalogue, .naut-detruit { overflow-x: clip; }
}