/*
Theme Name: Ferme Cachalot
Theme URI: https://cachalot.fr
Author: Maxime Wolff
Description: Thème bloc sur mesure pour la Ferme Cachalot. Pisciculture marine, vente directe. Palette et typographie dans theme.json. Contact visiteur par téléphone uniquement.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
Version: 0.6.1
License: Tous droits réservés
Text Domain: ferme-cachalot
*/

/* ==========================================================================
   1. Jetons
   Couleurs : palette « Marine & Or » de theme.json uniquement (DESIGN.md §2).
   Les seules teintes dérivées (survol, focus, voiles, filets) sont calculées depuis la palette.
   ========================================================================== */
:root {
  --fc-ink: var(--wp--preset--color--ink, #0B2836);
  --fc-ink-soft: var(--wp--preset--color--ink-soft, #3B4649);
  --fc-paper: var(--wp--preset--color--paper, #F1E8D6);
  --fc-surface: var(--wp--preset--color--surface, #E3D5BA);
  --fc-ecume: var(--wp--preset--color--ecume, #FAF6EE);
  --fc-brand: var(--wp--preset--color--brand, #1C5A73);
  --fc-brand-deep: var(--wp--preset--color--brand-deep, #0B2836);
  --fc-nuit: var(--wp--preset--color--nuit, #061A24);
  --fc-teal: var(--wp--preset--color--teal, #3E6E72);
  --fc-gold: var(--wp--preset--color--gold, #D09358);
  --fc-accent: var(--wp--preset--color--accent, #9C5626);
  --fc-cuivre-clair: var(--wp--preset--color--azure, #D09358);

  /* Familles : titres (Fraunces) et texte (Schibsted Grotesk), définies dans theme.json. */
  --fc-serif: var(--wp--preset--font-family--heading, Georgia, serif);
  --fc-sans: var(--wp--preset--font-family--body, system-ui, sans-serif);

  /* Filets : texte foncé ou blanc à faible opacité. */
  --fc-line: rgba(15, 37, 49, .12);
  --fc-line-strong: rgba(15, 37, 49, .32);
  --fc-line-on-dark: rgba(255, 255, 255, .14);
  --fc-line-on-dark-strong: rgba(255, 255, 255, .32);

  /* Focus « contour sarcelle » (DESIGN.md §5), décliné pour garder 3:1 sur chaque fond :
     sarcelle profond sur fond clair, sarcelle clair sur fond sombre, blanc sur bronze. */
  --fc-focus-light: color-mix(in srgb, var(--fc-teal) 60%, var(--fc-ink));
  --fc-focus-dark: color-mix(in srgb, var(--fc-teal) 60%, #fff);
  --fc-focus: var(--fc-focus-light);

  /* Grille de composition (DESIGN.md §4) : 4, 8 puis 12 colonnes ; gouttières 16, 24 puis 32 px. */
  --fc-maxw: 1280px;
  --fc-cols: 4;
  --fc-gutter: 16px;

  /* Trois densités de section, choisies selon le rôle du chapitre :
     serrée (pratique, faits), normale (récit), ample (respiration, ouverture). */
  --fc-tight: clamp(40px, 28px + 3.4vw, 72px);
  --fc-normal: clamp(64px, 44px + 5.6vw, 120px);
  --fc-ample: clamp(88px, 50px + 8.4vw, 168px);

  /* Échelle modulaire fluide, de 360 à 1 440 px de large : rapport 1,2 sur mobile, 1,35 sur
     grand écran, à partir d'un corps de 17 puis 18 px. s3, s4 et s6 sont aussi des tailles de theme.json. */
  --fc-s1: clamp(20.4px, 19.1px + .361vw, 24.3px);
  --fc-s2: clamp(24.5px, 21.7px + .769vw, 32.8px);
  --fc-s3: var(--wp--preset--font-size--x-large, clamp(29.4px, 24.4px + 1.38vw, 44.3px));
  --fc-s4: var(--wp--preset--font-size--chapter, clamp(35.3px, 27.1px + 2.269vw, 59.8px));
  --fc-s5: clamp(42.3px, 29.5px + 3.556vw, 80.7px);
  --fc-s6: var(--wp--preset--font-size--statement, clamp(46px, 25.3px + 5.741vw, 108px));

  /* Mesure de lecture du corps : 60 à 70 signes par ligne (Inter : 0,46 em par signe en moyenne, mesuré). */
  --fc-measure: 31em;

  --fc-header-h: 84px;
  --fc-ease: cubic-bezier(.22, .61, .36, 1);
  --fc-dur: .2s;

  /* Icônes (masques SVG, couleur = currentColor). */
  --fc-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M5 3.5h3.2l1.6 4.2-2.1 1.4a11 11 0 0 0 5.2 5.2l1.4-2.1 4.2 1.6V17a2 2 0 0 1-2 2A15.5 15.5 0 0 1 3 5.5a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E");
  --fc-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14.5M10.5 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
}
@media (min-width: 600px) { :root { --fc-cols: 8; --fc-gutter: 24px; } }
@media (min-width: 1024px) { :root { --fc-cols: 12; --fc-gutter: 32px; } }

/* Marges latérales 20 / 40 / 64 px : même valeur que le padding racine de theme.json. */
body {
  --fc-pad: var(--wp--style--root--padding-left, clamp(20px, 5vw, 64px));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  overflow-x: hidden;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* Ancres sous l'en-tête fixe (600 px et plus). */
@media (min-width: 600px) { html { scroll-padding-top: 96px; } }

::selection { background: color-mix(in srgb, var(--fc-gold) 30%, transparent); color: var(--fc-ink); }

img, video { max-width: 100%; height: auto; }

h1, h2, h3, h4 { color: inherit; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
h1, h2, h3, h4, p, li, dt, dd { overflow-wrap: break-word; }
/* Chiffres alignés (horaires, téléphone, années, calibres). */
body, h1, h2, h3, h4 { font-variant-numeric: lining-nums; }

/* Les grandes zones (en-tête, contenu, pied) gèrent leur propre rythme. */
.wp-site-blocks > * { margin-block-start: 0; }

a { text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:where(:not(.wp-element-button)) {
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: color var(--fc-dur) var(--fc-ease), text-decoration-color var(--fc-dur) var(--fc-ease);
}
a:where(:not(.wp-element-button)):hover { text-decoration-color: currentColor; }

/* Liens de texte : filet discret au repos (le lien reste repérable sans la couleur), trait plein
   qui se trace de gauche à droite au survol et au focus. */
:is(.facts__line, .prose, .ledger, .more, .ref__title, .press-item__body, .appel__num) a:where(:not(.wp-element-button)) {
  text-decoration: none;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(color-mix(in srgb, currentColor 32%, transparent), color-mix(in srgb, currentColor 32%, transparent));
  background-repeat: no-repeat;
  background-position: 0 100%, 0 100%;
  background-size: 0 1px, 100% 1px;
  padding-bottom: .06em;
  transition: background-size .35s var(--fc-ease), color var(--fc-dur) var(--fc-ease);
}
:is(.facts__line, .prose, .ledger, .more, .ref__title, .press-item__body, .appel__num) a:where(:not(.wp-element-button)):is(:hover, :focus-visible) {
  background-size: 100% 1px, 100% 1px;
}

/* Focus clavier toujours visible. */
:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 3px; }
:where(.site-header, .hero, .page-hero, .site-footer, .fc-map, .fc-video, .fullframe, .sec--deep) { --fc-focus: var(--fc-focus-dark); }
:where(.call, .call-bar) { --fc-focus: #fff; }

#wp-skip-link:focus {
  background: var(--fc-paper);
  color: var(--fc-ink);
  font-weight: 600;
  border-radius: 4px;
  outline: 2px solid var(--fc-focus-light);
}

/* Les conteneurs en grille ou en flex placent leurs enfants : pas de marge de flux. */
:is(.site-header__inner, .call__side, .site-footer__grid, .site-footer__legal .wrap, .diptych) > * {
  margin-block: 0;
}

/* ==========================================================================
   3. Grille de composition et densités
   Lignes de .g : 1 = bord gauche de l'écran (full-start), 2 = début de la colonne 1 (content-start),
   n + 1 = début de la colonne n, cols + 2 = fin de la dernière colonne (content-end),
   cols + 3 = bord droit de l'écran (full-end). En 12 colonnes : content-end = 14, full-end = 15.
   Depuis le 12/10/2026, rien ne déborde : texte et images restent entre content-start et content-end.
   Axe de lecture : le texte de chaque section part de la colonne 1 (bord du logo). Second axe : la
   colonne 6 (partage 5 + 7) pour la colonne de droite. Seul le plein cadre de l'accueil occupe
   toute la largeur, hors grille.
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--fc-maxw);
  margin-inline: auto;
  padding-inline: var(--fc-pad);
}

.g {
  --fc-side: max(var(--fc-pad), (100% - var(--fc-maxw)) / 2 + var(--fc-pad));
  display: grid;
  grid-template-columns:
    [full-start] calc(var(--fc-side) - var(--fc-gutter))
    [content-start] repeat(var(--fc-cols), minmax(0, 1fr))
    [content-end] calc(var(--fc-side) - var(--fc-gutter))
    [full-end];
  column-gap: var(--fc-gutter);
  align-items: start;
}
.g > * { grid-column: content; margin-block: 0; min-width: 0; }

/* Élément qui reprend les colonnes de la grille parente (image qui déborde, texte qui reste aligné). */
.sub { display: grid; grid-template-columns: subgrid; align-content: start; }
.sub > * { grid-column: 1 / -1; margin-block: 0; min-width: 0; }
@supports not (grid-template-columns: subgrid) {
  .sub { display: block; }
  .sub > :not(.ph) { padding-inline: var(--fc-pad); }
}

.sec { padding-block: var(--fc-normal); }
.sec--tight { padding-block: var(--fc-tight); }
.sec--ample { padding-block: var(--fc-ample); }
.sec--surface { background: var(--fc-surface); }
.sec--deep { background: var(--fc-brand-deep); color: rgba(255, 255, 255, .86); }
.sec--deep :is(h2, h3) { color: #fff; }

/* ==========================================================================
   4. Typographie de composition
   ========================================================================== */
/* Marqueur de chapitre : la voix de la charte, en Fraunces italique, jamais un surtitre
   en capitales espacées ni un petit tiret, qui sont les deux marqueurs « IA » du client. */
.marker {
  display: block;
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  font-family: var(--fc-serif);
  font-style: italic;
  font-weight: 380;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fc-accent);
}
.sec--deep .marker { color: var(--fc-cuivre-clair); }

/* Étiquette (registres, sources, bandeau d'appel) : casse normale, la valeur reste
   en Fraunces au-dessus. Plus de capitales espacées hors du logo. */
.label {
  margin: 0;
  font-family: var(--fc-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--fc-ink-soft);
}

/* Trois registres de titres en plus du H2 courant (s3) : ouverture de chapitre, grand énoncé, titre discret. */
.t-chapter { font-size: var(--fc-s4); font-weight: 400; line-height: 1.03; letter-spacing: -.022em; }
.t-statement { font-size: var(--fc-s6); font-weight: 400; line-height: .98; letter-spacing: -.032em; }

/* Fraunces porte quatre axes : taille optique, graisse, SOFT et WONK. Réglage de la charte :
   les titres prennent l'arrondi (SOFT 100), la voix passe en italique WONK. Sans support,
   les graisses déclarées ci-dessus s'appliquent normalement. */
@supports (font-variation-settings: normal) {
  h1, h2, h3, h4, .t-chapter, .t-statement, .ouverture__title {
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
  }
  h1 { font-weight: 380; }
  h2 { font-weight: 400; }
  h3 { font-weight: 460; font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 0; }
  .t-statement, .lead, .ardoise__ligne, .t-voice {
    font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1;
  }
  .t-voice { font-style: italic; font-weight: 360; }
}
.t-quiet { font-size: var(--fc-s2); line-height: 1.12; letter-spacing: -.012em; }
.t-chapter + *, .t-quiet + * { margin-top: clamp(18px, 2vw, 28px); }

.lead { font-size: var(--wp--preset--font-size--large); line-height: 1.5; }

/* Groupe insécable (nom de ville à trait d'union, horaire). */
.nowrap { white-space: nowrap; }

/* Corps de texte : mesure de 60 à 70 signes. */
.prose > p, p.prose { max-width: var(--fc-measure); color: var(--fc-ink-soft); }
.prose > * + p { margin-top: 1em; }
.sec--deep .prose > p { color: rgba(255, 255, 255, .86); }

/* Lien de sortie de chapitre : italique de titre, flèche qui avance au survol (sens de lecture). */
.more {
  margin-top: clamp(24px, 2.6vw, 36px);
  font-family: var(--fc-serif);
  font-size: var(--fc-s1);
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
}
.more a { color: var(--fc-brand); }
.more a::after {
  content: "";
  display: inline-block;
  width: .82em;
  height: .55em;
  margin-left: .4em;
  background: currentColor;
  -webkit-mask: var(--fc-icon-arrow) center / contain no-repeat;
  mask: var(--fc-icon-arrow) center / contain no-repeat;
  transition: transform var(--fc-dur) var(--fc-ease);
}
.more a:hover::after { transform: translateX(4px); }
.more a:hover { color: var(--fc-ink); }
.sec--deep .more a { color: #fff; }

/* Manifeste : la phrase de valeurs, mise en avant seule, en grand, sur fond profond. */
.manifeste { text-align: center; }
.manifeste__phrase {
  margin: clamp(16px, 2vw, 28px) auto 0;
  max-width: 22ch;
  font-family: var(--fc-serif);
  font-style: italic;
  font-weight: 380;
  font-size: var(--fc-s4);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: #fff;
}
@media (min-width: 900px) { .manifeste__phrase { font-size: var(--fc-s5); } }

/* ==========================================================================
   5. Boutons
   Base dans theme.json (bronze, capitales, rayon 4 px). Ici : états et variantes.
   ========================================================================== */
.wp-block-button__link {
  transition: background-color var(--fc-dur) var(--fc-ease), color var(--fc-dur) var(--fc-ease), border-color var(--fc-dur) var(--fc-ease);
}
.wp-block-button__link:active { filter: brightness(.92); }
.wp-block-button__link[aria-disabled="true"],
.wp-block-button__link:disabled,
.fc-map__btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* Tout lien d'appel porte le combiné : le geste principal du site se reconnaît partout. */
.wp-block-button__link[href^="tel:"] { display: inline-flex; align-items: center; justify-content: center; gap: .7em; }
.wp-block-button__link[href^="tel:"]::before,
.call-bar__tel::before {
  content: "";
  flex: none;
  width: 1.15em;
  height: 1.15em;
  background: currentColor;
  -webkit-mask: var(--fc-icon-phone) center / contain no-repeat;
  mask: var(--fc-icon-phone) center / contain no-repeat;
}

/* Contour clair (sur fond sombre). Bordure comprise dans la hauteur du bouton plein. */
.btn-ghost .wp-block-button__link {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .6);
  padding: 15px 27px;
}
.btn-ghost .wp-block-button__link:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

/* Contour marine (sur fond clair). */
.btn-ghost-dark .wp-block-button__link {
  background: transparent;
  color: var(--fc-brand);
  border: 1px solid var(--fc-brand);
  padding: 15px 27px;
}
.btn-ghost-dark .wp-block-button__link:hover { background: var(--fc-brand); color: #fff; }

/* Bouton blanc sur le bandeau bronze. */
.btn-ondark .wp-block-button__link { background: #fff; color: var(--fc-accent); }
.btn-ondark .wp-block-button__link:hover { background: var(--fc-brand-deep); color: #fff; }

/* Numéro d'appel de l'en-tête : chiffres en Fraunces (DESIGN.md §3). */
.btn-phone .wp-block-button__link {
  padding: 10px 18px;
  font-family: var(--fc-serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .01em;
  text-transform: none;
  font-variant-numeric: lining-nums;
}

/* ==========================================================================
   6. En-tête et navigation
   À partir de 600 px, l'en-tête est fixe et se condense au défilement (assets/js/site.js) :
   la place qu'il occupe dans la page ne change pas, rien ne saute pendant la lecture.
   ========================================================================== */
.wp-site-blocks > header.wp-block-template-part { position: relative; z-index: 100; }
@media (min-width: 600px) {
  .wp-site-blocks > header.wp-block-template-part { position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; }
  body .wp-site-blocks { padding-top: var(--fc-header-h); }
}

.site-header {
  background: var(--fc-paper);
  color: var(--fc-ink);
  border-bottom: 1px solid var(--fc-line);
  border-top: 3px solid var(--fc-accent);
  transition: background-color .3s var(--fc-ease);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 16px 28px;
  min-height: var(--fc-header-h);
  padding-block: 12px;
  transition: min-height .25s var(--fc-ease), padding .25s var(--fc-ease);
}

.site-header .wp-block-site-title { flex: none; margin-right: auto; }
.site-header .wp-block-site-title a { display: inline-block; color: var(--fc-ink); text-decoration: none; }
.site-logo { display: inline-flex; align-items: center; }
.site-logo img { display: block; width: auto; }
.site-logo img.site-logo__grand { height: 56px; }
.site-logo img.site-logo__petit { height: 44px; display: none; }
@media (max-width: 1179.98px) {
  .site-logo img.site-logo__grand { display: none; }
  .site-logo img.site-logo__petit { display: block; }
}
.fc-condensed .site-logo img.site-logo__grand { height: 48px; }
@media (min-width: 600px) {
  .fc-condensed .site-header__inner { min-height: 64px; padding-block: 8px; }
}

/* Ardoise de vente : une phrase, à l'heure de Paris, jamais une promesse de stock.
   Le texte statique présent dans la page reste la vérité si le script ne tourne pas. */
.site-header__ardoise {
  flex: none;
  display: flex;
  align-items: center;
  gap: 18px;
}
.ardoise__ligne {
  font-family: var(--fc-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.3;
  color: var(--fc-ink-soft);
  max-width: 30ch;
}
.ardoise__tel {
  font-family: var(--fc-serif);
  font-size: 18px;
  color: var(--fc-accent);
  border: 1px solid var(--fc-accent);
  padding: 10px 16px;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .25s var(--fc-ease), color .25s var(--fc-ease);
}
.ardoise__tel:hover, .ardoise__tel:focus-visible { background: var(--fc-accent); color: var(--fc-ecume); }
/* Sous 1180 px, l'ardoise d'en-tête ne garde que le numéro ; les horaires restent lisibles
   dans l'ardoise du pied de page, que le bouton Horaires de la barre du bas rejoint. */
@media (max-width: 1179.98px) {
  .site-header__ardoise .ardoise__ligne { display: none; }
}
@media (max-width: 599.98px) {
  .site-header__ardoise { display: none; }
}

/* Accueil : l'en-tête est un bandeau papier, identique aux pages internes (décision du 12/10/2026,
   parti des références). Le hero vidéo n'a plus de texte, donc plus d'en-tête transparent. */

/* Liens du menu. */
.site-nav { flex: none; gap: 28px; }
.site-nav .wp-block-navigation-item__content {
  padding-block: 8px;
  font-family: var(--fc-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .005em;
  text-decoration: underline 1px transparent;
  text-underline-offset: .55em;
  transition: color var(--fc-dur) var(--fc-ease), text-decoration-color var(--fc-dur) var(--fc-ease);
}
.site-nav .wp-block-navigation-item .wp-block-navigation-item__content:hover { text-decoration-color: currentColor; }
.site-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content { text-decoration-color: var(--fc-gold); }

/* Bouton d'appel interne au menu : seulement dans le menu ouvert. */
.site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .site-nav__call { display: none; }

/* Menu replié jusqu'à 1280 px (cœur WordPress : 600 px). Au-delà, les cinq liens, le numéro
   et le nom tiennent sur une ligne avec leurs marges. */
@media (max-width: 1279.98px) {
  .site-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .site-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

.site-nav .wp-block-navigation__responsive-container-open {
  padding: 10px;
  border-radius: 4px;
  color: var(--fc-ink);
}
.site-nav .wp-block-navigation__responsive-container-close {
  padding: 10px;
  border-radius: 4px;
  color: #fff;
}
.site-nav .wp-block-navigation__responsive-container-open { margin-inline: -10px; }

/* Menu plein écran, fond marine (couleurs du bloc : overlayBackgroundColor / overlayTextColor). */
.site-nav .wp-block-navigation__responsive-container.is-menu-open {
  --navigation-layout-justification-setting: flex-start;
  --fc-focus: var(--fc-focus-dark);
  padding: 0 var(--fc-pad) 32px;
}
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { top: 16px; right: -10px; }
.site-nav .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
  gap: 0;
  padding-top: 96px;
}
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { width: 100%; gap: 0; }
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--fc-line-on-dark); }
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  padding-block: 14px;
  font-family: var(--fc-serif);
  font-size: clamp(26px, 6vw, 36px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-transform: none;
}
.site-nav .wp-block-navigation__responsive-container.is-menu-open .site-nav__call { width: 100%; margin-top: 32px; }
.site-nav .wp-block-navigation__responsive-container.is-menu-open .site-nav__call .wp-block-button { width: 100%; }
.site-nav .wp-block-navigation__responsive-container.is-menu-open .site-nav__call .wp-block-button__link { width: 100%; padding-block: 18px; }

/* ==========================================================================
   7. Hero d'accueil
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  height: clamp(280px, 47vw, 700px);
  overflow: hidden;
  background: var(--fc-brand-deep);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
/* Sous 600 px, seul le poster s'affiche : on garde la tête et le corps du poisson au centre. */
@media (max-width: 599.98px) {
  .hero__media { object-position: 46% 48%; }
}
/* Voiles de lisibilité (fonctionnels, pas décoratifs), en marine abysse.
   Accueil : calibré sur chaque image de la vidéo et sur le poster (contraste 4,5:1 au moins pour les
   petits textes, 3:1 pour le titre) : un bandeau sous la navigation, un fond sous le texte
   (en bas, et à gauche sur grand écran), le reste de l'image laissé clair. */
.hero::before,
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* Le hero de l'accueil n'a plus de texte (décision du 12/10/2026, parti des références Giol et
   Wright) : plus de voile. Le bouton pause porte son propre fond pour rester lisible. */
.hero::before { display: none; }
/* Pages internes : calibré sur les cinq photos d'en-tête, haut de l'image clair, texte au bas.
   Sous 600 px, le texte occupe presque toute la hauteur : voile plus tôt (fil d'Ariane à 3,8:1 sinon). */
.page-hero::before {
  background: linear-gradient(180deg, rgba(11, 40, 54, .35) 0%, rgba(11, 40, 54, .32) 25%, rgba(11, 40, 54, .65) 40%, rgba(11, 40, 54, .8) 100%);
}
@media (max-width: 599.98px) {
  .page-hero::before {
    background: linear-gradient(180deg, rgba(11, 40, 54, .4) 0%, rgba(11, 40, 54, .58) 16%, rgba(11, 40, 54, .7) 40%, rgba(11, 40, 54, .82) 100%);
  }
}
.hero__content {
  position: relative;
  z-index: 3;
  padding-top: clamp(120px, 24vh, 260px);
  padding-bottom: clamp(48px, 7vw, 96px);
}
.hero__content > * { margin-block: 0; }
.hero h1 {
  max-width: 15ch;
  font-size: var(--wp--preset--font-size--display);
  line-height: 1.02;
  letter-spacing: -.025em;
}
.hero .lead { max-width: 42ch; margin-top: 22px; color: #fff; }
.hero .wp-block-buttons { gap: 12px; margin-top: 32px; }
@media (max-width: 599.98px) {
  .hero .wp-block-buttons { flex-direction: column; align-items: stretch; }
  .hero .wp-block-button, .hero .wp-block-button__link { width: 100%; }
}

/* Bouton pause de la vidéo (créé par assets/js/hero.js seulement si la vidéo joue). */
.hero__toggle {
  position: absolute;
  z-index: 4;
  right: max(var(--fc-pad), calc((100% - var(--fc-maxw)) / 2 + var(--fc-pad)));
  bottom: clamp(24px, 3vw, 40px);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 4px;
  background: rgba(11, 40, 54, .4);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--fc-dur) var(--fc-ease), border-color var(--fc-dur) var(--fc-ease);
}
.hero__toggle:hover { background: rgba(11, 40, 54, .7); border-color: #fff; }

/* ==========================================================================
   8. Ligne de faits (accueil) : une phrase composée, faits vérifiés seulement.
   ========================================================================== */
.facts { padding-block: clamp(36px, 22px + 3.6vw, 72px) clamp(8px, 2vw, 24px); }
.facts__line {
  font-family: var(--fc-serif);
  font-size: clamp(18px, 16.2px + .55vw, 24px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -.008em;
  color: var(--fc-ink-soft);
}
.facts__line b { font-weight: 600; color: var(--fc-ink); }
.facts__line a { color: var(--fc-brand); font-weight: 600; white-space: nowrap; }
.facts__line a:hover { color: var(--fc-ink); }
@media (min-width: 1024px) {
  .facts > .facts__line { grid-column: 2 / 13; }
}

/* ==========================================================================
   9. Photographies
   Composer plutôt qu'empiler : paire, diptyque à gouttière fine, un seul plein cadre. Aucune légende.
   ========================================================================== */
.ph {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 2px;
  background: var(--fc-surface);
}
.ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Carte cliquable : le lien du titre couvre la carte (un seul arrêt clavier). */
.card--link h3 a { color: inherit; text-decoration: none; }
.card--link h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
@supports selector(:has(a)) {
  .card--link h3 a:focus-visible { outline: none; }
  .card--link:has(a:focus-visible) { outline: 2px solid var(--fc-focus); outline-offset: 3px; }
}
.card--link:hover h3 a { text-decoration: underline 1px; text-decoration-color: var(--fc-gold); text-underline-offset: .16em; }

/* Survol discret, seulement quand l'image mène quelque part. */
.card--link .ph img { transition: transform .7s var(--fc-ease); }
.card--link:hover .ph img { transform: scale(1.03); }

/* Système de ratios, partout : 3:2 pour l'éditorial (lieu, geste, fiches), 4:5 pour le portrait,
   21:9 réservé au plein cadre de l'accueil. Dans une paire, la seconde image prend la hauteur
   de la première. Cadrage : la plupart des photos sont en 3:2 d'origine, donc non rognées. */
.cadre-gauche { object-position: 0 50%; }
.cadre-droite { object-position: 70% 50%; }

/* Diptyque à gouttière fine (6 px) : une image 3:2 et un portrait 4:5 de même hauteur (largeurs
   proportionnelles aux ratios), ou deux portraits 4:5 (diptych--portraits). */
.diptych { display: flex; gap: 6px; margin: 0; }
.diptych > img {
  display: block;
  min-width: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 2px;
}
.diptych > img:first-child { flex: 1.5 1 0; aspect-ratio: 3 / 2; }
.diptych > img:last-child { flex: .8 1 0; aspect-ratio: 4 / 5; }
.diptych--portraits > img:is(:first-child, :last-child) { flex: 1 1 0; aspect-ratio: 4 / 5; }
@media (max-width: 599.98px) { .diptych { gap: 4px; } }

/* Plein cadre : la photo occupe la largeur, une seule ligne de texte posée dessus (un titre de
   chapitre, pas une légende). Voile marine au bas, calibré pour le texte blanc. */
.fullframe {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: var(--fc-brand-deep);
}
.fullframe__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.fullframe::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(11, 40, 54, .86) 0%, rgba(11, 40, 54, .72) 30%, rgba(11, 40, 54, 0) 62%);
}
.fullframe__text {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding-bottom: clamp(32px, 6vw, 96px);
}
.fullframe__line {
  max-width: 17ch;
  color: #fff;
  font-size: var(--fc-s4);
  font-style: italic;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.02em;
}
@media (min-width: 600px) {
  .fullframe__img { aspect-ratio: 16 / 9; }
  .fullframe::after { background: linear-gradient(0deg, rgba(11, 40, 54, .8) 0%, rgba(11, 40, 54, .55) 34%, rgba(11, 40, 54, 0) 66%); }
  .fullframe__line { font-size: var(--fc-s5); }
}
@media (min-width: 1024px) {
  .fullframe__img { aspect-ratio: 21 / 9; max-height: 92vh; }
  .fullframe > .fullframe__text > .fullframe__line { grid-column: 2 / 11; }
}

/* ==========================================================================
   10. Chapitres de l'accueil
   Le lieu, le poisson, le geste, le savoir-faire, la preuve, où acheter, l'appel :
   chaque chapitre a sa composition propre.
   ========================================================================== */

/* Ouverture : le grand énoncé qui suit le hero vidéo. Le hero de l'accueil n'a plus de texte
   (décision du 12/10/2026), le titre et le chapô vivent ici, sur l'axe de lecture. */
.ouverture { padding-block: clamp(56px, 7vw, 104px) clamp(44px, 5vw, 72px); }
.ouverture__title { grid-column: content-start / content-end; max-width: 20ch; font-size: var(--fc-s5); }
.ouverture .lead { grid-column: content-start / 8; margin-top: clamp(20px, 2.2vw, 30px); color: var(--fc-ink-soft); }
.ouverture .wp-block-buttons { grid-column: content-start / content-end; gap: 12px; margin-top: clamp(26px, 3vw, 38px); }
@media (min-width: 1280px) {
  .ouverture__title { grid-column: content-start / 12; }
}

/* Le lieu : texte sur l'axe de lecture (colonnes 1 à 5), photo 3:2 dans le conteneur (colonnes 6 à 12).
   Départ serré : la ligne de faits fait déjà la respiration sous le hero. */
.lieu { padding-top: var(--fc-tight); }
.lieu > .ph { aspect-ratio: 3 / 2; margin-top: clamp(28px, 6vw, 44px); }
@media (min-width: 1024px) {
  .lieu > .lieu__text { grid-column: 2 / 7; grid-row: 1; }
  .lieu > .ph { grid-column: 7 / content-end; grid-row: 1; margin-top: 0; }
}

/* Le poisson : une paire équilibrée. Daurade sur 7 colonnes, loup sur 5, même hauteur d'image
   (lignes partagées par subgrid), noms et textes sur les mêmes lignes. Tout dans le conteneur. */
.poissons > .poissons__head { margin-bottom: clamp(28px, 4vw, 48px); }
.fish { position: relative; }
.fish__name {
  margin-top: 20px;
  font-size: var(--fc-s3);
  font-style: italic;
  font-weight: 400;
  line-height: 1.04;
}
.fish > p { margin-top: 8px; max-width: 28em; color: var(--fc-ink-soft); }
.fish > .ph { aspect-ratio: 3 / 2; }
.poissons > .fish--b { margin-top: 40px; }
/* Mobile : le loup recadré serré garde le poisson et les mains dans le champ. */
.fish--b img { object-position: 50% 70%; }
@media (min-width: 768px) {
  .poissons > .poissons__head { grid-row: 1; }
  .poissons > .fish { grid-row: 2 / span 3; grid-template-rows: subgrid; margin-top: 0; }
  .poissons > .fish--a { grid-column: 2 / 7; }
  .poissons > .fish--b { grid-column: 7 / content-end; }
  .fish > .ph { grid-row: 1; }
  .fish > .fish__name { grid-row: 2; }
  .fish > p { grid-row: 3; }
  .fish--b img { object-position: 50% 50%; }
  /* Le loup prend la hauteur de la daurade. */
  @supports (grid-template-rows: subgrid) {
    .fish--b > .ph { aspect-ratio: auto; }
    .fish--b > .ph > img { position: absolute; inset: 0; }
  }
}
@media (min-width: 1024px) {
  .poissons > .fish--a { grid-column: 2 / 9; }
  .poissons > .fish--b { grid-column: 9 / content-end; }
}

/* Le savoir-faire : titre, registre et lien sur l'axe (colonnes 1 à 5), deux portraits 4:5 à droite
   (colonnes 6 à 12), dans le conteneur. */
.savoir > .diptych { margin-top: 32px; }
.savoir > .savoir__facts { margin-top: 32px; }
@media (min-width: 1024px) {
  .savoir > .savoir__title { grid-column: 2 / 7; grid-row: 1; }
  .savoir > .savoir__facts { grid-column: 2 / 7; grid-row: 2; margin-top: 40px; }
  .savoir > .diptych { grid-column: 7 / content-end; grid-row: 1 / span 2; margin-top: 0; }
}

/* La preuve : fond marine, références de presse composées en titres. */
.preuve > .refs { margin-top: 36px; }
@media (min-width: 1024px) {
  .preuve > .preuve__title { grid-column: content-start / 6; }
  .preuve > .refs { grid-column: 7 / content-end; margin-top: 0; }
}
.refs { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--fc-line-on-dark-strong); }
.ref { margin: 0; padding-block: 22px 26px; border-bottom: 1px solid var(--fc-line-on-dark-strong); }
.ref > * { margin-block: 0; }
.ref__src { color: var(--fc-gold); }
.ref__title {
  margin-top: 10px;
  font-family: var(--fc-serif);
  font-size: var(--fc-s2);
  font-style: italic;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.012em;
}
.ref__title a { color: #fff; }

/* Où acheter : moment pratique et serré, registre et actions sur l'axe (colonnes 1 à 5),
   carte 3:2 à droite (colonnes 6 à 12), dans le conteneur. */
.achat > .ledger, .achat > .achat__actions { margin-top: 28px; }
.achat > .fc-map { margin-top: 40px; width: 100%; max-width: 100%; }
.pratique > .fc-map { width: 100%; max-width: 100%; }
@media (min-width: 1024px) {
  .achat > :is(.achat__head, .ledger, .achat__actions) { grid-column: 2 / 7; }
  .achat > .achat__head { grid-row: 1; }
  .achat > .ledger { grid-row: 2; }
  .achat > .achat__actions { grid-row: 3; }
  /* La carte (une façade, pas une photo) garde au moins son 3:2 et s'étire à la hauteur du registre. */
  .achat > .fc-map { grid-column: 7 / content-end; grid-row: 1 / span 3; align-self: stretch; margin-top: 0; }
}
.achat__actions > * { margin-block: 0; }
.achat__actions > .more { margin-top: 22px; }

/* ==========================================================================
   11. Pages internes
   ========================================================================== */
.page-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(340px, 52vh, 520px);
  overflow: hidden;
  color: #fff;
  background: var(--fc-brand-deep);
}
.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero .wrap {
  position: relative;
  z-index: 2;
  padding-top: clamp(64px, 10vw, 120px);
  padding-bottom: clamp(36px, 5vw, 64px);
}
.page-hero .wrap > * { margin-block: 0; }
.page-hero h1 { max-width: 18ch; margin-top: 18px; font-size: var(--wp--preset--font-size--xx-large); }
.page-hero .lead { max-width: 52ch; margin-top: 16px; color: rgba(255, 255, 255, .92); }

/* Fil d'Ariane. */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--fc-serif);
  font-style: italic;
  font-size: 15px;
  font-weight: 380;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, .9);
}
.breadcrumb li { display: inline-flex; align-items: center; gap: 10px; }
.breadcrumb li + li::before { content: "/"; content: "/" / ""; opacity: .6; }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: #fff; }

/* Registre : faits en lignes, étiquette et valeur, filets fins. Le moment dense de la page. */
.ledger { margin: 0; border-top: 1px solid var(--fc-line-strong); }
.ledger > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px 20px;
  align-items: baseline;
  padding-block: 13px 14px;
  border-bottom: 1px solid var(--fc-line);
}
.ledger dt {
  font-family: var(--fc-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--fc-ink-soft);
}
.ledger dd {
  margin: 0;
  font-family: var(--fc-serif);
  font-size: clamp(19px, 17.6px + .4vw, 23px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.006em;
  color: var(--fc-ink);
}
.ledger a { color: inherit; }
@media (min-width: 400px) {
  .ledger { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; }
  .ledger > div { grid-column: 1 / -1; grid-template-columns: 7.2em minmax(0, 1fr); grid-template-columns: subgrid; }
}

/* Années de la ferme : le registre le plus dense du site. */
.registre { margin: 0; border-top: 1px solid var(--fc-line-strong); }
.registre > div {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  gap: 0 16px;
  align-items: baseline;
  padding-block: 11px 12px;
  border-bottom: 1px solid var(--fc-line);
}
.registre dt {
  font-family: var(--fc-serif);
  font-size: var(--fc-s1);
  font-weight: 500;
  line-height: 1.1;
  color: var(--fc-accent);
  font-variant-numeric: lining-nums tabular-nums;
}
.registre dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--fc-ink-soft); }

/* Étapes d'un processus réel (numéros de la liste ordonnée, pas des numéros de section). */
.etapes { margin: 0; padding: 0; list-style: none; counter-reset: etape; }
.etapes > li {
  counter-increment: etape;
  position: relative;
  margin: 0;
  padding: 18px 0 20px 56px;
  border-top: 1px solid var(--fc-line);
}
.etapes > li::before {
  content: counter(etape);
  content: counter(etape) / "";
  position: absolute;
  top: 14px;
  left: 0;
  font-family: var(--fc-serif);
  font-size: var(--fc-s3);
  font-weight: 500;
  line-height: 1;
  color: var(--fc-accent);
}
.etapes > li > * { margin-block: 0; }
.etapes h3 { margin-bottom: 6px; }
.etapes p { color: var(--fc-ink-soft); }

/* La ferme : l'histoire en grand énoncé, le texte dessous sur le même axe. */
.histoire > .histoire__text { margin-top: clamp(28px, 4vw, 56px); }
@media (min-width: 1024px) {
  .histoire > .t-statement { grid-column: content-start / 12; }
}

/* La ferme : les années sur l'axe (colonnes 1 à 5), la vue aérienne 3:2 à droite (colonnes 6 à 12). */
.annees > .ph { aspect-ratio: 3 / 2; margin-top: 32px; }
@media (min-width: 1024px) {
  .annees > .annees__body { grid-column: 2 / 7; grid-row: 1; }
  .annees > .ph { grid-column: 7 / content-end; grid-row: 1; margin-top: 0; }
}
.annees__body > .registre { margin-top: clamp(22px, 2.4vw, 32px); }

/* La ferme : le parcours du poisson. Titre posé sur la ligne de base du diptyque (colonnes 1 à 5),
   diptyque à droite (6 à 12), puis les six étapes en deux colonnes calées sur les mêmes axes. */
.parcours > .diptych { margin-top: 32px; }
.parcours > .etapes { margin-top: 36px; }
@media (min-width: 1024px) {
  .parcours > .parcours__head { grid-column: 2 / 7; grid-row: 1; align-self: end; }
  .parcours > .diptych { grid-column: 7 / content-end; grid-row: 1; margin-top: 0; }
  .parcours > .etapes {
    grid-column: content;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--fc-gutter);
    margin-top: clamp(48px, 5vw, 72px);
  }
  .parcours > .etapes > li:nth-child(n+4) { grid-column: 2; }
  .parcours > .etapes > li:nth-child(3n+1) { grid-row: 1; }
  .parcours > .etapes > li:nth-child(3n+2) { grid-row: 2; }
  .parcours > .etapes > li:nth-child(3n) { grid-row: 3; }
  @supports (grid-template-columns: subgrid) {
    .parcours > .etapes { grid-template-columns: subgrid; }
    .parcours > .etapes > li { grid-column: 1 / 6; }
    .parcours > .etapes > li:nth-child(n+4) { grid-column: 6 / -1; }
  }
}

/* Nos poissons : les deux fiches côte à côte, comme la paire de l'accueil. Daurade sur 7 colonnes,
   loup sur 5, même hauteur d'image ; noms, textes et registres sur les mêmes lignes. */
.fiche > .ph { aspect-ratio: 3 / 2; }
.fiche > h2 { margin-top: 24px; font-size: var(--fc-s4); font-style: italic; font-weight: 400; line-height: 1.02; }
.fiche > p { margin-top: 14px; max-width: var(--fc-measure); color: var(--fc-ink-soft); }
.fiche > .ledger { margin-top: 22px; }
.fiches > .fiche--b { margin-top: clamp(56px, 9vw, 88px); }
@media (min-width: 1024px) {
  .fiches > .fiche { grid-row: 1 / span 4; grid-template-rows: subgrid; margin-top: 0; }
  .fiches > .fiche--a { grid-column: 2 / 9; }
  .fiches > .fiche--b { grid-column: 9 / content-end; }
  .fiche > .ph { grid-row: 1; }
  .fiche > h2 { grid-row: 2; }
  .fiche > p { grid-row: 3; }
  .fiche > .ledger { grid-row: 4; align-self: start; }
  @supports (grid-template-rows: subgrid) {
    .fiche--b > .ph { aspect-ratio: auto; }
    .fiche--b > .ph > img { position: absolute; inset: 0; }
  }
}

/* Avant de commander, cuissons : titre à gauche, contenu décalé à droite. */
.split > .split__body { margin-top: clamp(24px, 3vw, 36px); }
@media (min-width: 1024px) {
  .split > .split__head { grid-column: content-start / 6; grid-row: 1; }
  .split > .split__body { grid-column: 7 / content-end; grid-row: 1; margin-top: 0; }
}

/* Cuissons : une carte de cuisine, le nom en italique, la manière à côté. */
.cuissons { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--fc-line-strong); }
.cuissons > li {
  display: grid;
  gap: 6px 32px;
  margin: 0;
  padding-block: 20px 22px;
  border-bottom: 1px solid var(--fc-line);
}
.cuissons > li > * { margin-block: 0; }
.cuissons h3 { font-size: var(--fc-s2); font-style: italic; font-weight: 500; line-height: 1.1; }
.cuissons p { color: var(--fc-ink-soft); }
@media (min-width: 600px) {
  .cuissons > li { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: baseline; }
}

/* Où acheter : le grand énoncé, puis la phrase sur le même axe. */
.direct > .t-statement { max-width: 13ch; }
.direct > .prose { margin-top: clamp(24px, 3vw, 40px); }
@media (min-width: 1024px) {
  .direct > .t-statement { grid-column: content-start / 12; }
}

/* Où acheter : comment commander. Titre et trois étapes sur l'axe (colonnes 1 à 5), la pesée en 3:2
   à droite (colonnes 6 à 12). */
.commande > .etapes { margin-top: clamp(28px, 4vw, 40px); }
.commande > .ph { aspect-ratio: 3 / 2; margin-top: 36px; }
@media (min-width: 1024px) {
  .commande > :is(.marker, h2, .etapes) { grid-column: 2 / 7; }
  .commande > .marker { grid-row: 1; }
  .commande > h2 { grid-row: 2; }
  .commande > .etapes { grid-row: 3; }
  .commande > .ph { grid-column: 7 / content-end; grid-row: 1 / span 3; margin-top: 0; }
}

/* Pratique (Où acheter, Contact) : registre et actions sur l'axe (colonnes 1 à 5), carte 3:2 à droite
   (colonnes 6 à 12), dans le conteneur. */
.pratique > .ledger, .pratique > .pratique__actions { margin-top: 28px; }
.pratique > .fc-map { margin-top: 40px; }
.pratique__actions > * { margin-block: 0; }
/* Mobile : boutons empilés pleine largeur, comme dans le hero. */
@media (max-width: 599.98px) {
  :is(.pratique__actions, .achat__actions) .wp-block-buttons { flex-direction: column; align-items: stretch; }
  :is(.pratique__actions, .achat__actions) :is(.wp-block-button, .wp-block-button__link) { width: 100%; }
}
@media (min-width: 1024px) {
  .pratique > :is(.pratique__head, .ledger, .pratique__actions) { grid-column: 2 / 7; }
  .pratique > .pratique__head { grid-row: 1; }
  .pratique > .ledger { grid-row: 2; }
  .pratique > .pratique__actions { grid-row: 3; }
  .pratique > .fc-map { grid-column: 7 / content-end; grid-row: 1 / span 3; align-self: stretch; margin-top: 0; }
}

/* Contact : le numéro comme moment typographique. */
.appel > .appel__label { margin-bottom: clamp(10px, 1.6vw, 20px); }
.appel__num {
  font-family: var(--fc-serif);
  /* Le numéro tient sur une ligne : 6,2 em de large, mesuré. */
  font-size: min((100vw - 2 * var(--fc-pad)) / 6.5, 168px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;
}
.appel__num a { color: var(--fc-ink); }
.appel__num a:hover { color: var(--fc-brand); }
.appel > .appel__note { margin-top: clamp(20px, 2.4vw, 32px); }

/* Ils parlent de nous : source et date en marge, titre en italique, lecteur à la demande. */
.press-item { padding-block: clamp(32px, 4vw, 56px); border-top: 1px solid var(--fc-line); }
.press-item:first-child { padding-top: 0; border-top: 0; }
.press-item > * { grid-column: 1 / -1; }
.press-item__meta > * { margin-block: 0; }
.press-item__meta p:not(.label) { margin-top: 6px; font-size: 15px; color: var(--fc-ink-soft); }
.press-item__body { margin-top: 18px; }
.press-item__body > * { margin-block: 0; }
.press-item__body h2 { font-size: var(--fc-s3); font-style: italic; font-weight: 500; line-height: 1.1; }
.press-item__body > * + * { margin-top: 16px; }
.press-item__body > .fc-video { margin-top: 28px; }
.press-item__body p:not(.more) { max-width: var(--fc-measure); color: var(--fc-ink-soft); }
@media (min-width: 1024px) {
  .press-item__meta { grid-column: 1 / 5; }
  .press-item__body { grid-column: 6 / -1; grid-row: 1; margin-top: 0; }
}

/* Façades de la carte et des vidéos de tiers : aucune requête externe avant le clic. */
.fc-map, .fc-video {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  color: #fff;
  background: var(--fc-brand-deep);
}
.fc-video { aspect-ratio: 16 / 9; }
@media (min-width: 600px) { .fc-map { aspect-ratio: 3 / 2; } }
:is(.fc-map, .fc-video) iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fc-map__facade, .fc-video__facade {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
}
.fc-map__eyebrow, .fc-video__eyebrow {
  margin-right: 0;
  font-family: var(--fc-serif);
  font-style: italic;
  font-weight: 380;
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, .92);
}
.fc-map__addr { font-family: var(--fc-serif); font-size: clamp(20px, 2vw, 26px); font-weight: 500; line-height: 1.25; }
.fc-map__btn, .fc-video__btn {
  margin-top: 8px;
  padding: 14px 24px;
  border: 0;
  border-radius: 4px;
  background: var(--fc-accent);
  color: #fff;
  font-family: var(--fc-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: background-color var(--fc-dur) var(--fc-ease);
}
.fc-map__btn:hover, .fc-video__btn:hover { background: #6E4F1E; }
.fc-map__btn:active, .fc-video__btn:active { filter: brightness(.92); }
.fc-map__note, .fc-video__note { max-width: 34ch; font-size: 12px; color: rgba(255, 255, 255, .78); }

/* ==========================================================================
   12. Appel : bandeau de fin de page et barre collante (mobile)
   ========================================================================== */
.call { padding-block: clamp(48px, 30px + 5vw, 104px); background: var(--fc-accent); color: #fff; }
.call > .call__label { color: rgba(255, 255, 255, .92); }
.call__num {
  margin-top: 12px;
  font-family: var(--fc-serif);
  font-size: min(var(--fc-s5), 11.8vw);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.025em;
  white-space: nowrap;
}
.call > .call__side { margin-top: 24px; }
.call__side > p { font-size: 16px; line-height: 1.5; color: #fff; }
.call__side > .wp-block-buttons { margin-top: 20px; }
@media (max-width: 599.98px) {
  .call .wp-block-buttons, .call .wp-block-button, .call .wp-block-button__link { width: 100%; }
}
@media (min-width: 1024px) {
  .call > .call__label { grid-column: content-start / 10; grid-row: 1; }
  .call > .call__num { grid-column: content-start / 10; grid-row: 2; }
  .call > .call__side { grid-column: 10 / content-end; grid-row: 1 / span 2; align-self: end; margin-top: 0; }
}

/* Barre d'appel collante (mobile). Elle s'efface quand un autre bouton d'appel est à l'écran
   (assets/js/site.js) : jamais deux fois la même action visible. */
/* Ligne d'eau : le seul séparateur du site. La courbe reprend la vague évidée dans le
   ventre du cachalot. Une vague à chaque passage du clair au sombre, jamais entre deux
   fonds clairs. --from est la couleur du dessus, --to celle du dessous. */
.fc-wave {
  display: block;
  line-height: 0;
  overflow: hidden;
  background: var(--to, var(--fc-paper));
}
.fc-wave svg { display: block; width: 100%; height: clamp(32px, 4.6vw, 68px); }
.fc-wave path { fill: var(--from, var(--fc-paper)); }
.fc-wave--flip path { transform: scaleX(-1); transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .fc-wave svg { animation: fc-maree 36s ease-in-out infinite alternate; }
  .fc-wave--slow svg { animation-duration: 52s; }
  @keyframes fc-maree {
    from { transform: translateX(-6px); }
    to { transform: translateX(6px); }
  }
}
.fc-wave path { will-change: auto; }

/* Hero : la ligne d'eau qui fait descendre le film vers le papier. */
.hero { position: relative; }
.hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; line-height: 0; pointer-events: none; }
.hero__wave svg { display: block; width: 100%; height: clamp(32px, 4.6vw, 68px); }
.hero__wave path { fill: var(--fc-paper); }

.call-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: 90;
  display: none;
  grid-template-columns: 2fr 1fr;
  transition: transform .25s var(--fc-ease), visibility 0s linear 0s;
}
.call-bar.is-hidden {
  transform: translateY(100%);
  visibility: hidden;
  transition: transform .25s var(--fc-ease), visibility 0s linear .25s;
}
.call-bar a,
.call-bar__horaires {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  color: var(--fc-ecume);
  font: 600 15px var(--fc-sans);
  letter-spacing: .01em;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
.call-bar__tel { background: var(--fc-accent); }
.call-bar__horaires { background: var(--fc-brand-deep); }
.call-bar a:focus-visible,
.call-bar__horaires:focus-visible { outline-offset: -6px; }
.call-bar__panneau {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  z-index: 89;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  background: var(--fc-brand-deep);
  color: var(--fc-ecume);
  box-shadow: 0 -12px 34px rgba(6, 28, 36, .3);
}
.call-bar__panneau[hidden] { display: none; }
.call-bar__panneau b { font-family: var(--fc-serif); font-style: italic; font-weight: 500; font-size: 18px; }
.call-bar__panneau .call-bar__note { font-size: 13px; color: rgba(250, 246, 238, .72); }
@media (max-width: 599.98px) {
  .call-bar { display: grid; }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   13. Pied de page
   ========================================================================== */
.site-footer {
  background: var(--fc-brand-deep);
  color: rgba(255, 255, 255, .78);
  font-size: 15px;
}
.site-footer__grid { display: grid; gap: 36px 32px; padding-block: clamp(56px, 7vw, 80px) clamp(40px, 5vw, 56px); }
@media (min-width: 600px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; } }
.site-footer p { margin: 0; line-height: 1.65; }
.site-footer__name { font-family: var(--fc-serif); font-size: 26px; font-weight: 500; letter-spacing: -.01em; color: #fff; }
.site-footer__brand > p + p { max-width: 34ch; margin-top: 10px; }
.site-footer__title {
  margin: 0 0 14px;
  font-family: var(--fc-serif);
  font-style: italic;
  font-size: 18px;
  font-weight: 380;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fc-gold);
}
.site-footer__title + * { margin-top: 0; }
.site-footer__links { margin: 0; padding: 0; list-style: none; }
.site-footer__links li + li { margin-top: 8px; }
.site-footer a { color: rgba(255, 255, 255, .88); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__legal { border-top: 1px solid var(--fc-line-on-dark); }
.site-footer__legal .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 20px;
  font-size: 13px;
  color: rgba(255, 255, 255, .62);
}

/* ==========================================================================
   14. Mouvement réduit : ni translation, ni agrandissement, ni transition (DESIGN.md §6).
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .more a:hover::after,
  .card--link:hover .ph img { transform: none; }
}

/* ==========================================================================
   Composants de la charte (tour 4)
   Fiche de poisson, carte dessinée, chapitre suivant, ardoise longue, menu.
   ========================================================================== */

/* Fiche de poisson, composée comme une ardoise de poissonnier. */
.fiche { display: flex; flex-direction: column; align-items: stretch; }
.fiche__photo { position: relative; }
.fish--a.fiche, .fish--b.fiche { align-self: start; }
.fiche__photo { margin: 0; overflow: hidden; }
.fiche__photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 46%; transition: transform 1.2s var(--fc-ease); }
/* Les deux fiches partagent la même hauteur de photo, donc les noms s'alignent sur une même ligne. */
.fish.fiche .fiche__photo { height: clamp(190px, 23vw, 340px); }
.fish.fiche .fiche__photo img { height: 100%; aspect-ratio: auto; }
.fiche:hover .fiche__photo img { transform: scale(1.04); }
.fiche__nom { margin-top: 20px; font-family: var(--fc-serif); font-style: italic; font-weight: 400; font-size: var(--fc-s4); line-height: 1.02; letter-spacing: -.02em; }
.fiche__latin { margin-top: 6px; font-family: var(--fc-sans); font-size: 13px; font-style: italic; color: var(--fc-ink-soft); }
.fiche__cuisson { margin-top: 14px; color: var(--fc-ink-soft); max-width: 40ch; }
.fiche__faits { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--fc-line); font-family: var(--fc-serif); font-weight: 380; font-size: 18px; color: var(--fc-ink); }

/* Carte dessinée de la baie, cliquable vers l'itinéraire. */
.carte-baie { display: block; margin-top: 34px; border: 1px solid var(--fc-line); background: var(--fc-brand-deep); overflow: hidden; color: inherit; text-decoration: none; transition: transform .35s var(--fc-ease), box-shadow .35s var(--fc-ease); }
.carte-baie:hover, .carte-baie:focus-visible { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(6, 28, 36, .3); }
.carte-baie svg { display: block; width: 100%; height: auto; }
.carte-baie__pied { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 20px; background: var(--fc-surface); border-top: 1px solid var(--fc-line); font-size: 13px; color: var(--fc-ink-soft); }
.carte-baie__pied b { font-family: var(--fc-serif); font-weight: 400; font-size: 17px; color: var(--fc-ink); }
.carte-baie__cta { display: inline-flex; align-items: center; gap: 9px; color: var(--fc-accent); font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--fc-accent); padding-bottom: 2px; white-space: nowrap; }

/* Chapitre suivant, en bas de chaque page intérieure. Toute la bande est cliquable. */
.chapitre-suivant { position: relative; display: block; overflow: hidden; background: var(--fc-brand-deep); color: var(--fc-ecume); }
.chapitre-suivant__lien { position: relative; display: block; text-decoration: none; color: inherit; }
.chapitre-suivant__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .4; transition: opacity .5s var(--fc-ease), transform 1.4s var(--fc-ease); }
.chapitre-suivant__lien:hover .chapitre-suivant__photo, .chapitre-suivant__lien:focus-visible .chapitre-suivant__photo { opacity: .54; transform: scale(1.03); }
.chapitre-suivant__corps { position: relative; display: block; padding-block: clamp(48px, 8vw, 96px); }
.chapitre-suivant__label { display: block; font-family: var(--fc-serif); font-style: italic; font-size: 17px; color: var(--fc-gold); margin-bottom: 10px; }
.chapitre-suivant__titre { font-size: var(--fc-s5); color: var(--fc-ecume); max-width: 20ch; }
.chapitre-suivant__fleche { display: inline-block; margin-left: .35em; transition: transform .3s var(--fc-ease); }
.chapitre-suivant__lien:hover .chapitre-suivant__fleche { transform: translateX(6px); }

/* Ardoise longue, dans le pied de page. */
.ardoise { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px; border: 1px solid var(--fc-line-on-dark); }
.ardoise__titre { font-size: var(--fc-s1); color: var(--fc-ecume); }
.ardoise__ligne--longue { font-family: var(--fc-serif); font-style: italic; font-weight: 380; font-size: 20px; color: var(--fc-ecume); max-width: none; }
.ardoise__note { font-size: 14px; color: rgba(250, 246, 238, .72); max-width: 34ch; }
.site-footer__logo { display: block; width: min(320px, 72%); height: auto; margin-bottom: 24px; }

/* Menu plein écran, marine, liens en Fraunces. */
.site-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--fc-nuit); }
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: var(--fc-serif);
  font-size: clamp(28px, 7vw, 40px);
  font-weight: 400;
  letter-spacing: -.015em;
  text-transform: none;
}

/* La carte dessinée prend la colonne de droite des sections pratiques, comme l'ancienne
   façade, et cesse d'occuper toute la largeur. */
.carte-baie { width: 100%; max-width: 100%; }
.carte-baie svg { display: block; width: 100%; height: auto; }
@media (min-width: 1024px) {
  .pratique > .carte-baie,
  .achat > .carte-baie {
    grid-column: 7 / content-end;
    grid-row: 1 / span 3;
    align-self: start;
    margin-top: 0;
  }
}

/* La daurade est un panorama 2:1 : le cadre prend donc la hauteur 23vw, soit 46vw / 2, pour
   que le poisson entier tienne sans rognage. Le loup, plus carré, se recadre légèrement en hauteur. */
.fish--a.fiche .fiche__photo img { object-position: 50% 50%; }
.fish--b.fiche .fiche__photo img { object-position: 50% 52%; }

/* Page Nos poissons : même cadre panoramique que l'accueil (2:1) pour que la daurade
   s'affiche entière, et le loup suit le même format pour rester aligné. */
.fiches .fiche__photo img { aspect-ratio: 2 / 1; }
#daurade-royale .fiche__photo img { object-position: 50% 50%; }
#loup .fiche__photo img { object-position: 50% 42%; }

/* ==========================================================================
   Carnet de recettes et carte de recette (décision RECETTES-DECISION.md)
   ========================================================================== */
.rc-titre { font-size: var(--fc-s4); max-width: 20ch; }
.rc-carnet { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); margin-top: 38px; }
.rc-carnet h3 { font-family: var(--fc-serif); font-style: italic; font-size: var(--fc-s2); color: var(--fc-brand); margin-bottom: 8px; }
.rc-liste { list-style: none; margin: 0; padding: 0; }
.rc-liste li { border-top: 1px solid var(--fc-line); }
.rc-liste li:last-child { border-bottom: 1px solid var(--fc-line); }
.rc-liste button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 20px 0; font: inherit; color: inherit; cursor: pointer; }
.rc-nom { display: block; font-family: var(--fc-serif); font-style: italic; font-size: var(--fc-s2); line-height: 1.15; text-decoration: underline 1px transparent; text-underline-offset: .28em; transition: text-decoration-color .3s var(--fc-ease); }
.rc-liste button:hover .rc-nom, .rc-liste button:focus-visible .rc-nom { text-decoration-color: var(--fc-accent); }
.rc-inf { display: block; margin-top: 6px; font-size: 15px; color: var(--fc-ink-soft); }
.rc-inf b { font-family: var(--fc-serif); font-weight: 400; color: var(--fc-ink); }

.fc-voile { position: fixed; inset: 0; z-index: 95; background: rgba(6, 26, 36, .62); overflow-y: auto; padding: clamp(12px, 3vw, 44px); }
.fc-voile[hidden] { display: none; }
.fc-carte { background: var(--fc-ecume); color: var(--fc-ink); max-width: 880px; margin: 0 auto; padding: clamp(24px, 3.4vw, 48px); }
.fc-carte__tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fc-carte__logo { display: block; height: 44px; width: auto; }
.fc-carte__fermer { background: none; border: 1px solid var(--fc-line); color: var(--fc-ink); padding: 12px 16px; font: 600 13px var(--fc-sans); cursor: pointer; }
.fc-carte__fermer:hover { background: var(--fc-brand-deep); color: var(--fc-ecume); border-color: var(--fc-brand-deep); }
.fc-carte__poisson { display: block; margin-top: 22px; font-family: var(--fc-serif); font-style: italic; color: var(--fc-brand); font-size: 17px; }
.fc-carte__titre { font-size: clamp(30px, 3.4vw, 48px); margin: 6px 0 18px; max-width: 20ch; }
.fc-reperes { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-bottom: 20px; border-bottom: 1px solid var(--fc-line); font-size: 15px; color: var(--fc-ink-soft); }
.fc-reperes b { font-family: var(--fc-serif); font-weight: 400; color: var(--fc-ink); }
.fc-carte__corps { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(20px, 3vw, 40px); padding-top: 24px; }
.fc-carte__corps h3 { font-family: var(--fc-serif); font-style: italic; font-size: 19px; color: var(--fc-brand); margin: 0 0 12px; }
.fc-ingr { list-style: none; margin: 0; padding: 0; font-size: 15.5px; }
.fc-ingr li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--fc-line); }
.fc-ingr .fc-q { font-family: var(--fc-serif); white-space: nowrap; }
.fc-conseil { margin-top: 20px; font-family: var(--fc-serif); font-style: italic; color: var(--fc-ink-soft); font-size: 16px; }
.fc-etapes { list-style: none; margin: 0; padding: 0; counter-reset: fce; }
.fc-etapes li { counter-increment: fce; position: relative; padding: 0 0 18px 44px; font-size: 17.5px; line-height: 1.6; color: var(--fc-ink-soft); }
.fc-etapes li b { font-weight: 600; color: var(--fc-ink); }
.fc-etapes li::before { content: counter(fce); position: absolute; left: 0; top: 0; font-family: var(--fc-serif); font-style: italic; font-size: 26px; color: var(--fc-brand); opacity: .85; }
.fc-nutri { margin-top: 28px; background: var(--fc-surface); padding: 20px 22px; }
.fc-nutri h3 { font-family: var(--fc-serif); font-style: italic; font-size: 17px; color: var(--fc-brand); margin: 0 0 10px; }
.fc-nutri table { width: 100%; border-collapse: collapse; font-size: 15px; }
.fc-nutri th, .fc-nutri td { text-align: left; padding: 7px 0; border-bottom: 1px solid rgba(11, 40, 54, .12); }
.fc-nutri th { font-family: var(--fc-sans); font-weight: 600; color: var(--fc-ink-soft); font-size: 13px; }
.fc-nutri td.fc-v { font-family: var(--fc-serif); text-align: right; font-size: 17px; }
.fc-src { margin: 10px 0 0; font-size: 12.5px; color: var(--fc-ink-soft); }
.fc-src b { color: var(--fc-accent); }
.fc-carte__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--fc-line); }
.fc-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--fc-accent); color: var(--fc-ecume); padding: 15px 24px; font-weight: 600; font-size: 14px; text-decoration: none; }
.fc-btn:hover { background: #7f4520; }
.fc-lien { background: none; border: 0; padding: 0; color: var(--fc-brand); border-bottom: 1px solid var(--fc-accent); font: 600 14px var(--fc-sans); cursor: pointer; }

@media (max-width: 760px) {
  .rc-carnet { grid-template-columns: 1fr; gap: 34px; }
  .fc-carte__corps { grid-template-columns: 1fr; }
  .fc-carte__logo { height: 36px; }
  .fc-voile { padding: 0; }
  .fc-carte { min-height: 100%; max-width: none; }
}

/* Impression : la carte entière, sans coupure, et rien d'autre. */
@page { margin: 14mm; }
@media print {
  /* L'impression d'une recette n'a de sens que carte ouverte. Sans cette condition,
     toutes les autres pages du site sortaient blanches. */
  body.fc-carte-ouverte .wp-site-blocks { padding-top: 0 !important; }
  body.fc-carte-ouverte #wpadminbar,
  body.fc-carte-ouverte .site-header,
  body.fc-carte-ouverte .site-footer,
  body.fc-carte-ouverte .call-bar,
  body.fc-carte-ouverte .call,
  body.fc-carte-ouverte .page-hero,
  body.fc-carte-ouverte .fc-wave,
  body.fc-carte-ouverte .chapitre-suivant,
  body.fc-carte-ouverte main.site-main > section:not(#recettes),
  body.fc-carte-ouverte #recettes > *:not(.fc-voile) { display: none !important; }
  body.fc-carte-ouverte .fc-voile { position: static !important; display: block !important;
    background: none !important; overflow: visible !important; padding: 0 !important; inset: auto !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.fc-carte-ouverte main.site-main { display: block !important; padding: 0 !important; }
  body.fc-carte-ouverte #recettes { padding: 0 !important; margin: 0 !important; }
  body.fc-carte-ouverte .fc-carte { max-width: none !important; width: 100% !important; padding: 0 !important;
    margin: 0 !important; box-shadow: none !important; border: 0 !important; }
  body.fc-carte-ouverte .fc-carte__corps { grid-template-columns: 5fr 7fr !important; }
  body.fc-carte-ouverte .fc-carte__fermer,
  body.fc-carte-ouverte .fc-carte__pied .fc-btn,
  body.fc-carte-ouverte .fc-lien { display: none !important; }
  body.fc-carte-ouverte .fc-carte__logo { height: 12mm !important; }
  /* La fiche s'imprime sur fond blanc, sans aplat de couleur. */
  body.fc-carte-ouverte .fc-carte { background: #fff !important; color: #000 !important; }
  body.fc-carte-ouverte .fc-nutri { background: #fff !important; }
  @page { margin: 10mm; }
}

/* Marque en transparence sur le film du hero, a la maniere des domaines viticoles.
   L'ecume sur la video, avec un voile doux derriere pour rester lisible sur les images claires. */
.hero__marque { position: absolute; z-index: 2; left: 50%; top: 32%; transform: translate(-50%, -50%); opacity: .9; pointer-events: none; }
.hero__marque img { display: block; width: clamp(220px, 25vw, 400px); height: auto; filter: drop-shadow(0 3px 22px rgba(6, 28, 36, .65)) drop-shadow(0 1px 4px rgba(6, 28, 36, .5)); }
@media (max-width: 640px) { .hero__marque { top: 27%; } .hero__marque img { width: 210px; } }

/* ==========================================================================
   15. Pages légales
   ========================================================================== */
.page-hero--sol { min-height: clamp(200px, 26vh, 290px); color: var(--fc-ink); background: var(--fc-surface); }
.page-hero--sol .lead { color: var(--fc-ink-soft); }
.page-hero--sol::before { display: none; }
.page-hero--sol .breadcrumb,
.page-hero--sol .breadcrumb a,
.page-hero--sol .breadcrumb a:hover,
.page-hero--sol .breadcrumb [aria-current="page"] { color: var(--fc-ink-soft); }
.page-hero--sol .breadcrumb [aria-current="page"] { opacity: .85; }

.legal { row-gap: var(--fc-tight); }
.legal__bloc { grid-column: content; max-width: var(--fc-measure); }
.legal h2 { font-size: var(--fc-s2); font-weight: 400; line-height: 1.1; }
.legal__bloc > * + * { margin-top: 1em; }
.legal__bloc > h2 + * { margin-top: clamp(14px, 1.6vw, 22px); }
.legal__bloc a { color: var(--fc-teal); }
.legal__bloc a:hover { color: var(--fc-ink); }

.legal__fiche { margin: 0; border-top: 1px solid var(--fc-line-strong); }
.legal__fiche > div { display: grid; grid-template-columns: minmax(0, 10.5em) minmax(0, 1fr); gap: 4px 24px; padding: 13px 0; border-bottom: 1px solid var(--fc-line); }
.legal__fiche dt { font-family: var(--fc-serif); font-weight: 380; font-size: 16px; color: var(--fc-ink); }
.legal__fiche dd { margin: 0; color: var(--fc-ink-soft); }

.legal__note { font-size: 15px; color: var(--fc-ink-soft); }
.legal__note strong, .legal__bloc strong { font-weight: 600; color: var(--fc-ink); }

@media (max-width: 560px) {
  .legal__fiche > div { grid-template-columns: 1fr; gap: 3px; }
}

/* Liens légaux du pied de page. */
.site-footer__legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.site-footer__legal-links a { color: inherit; }

/* Page propre d'une recette : meme colonne de lecture que les pages legales. */
/* Le bouton d'appel garde son contraste sur fond clair, la regle de lien des pages legales etant plus forte. */
.legal__bloc a.fc-btn, .legal__bloc a.fc-btn:hover { color: var(--fc-ecume); text-decoration: none; }
.legal__bloc a.fc-btn:hover { background: #7f4520; }
.recette__photo { margin: 0; }
.recette__photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.recette__ingr { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--fc-line-strong); }
.recette__ingr li { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--fc-line); }
.recette__ingr b { font-family: var(--fc-serif); font-weight: 400; color: var(--fc-ink); text-align: right; }
.recette__etapes { margin: 0; padding-left: 1.5em; }
.recette__etapes li { padding: 9px 0; }
.recette__etapes li + li { border-top: 1px solid var(--fc-line); }
.recette__nutri { width: 100%; margin: 0; border-top: 1px solid var(--fc-line-strong); }
.recette__nutri tr { border-bottom: 1px solid var(--fc-line); }
.recette__nutri th, .recette__nutri td { padding: 10px 0; font-weight: 400; text-align: left; }
.recette__nutri td { text-align: right; font-family: var(--fc-serif); color: var(--fc-ink); }

/* ==========================================================================
   16. Points de vente, page Où acheter. Section vide : rien ne s'affiche.
   ========================================================================== */
.pdv__liste { grid-column: content; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 258px), 1fr)); gap: clamp(26px, 3vw, 46px); margin-top: clamp(28px, 3.4vw, 48px); }
.pdv__item { padding-top: 20px; border-top: 1px solid var(--fc-line-strong); }
.pdv__nom { margin: 0; font-family: var(--fc-serif); font-style: italic; font-weight: 400; font-size: var(--fc-s2); line-height: 1.1; }
.pdv__type { margin-top: 9px; font-size: 14px; color: var(--fc-ink-soft); }
.pdv__adresse, .pdv__quand { margin-top: 10px; color: var(--fc-ink-soft); max-width: 30ch; }
.pdv__note { margin-top: 10px; font-family: var(--fc-serif); font-style: italic; color: var(--fc-ink-soft); }
.pdv__tel { margin-top: 15px; }
.pdv__tel a, .pdv__lien a { color: var(--fc-teal); text-decoration: none; }
.pdv__tel a:hover, .pdv__lien a:hover { color: var(--fc-ink); text-decoration: underline; }
.pdv__lien { margin-top: 7px; font-size: 14px; }