/* rest.css : les composants du système Arche, chargés en différé après le
   CSS critique (core.css). Tout ce qui vit sous la ligne de flottaison et que
   plusieurs familles de pages partagent : menu mobile, repères chiffrés,
   panneaux, registres, côte, FAQ, fiches, prix, listes, crédit d'impôt,
   appel final, pied de page, formulaires.

   Règles du système (voir aussi docs/motion-api.md) :
   - toute image est cadrée dans une baie (plein cintre, anse de panier ou niche) ;
   - aucune surface sombre, aucun aplat qui chevauche une image ;
   - aucune étiquette en capitales espacées, aucun grand chiffre gras ;
   - toute action est une pilule de 44 px et plus ;
   - sans JavaScript, rien n'est masqué en attente d'une animation. */

@layer tokens {
  /* Les noms de la direction précédente (« Volets ouverts »), que les
     feuilles de pages lisent encore, pointent sur la palette Arche. Ils ne
     servent qu'aux feuilles différées : le CSS critique ne les lit pas. */
  :root {
    --platre: var(--chaux);
    --travertin: var(--enduit);
    --gres: var(--pierre);
    --ardoise: var(--encre-doux);
    --mer: var(--argile);
    --ocre: var(--argile);
    --abysse: var(--lin);
    --ecume: var(--encre-doux);
    --ecume-25: rgba(205, 184, 149, .7);
    --ecume-60: var(--encre-doux);
    --encre-14: rgba(58, 47, 38, .18);
    --surface-sombre: var(--lin);
    --texte-sur-sombre: var(--encre);
    --filet-ecume: var(--filet);
    --filet-fort: 1px solid var(--pierre);
    --voile-abysse: var(--voile-leger);
    --voile-platre: transparent;
    --vignette-encre: linear-gradient(transparent, transparent);
    --ff-titre: var(--serif);
    --ff-texte: var(--sans);
    --ff-chiffre: var(--sans);
    --fw-sous-titre: var(--fw-titre);
    --fw-etiquette: var(--fw-appui);
    --fvn-chiffre: var(--fvn);
    --ls-nav: .02em;
    --ls-etiquette: .02em;
    --fs-etiquette: var(--fs-mini);
    --fs-h2-xl: var(--fs-h2);
    --fs-h3-l: var(--fs-h3);
    --fs-registre: var(--fs-h4);
    --fs-exigence: var(--fs-h4);
    --fs-question: var(--fs-h4);
    --fs-clienteles: var(--fs-h3);
    --fs-chiffre-repere: var(--fs-repere);
    --fs-chiffre-zones: var(--fs-repere);
    --fs-chiffre-credit: var(--fs-repere);
    --fs-chiffre-methode: var(--fs-repere);
    --fs-chiffre-compteur: var(--fs-repere);
    --fs-telephone: var(--fs-prix);
    --lh-sous-titre: var(--lh-h3);
    --rayon-max: var(--rayon-s);
    --marge-g: var(--marge);
    --marge-d: var(--marge);
    --recouvrement-mobile: 0px;
    --image-min: 36vh;
    --carre-fibre: 64px;
    --carre-fibre-survol: 64px;
    --cible-tactile: var(--cible);
    --ease-micro: var(--doux);
    --ease-filet: var(--doux);
    --ease-lame: var(--doux);
    --ease-volet: var(--doux);
    --dur-micro: var(--dur-survol);
    --dur-cellule: var(--dur-survol);
    --glissement-nav: 4px;
    --glissement-lien: 6px;
    --col: calc((min(100vw, var(--max)) - 11 * var(--gouttiere)) / 12);
    --col-largeur: var(--col);
  }
}

@layer layout {
  .center { text-align: center; max-width: none; margin-inline: auto; justify-content: center; }
  .mt-l { margin-block-start: var(--esp-l); }
  .prose { max-width: var(--mesure); }
  .prose > * + * { margin-block-start: var(--esp-m); }
  .prose h2, .prose h3 { margin-block-start: var(--esp-l); }
  .prose h2 { font-size: var(--fs-h2-s); }
  .prose ul:not([class]), .prose ol:not([class]) { padding-left: 1.2em; }
  .prose li + li { margin-top: var(--esp-2xs); }
  .prose li::marker { color: var(--argile-doux); }
}

@layer components {
  /* ======================================================================
     Menu plein écran du mobile : chaux claire, grands liens en EB Garamond.
     Il s'ouvre en arche depuis le bas (nav.js) ; sans GSAP, il apparaît.
     ====================================================================== */
  .menu {
    position: fixed; inset: 0; z-index: var(--z-menu); overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; justify-content: center; gap: 2.2rem;
    padding: calc(var(--h-entete) + 2rem) var(--gout) max(2.5rem, env(safe-area-inset-bottom));
    background: var(--chaux-clair); color: var(--encre);
  }
  .rameau--menu { width: 80vw; height: 80vw; right: -24vw; bottom: -10vw; transform: scaleX(-1) rotate(8deg); }
  .menu__nav { position: relative; z-index: 1; display: grid; gap: 2rem; }
  .menu__liste { display: grid; gap: 2px; }
  .menu__lien { display: inline-flex; align-items: center; min-height: 56px; font: 400 clamp(2.2rem, 9vw, 2.75rem) / 1.15 var(--serif); }
  .menu__lien[aria-current] { font-style: italic; color: var(--argile); }
  .menu__second { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: .95rem; color: var(--encre-doux); }
  .menu__second a { display: inline-flex; align-items: center; min-height: var(--cible); }
  .menu__second a[aria-current] { color: var(--argile); }
  .menu__pied { position: relative; z-index: 1; font: italic 1.1rem / 1.4 var(--serif); color: var(--encre-doux); }
  .menu__pied em { color: var(--argile); }
  /* Le corps ne défile plus derrière le menu ouvert (position mémorisée par nav.js). */
  body.menu-ouvert { overflow: hidden; position: fixed; width: 100%; }
  .menu-ouvert .entete { background: transparent; box-shadow: none; transform: none; }
  @media (min-width: 900px) { .menu { display: none; } }

  /* ======================================================================
     Repères chiffrés : la petite arche, le chiffre en Jost 300 argile, le
     libellé en italique serif. Plus de compteur gras ni de capitales.
     ====================================================================== */
  .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem 1.25rem; text-align: center; }
  @media (min-width: 900px) {
    .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
    .stats:has(> .stat:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .stat { position: relative; max-width: none; padding-top: 34px; }
  .stat::before { content: ""; position: absolute; top: 0; left: 50%; width: 15px; height: 18px; margin-left: -7.5px; background: var(--arc-icone) center / contain no-repeat; }
  .stat strong { display: block; font: 300 var(--fs-repere) / 1 var(--sans); font-variant-numeric: var(--fvn); color: var(--argile); white-space: nowrap; }
  .stat strong em { font-style: normal; font-size: .5em; color: inherit; }
  .stat > span, .stat > small { display: block; margin-top: .7rem; font: italic 1.15rem / 1.3 var(--serif); letter-spacing: 0; text-transform: none; color: var(--encre-doux); }

  /* ======================================================================
     Images : baies et voiles. Un conteneur d'image animé reste rogné à sa
     forme ; la photo n'est jamais posée sur un aplat qui la chevauche.
     ====================================================================== */
  :where([data-reveal-image], [data-arche]) { position: relative; overflow: hidden; }
  .voile { position: relative; overflow: hidden; border-radius: var(--anse); background: var(--sable); }
  .voile :is(picture, img) { width: 100%; height: 100%; object-fit: cover; }
  .arche__ombre { position: absolute; inset: -20%; pointer-events: none; background: repeating-linear-gradient(112deg, rgba(60, 40, 22, 0) 0 46px, rgba(60, 40, 22, .16) 46px 80px); filter: blur(8px); mix-blend-mode: multiply; }
  .ombre-persienne--appel { -webkit-mask-image: radial-gradient(55% 60% at 30% 40%, #000 0%, rgba(0, 0, 0, .5) 50%, transparent 80%); mask-image: radial-gradient(55% 60% at 30% 40%, #000 0%, rgba(0, 0, 0, .5) 50%, transparent 80%); }

  /* Panneau : un encadré d'enduit aux angles doux. Il ne chevauche jamais une image. */
  .panneau { position: relative; padding: var(--bloc-y) clamp(1.5rem, 3vw, 3rem); border-radius: var(--rayon); background: var(--enduit); color: var(--encre); }
  .surface--travertin .panneau, .section--alt .panneau { background: var(--chaux-clair); }
  .panneau > * + * { margin-block-start: var(--esp-m); }
  .panneau h3 { font-size: var(--fs-h3); }

  /* ======================================================================
     Registre : des lignes séparées par un filet de pierre, chacune avec sa
     petite baie de texture. Au survol, le titre glisse vers la lumière.
     ====================================================================== */
  .registre { border-top: var(--filet); }
  .registre__ligne { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem 1.4rem; align-items: center; padding-block: 1.25rem; border-bottom: var(--filet); }
  .registre__ligne a::after { content: ""; position: absolute; inset: 0; }
  .registre__ligne > .u-num:first-child { width: 2.4rem; font-size: .84rem; color: var(--encre-doux); }
  .registre__titre { font: 400 var(--fs-h4) / 1.2 var(--serif); max-width: none; transition: transform var(--dur-survol) var(--doux), color var(--dur-survol) var(--doux); }
  .registre__titre a { color: inherit; }
  .registre__ligne:is(:hover, :focus-within) .registre__titre { transform: translateX(6px); color: var(--argile); }
  .registre__meta { margin-top: .2rem; font-size: var(--fs-petit); color: var(--encre-doux); }
  .registre__meta .lien { min-height: var(--cible); padding: 0 .9rem; font-size: .9rem; }
  /* La texture en petite baie cintrée, au lieu du carré de 72 px. */
  .registre__fibre { width: 56px; height: 68px; flex: none; border-radius: var(--cintre); background: var(--sable) center / cover no-repeat; box-shadow: var(--ombre-douce); }
  .registre__chiffres { display: flex; flex-wrap: wrap; gap: .2rem 1.6rem; font-size: var(--fs-petit); color: var(--encre-doux); max-width: none; }
  .registre__chiffres .u-num { color: var(--encre); }
  @media (min-width: 900px) {
    .registre__ligne { grid-template-columns: auto minmax(0, 1fr) auto; }
    .registre__chiffres { justify-content: flex-end; text-align: right; }
  }
  @media (max-width: 899px) { .registre__chiffres { grid-column: 2; } }

  /* ======================================================================
     La côte, de Cassis à Saint-Tropez : un trait de pierre, des escales
     d'argile, des noms en italique serif.
     ====================================================================== */
  .coastline { position: relative; }
  .coastline svg { display: block; width: 100%; height: auto; overflow: visible; }
  .coastline__terre { fill: none; stroke: #B9A27E; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
  .coastline__ile { fill: var(--sable); stroke: #C9B490; stroke-width: 1; }
  .coastline__point circle { fill: var(--argile); transition: fill var(--dur-survol) var(--doux); }
  /* Le halo de chaux autour des lettres efface le trait de côte qui passe
     dessous : à 5 px, le trait se voyait encore entre deux lettres
     (« La Seyne-sur-Mer, notre base », « Toulon » barrés). */
  .coastline__point text { font: italic 500 22px var(--serif); fill: var(--encre-doux); paint-order: stroke; stroke: var(--chaux); stroke-width: 9px; stroke-linejoin: round; }
  .surface--travertin .coastline__point text, .section--alt .coastline__point text { stroke: var(--enduit); }
  .coastline__point--base circle { fill: var(--chaux-clair); stroke: var(--argile); stroke-width: 2; }
  .coastline__point--base text { fill: var(--argile); }
  .coastline__point[data-port] circle { fill: var(--argile-doux); }
  .coastline__point.is-actif circle { fill: var(--argile); stroke: var(--chaux-clair); stroke-width: 2; }
  .coastline__point.is-actif text { fill: var(--argile); }
  /* Réduite (bande des communes, registre) : les noms n'apparaissent qu'à l'escale allumée. */
  .coastline--mini .coastline__point circle { r: 7; }
  .coastline--mini .coastline__point text { font-size: 30px; opacity: 0; transition: opacity var(--dur-survol) var(--doux); }
  .coastline--mini .coastline__point:is(.is-actif, .coastline__point--base) text { opacity: 1; }
  .coastline--mini .coastline__point.is-actif circle { r: 10; }

  /* Liste de liens : des pilules légères qui se replient, 44 px chacune. */
  .link-list { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: var(--bloc-y); }
  .link-list li { display: flex; max-width: none; }
  /* Pilules « fond lin » : la forme du bouton est donnée par le fond. */
  .link-list a { display: inline-flex; align-items: center; min-height: var(--cible); padding: .55rem 1.15rem; border-radius: var(--pill); font-size: .94rem; color: var(--encre); background: var(--lin); transition: background-color var(--dur-survol) var(--doux), box-shadow var(--dur-survol) var(--doux), color var(--dur-survol) var(--doux); }
  :is(.surface--abysse, .section--dark, .section--alt, .surface--travertin) .link-list a { background: var(--chaux-clair); }
  .link-list a:is(:hover, :focus-visible) { box-shadow: inset 0 0 0 1px var(--argile); color: var(--argile); }
  .link-list strong { font-weight: var(--fw-appui); }

  /* ======================================================================
     Citations : une niche, une citation en italique serif.
     ====================================================================== */
  .quotes { display: grid; gap: var(--esp-xl); }
  .quote { display: flex; flex-direction: column; gap: var(--esp-m); max-width: none; }
  .quote blockquote { font: italic 400 var(--fs-citation) / 1.3 var(--serif); color: var(--encre); max-width: 26ch; text-wrap: pretty; }
  .quote figcaption, .quote__auteur { font-size: var(--fs-petit); font-weight: var(--fw-appui); display: flex; flex-direction: column; gap: 2px; }
  .quote figcaption :is(small, span), .quote__auteur small { font: italic 400 1.05rem / 1.3 var(--serif); color: var(--encre-doux); }
  .quotes__index { display: flex; gap: 0; margin-top: var(--esp-m); }
  .quotes__index button { position: relative; width: var(--cible); height: var(--cible); font-size: 0; }
  .quotes__index button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--pierre); transition: transform .8s var(--doux), background-color .8s var(--doux); }
  .quotes__index button.is-actif::before { background: var(--argile); transform: scale(1.5); }

  /* ======================================================================
     FAQ : details et summary natifs, ouverts et lisibles sans JS.
     ====================================================================== */
  .faq-zone { max-width: 54rem; }
  .faq { border-top: var(--filet); }
  .faq__item { border-bottom: var(--filet); }
  .faq__toggle { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.1rem; min-height: 64px; padding-block: 1.1rem; text-align: left; }
  .faq__num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 40px; padding-top: 5px; border: 1px solid var(--pierre); border-radius: 999px 999px 4px 4px; font-size: .82rem; color: var(--argile); }
  .faq__q { font: 400 var(--fs-h4) / 1.25 var(--serif); margin: 0; transition: color var(--dur-survol) var(--doux); }
  .faq__toggle:hover .faq__q { color: var(--argile); }
  .faq__plus { position: relative; width: var(--cible); height: var(--cible); border-radius: 50%; box-shadow: inset 0 0 0 1px var(--contour); transition: transform var(--dur-accordeon) var(--doux), background-color var(--dur-accordeon) var(--doux); }
  .faq__plus::before, .faq__plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--argile); translate: -50% -50%; }
  .faq__plus::before { width: 14px; height: 1px; }
  .faq__plus::after { width: 1px; height: 14px; }
  .faq__item[open] .faq__plus { transform: rotate(45deg); background: var(--lin); }
  .faq__panel { overflow: hidden; }
  .faq__inner { padding: 0 0 1.4rem calc(34px + 1.1rem); }
  .faq__inner p { color: var(--encre-doux); max-width: var(--mesure); }
  .faq-vide { padding-block: var(--esp-l); font: italic 1.2rem / 1.4 var(--serif); color: var(--encre-doux); }
  @media (max-width: 599px) { .faq__inner { padding-left: 0; } .faq__num { display: none; } .faq__toggle { grid-template-columns: minmax(0, 1fr) auto; } }

  /* ======================================================================
     Fiche (dl terme / définition), tableaux, prix, listes de contrôle.
     ====================================================================== */
  .fiche { display: grid; border-top: var(--filet); max-width: none; }
  .fiche > div { display: grid; gap: .3rem; padding-block: 1.1rem; border-bottom: var(--filet); }
  @media (min-width: 720px) { .fiche > div { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--esp-l); align-items: baseline; } }
  .fiche dt { font: italic 1.1rem / 1.3 var(--serif); color: var(--argile); }
  .fiche dd { margin: 0; max-width: var(--mesure); }

  .table-wrap { overflow-x: auto; border-radius: var(--rayon-s); }
  table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-petit); }
  table.data :is(th, td) { padding: .85rem 1.25rem .85rem 0; border-bottom: var(--filet); text-align: left; vertical-align: top; }
  table.data th { font: italic 1.05rem / 1.3 var(--serif); color: var(--argile); }
  table.data td:last-child { font-variant-numeric: var(--fvn); }

  .prix { white-space: nowrap; }
  .prix small { font: italic 400 1.02em / 1 var(--serif); color: var(--argile); margin-right: .15em; }
  .tarif-note { margin-top: var(--esp-m); font-size: var(--fs-petit); color: var(--encre-doux); }

  /* Ce que le nettoyage retire : la feuille d'olivier en puce. */
  .retire { display: grid; gap: .4rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); max-width: none; }
  .retire li, .checklist li { position: relative; padding-left: 1.7rem; max-width: none; }
  .retire li::before, .checklist li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 9px; height: 15px; border-radius: 0 100% 0 100%; background: var(--olive); opacity: .75; transform: rotate(28deg); }
  .retire li { padding-block: .7rem; border-bottom: var(--filet); }
  .checklist { display: grid; gap: .55rem; }
  .checklist--serree { gap: .35rem; font-size: var(--fs-petit); }

  /* ======================================================================
     Duo : une baie et son texte, côte à côte (jamais l'un sur l'autre).
     ====================================================================== */
  .duo { display: grid; gap: var(--section-y-s); }
  .duo__item { display: grid; gap: var(--esp-l); align-items: center; }
  .duo__media { position: relative; overflow: hidden; height: clamp(320px, 62svh, 620px); border-radius: var(--cintre); background: var(--sable); box-shadow: var(--ombre-baie); }
  .duo__item:nth-child(even) .duo__media { border-radius: var(--anse); }
  .duo__media img { width: 100%; height: 100%; object-fit: cover; }
  .duo__media picture { position: absolute; inset: -6% 0; }
  .duo__body { display: flex; flex-direction: column; gap: var(--esp-s); }
  .duo__body h3 { font-size: var(--fs-h3); }
  .duo__body p { max-width: var(--mesure); }
  :is(.duo__kicker, .duo__taille) { font: italic 1.15rem / 1.3 var(--serif); color: var(--argile); margin: 0; }
  .duo__accroche { font-weight: var(--fw-appui); }
  .duo__duree { margin-top: var(--esp-xs); padding-top: var(--esp-s); border-top: var(--filet); font-size: var(--fs-petit); color: var(--encre-doux); }
  .duo__lien { margin-top: var(--esp-xs); }
  @media (min-width: 900px) {
    .duo__item { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); column-gap: clamp(3rem, 7vw, 8rem); }
    .duo__item:nth-child(even) .duo__media { order: 2; }
  }

  /* ======================================================================
     Nuancier (pages nautisme) : une rangée de baies de matière, le nom posé
     SOUS l'image en encre (le blanc sur jute clair était illisible).
     ====================================================================== */
  .persienne { display: flex; gap: clamp(16px, 2.2vw, 32px); overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem var(--marge) 1.5rem; scrollbar-width: none; overscroll-behavior-x: contain; }
  .persienne::-webkit-scrollbar { display: none; }
  .lame { position: relative; flex: 0 0 clamp(200px, 19vw, 280px); display: flex; flex-direction: column; gap: .9rem; scroll-snap-align: start; text-align: left; color: var(--encre); }
  .lame picture { position: relative; display: block; height: clamp(260px, 42svh, 400px); overflow: hidden; border-radius: var(--cintre); background: var(--sable); box-shadow: var(--ombre-douce); }
  .lame:nth-child(even) picture { border-radius: var(--anse); }
  .lame img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.8s var(--doux); }
  .lame:is(:hover, :focus-visible) img { scale: 1.05; }
  .lame__nom { display: flex; flex-direction: column; gap: .2rem; font: 400 1.6rem / 1.15 var(--serif); }
  .lame__nom small { font: 450 .9rem / 1.3 var(--sans); color: var(--argile); }
  .lame__fiche { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; font-size: var(--fs-petit); color: var(--encre-doux); }
  .lame__fiche .lame__nom { display: none; }
  .lame__dt { font-style: italic; font-family: var(--serif); color: var(--argile); }

  /* ======================================================================
     Crédit d'impôt : le 50 % en Jost léger d'argile, le texte, et le logo
     Urssaf dans son cartouche d'encre (blanc sur chaux, il était invisible).
     ====================================================================== */
  .logo-sap { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: var(--rayon-s); background: var(--encre); line-height: 0; }
  .logo-sap img { width: 168px; height: auto; }
  .credit { display: grid; gap: var(--esp-l); align-items: start; padding: clamp(1.75rem, 4vw, 3.25rem); border-radius: var(--rayon); background: var(--enduit); }
  @media (min-width: 900px) { .credit { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); } }
  .credit__chiffre { font: 300 clamp(3rem, 2rem + 3vw, 4.6rem) / 1 var(--sans); color: var(--argile); }
  .credit__chiffre .u-num { font-weight: inherit; }
  .credit__mention { margin-top: .8rem; font: 400 var(--fs-h4) / 1.2 var(--serif); max-width: none; }
  .credit__sous { margin-top: .4rem; font-size: var(--fs-petit); color: var(--encre-doux); max-width: 30ch; }
  .credit .logo-sap { margin-top: var(--esp-m); }
  .credit__corps > * + * { margin-top: var(--esp-s); }
  .credit__titre { font: 400 var(--fs-h3) / 1.12 var(--serif); max-width: 18ch; }
  .credit__titre em { font-style: italic; color: var(--argile); }
  .credit__points { display: grid; gap: .4rem; }
  .credit__points li { position: relative; padding-left: 1.6rem; font-size: var(--fs-petit); max-width: none; }
  .credit__points li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 8px; height: 13px; border-radius: 0 100% 0 100%; background: var(--olive); opacity: .75; transform: rotate(28deg); }
  .credit__legal small { font-size: var(--fs-mini); color: var(--encre-doux); }
  .credit-ligne { display: flex; align-items: baseline; gap: var(--esp-s); padding: 1rem 1.4rem; border-radius: var(--rayon-s); background: var(--enduit); font-size: var(--fs-petit); color: var(--encre-doux); max-width: 46rem; }
  .credit-ligne__taux { flex: none; font: 300 1.5rem / 1 var(--sans); color: var(--argile); }

  /* ======================================================================
     Appel final : une baie à gauche, le texte à droite, la persienne glisse.
     ====================================================================== */
  .appel { position: relative; overflow: hidden; isolation: isolate; padding: var(--section-y) var(--marge); background: radial-gradient(60% 70% at 85% 20%, rgba(255, 244, 224, .9), transparent 70%), #F1E6D6; }
  .appel__grille { position: relative; z-index: 1; display: grid; gap: clamp(2.5rem, 8vw, 8.5rem); align-items: center; }
  .appel__texte { min-width: 0; }
  .arche--appel { height: min(78svh, 740px); box-shadow: var(--ombre-baie); }
  .arche--appel picture { inset: -6% 0; }
  .appel__titre { max-width: 14em; }
  .appel__chapo { max-width: 30em; margin: 1.6rem 0 2.4rem; font-size: 1.08rem; color: var(--encre-doux); }
  .appel__actions { gap: 16px 22px; }
  .appel__actions .btn--contour .u-num { font-size: 1.08rem; letter-spacing: .03em; }
  .appel__horaires { margin-top: 1.6rem; font: italic 1.15rem / 1.4 var(--serif); color: var(--encre-doux); }
  @media (min-width: 900px) { .appel__grille { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); } }
  @media (max-width: 899px) {
    .arche--appel { width: 88%; height: clamp(320px, 112vw, 540px); margin-inline: auto; }
    .appel__actions { flex-direction: column; align-items: stretch; }
    .appel__actions .btn { width: 100%; }
  }

  /* ======================================================================
     Pied de page : fond de lin, le rameau, cinq colonnes, la signature.
     ====================================================================== */
  .pied { position: relative; overflow: hidden; isolation: isolate; padding: clamp(4.5rem, 10vh, 7.5rem) var(--marge) 2rem; background: var(--lin); color: var(--encre); }
  .rameau--pied { width: min(40vw, 480px); height: min(40vw, 480px); right: -5%; top: -6%; transform: scaleX(-1) rotate(10deg); }
  .pied__haut { position: relative; z-index: 1; display: grid; gap: 2.5rem 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied__marque { grid-column: 1 / -1; }
  .pied__marque img { width: 84px; height: 84px; }
  .pied__nom { margin-top: 1rem; font: 600 1.3rem / 1 var(--serif); }
  .pied__nom small { display: block; margin-top: 5px; font: italic 500 .98rem / 1 var(--serif); color: var(--encre-doux); }
  .pied__marque > p:not(.pied__nom, .pied__avis) { max-width: 24em; margin-top: 1rem; font-size: .93rem; color: var(--encre-doux); }
  .pied__avis { margin-top: 1rem; }
  .pied__avis a { display: inline-flex; align-items: center; min-height: var(--cible); padding: 0 1.1rem; border-radius: var(--pill); box-shadow: inset 0 0 0 1px var(--contour); font-size: .9rem; }
  .pied__avis a:is(:hover, :focus-visible) { background: var(--chaux-clair); }
  /* Même hauteur pour le titre-sommaire (colonnes repliables) et le titre simple (Contact) : les quatre titres sont alignés. */
  .pied__titre { display: flex; align-items: center; min-height: var(--cible); margin-bottom: .3rem; font: italic 1.28rem / 1.3 var(--serif); color: var(--encre); }
  .pied ul { list-style: none; margin: 0; padding: 0; }
  .pied__col ul { display: grid; }
  .pied__col li { max-width: none; }
  /* Chaque lien du pied est une cible de 44 px ; un filet se trace au survol. */
  /* En bloc en ligne (et non en flex) : « Les 60 communes » garde ses espaces. */
  .pied__col a, .pied__legal a { position: relative; display: inline-block; min-width: var(--cible); padding-block: .75rem; line-height: 1.4; font-size: .92rem; color: var(--encre-doux); transition: color var(--dur-survol) var(--doux); }
  .pied__col a::after, .pied__legal a::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(.7rem - 3px); height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--dur-survol) var(--doux); }
  .pied__col a:is(:hover, :focus-visible), .pied__legal a:is(:hover, :focus-visible) { color: var(--argile); }
  .pied__col a:is(:hover, :focus-visible)::after, .pied__legal a:is(:hover, :focus-visible)::after { transform: scaleX(1); transform-origin: left; }
  /* L'adresse : deux lignes de texte, puis téléphone et e-mail en cibles de
     44 px (ils ne faisaient que 21 px de haut, sous le seuil exigé par l'audit). */
  .pied address { display: grid; justify-items: start; font-style: normal; font-size: .92rem; line-height: 1.75; color: var(--encre-doux); }
  .pied address > span { max-width: none; }
  .pied address > span:nth-of-type(2) { margin-bottom: .2rem; }
  .pied address a.pied__contact { position: relative; display: inline-flex; align-items: center; min-height: var(--cible); min-width: var(--cible); color: var(--encre-doux); transition: color var(--dur-survol) var(--doux); }
  .pied address a.pied__contact::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(50% - .9em); height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--dur-survol) var(--doux); }
  .pied address a.pied__contact:is(:hover, :focus-visible) { color: var(--argile); }
  .pied address a.pied__contact:is(:hover, :focus-visible)::after { transform: scaleX(1); transform-origin: left; }
  /* Les colonnes repliables : sur bureau, le titre n'est qu'un titre (pied.js
     neutralise le clic) ; sur téléphone, c'est une ligne de 44 px à chevron. */
  .pied__pli > summary { display: flex; align-items: center; min-height: var(--cible); cursor: default; }
  .pied__pli > summary::-webkit-details-marker { display: none; }
  .pied__petit { margin-top: .6rem; font-size: .86rem; color: var(--encre-doux); }
  .pied__reseaux { display: flex; flex-wrap: wrap; gap: 0 1.1rem; margin-top: .4rem; }
  .pied__signature { position: relative; z-index: 1; margin-top: clamp(3rem, 9vh, 6rem); text-align: center; font: 500 clamp(3.2rem, 13.5vw, 13rem) / .9 var(--serif); letter-spacing: -.02em; color: rgba(164, 105, 74, .16); white-space: nowrap; max-width: none; }
  .pied__signature em { font-style: italic; color: inherit; }
  .pied__legal { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.4rem; margin-top: 1.4rem; font-size: .82rem; color: var(--encre-doux); }
  /* Ligne légale : chaque lien est une cible de 44 × 44 px au moins
     (« Cookies » faisait 45 × 18), le filet de survol reste sous le texte. */
  /* L'élément de liste reste un bloc (en flex, l'espace entre « © », l'année
     et le nom disparaissait : « ©2026Azur Pro Clean »). */
  .pied__legal li { display: block; line-height: var(--cible); max-width: none; }
  .pied__legal a { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; min-height: var(--cible); min-width: var(--cible); padding-block: 0; line-height: 1.4; font-size: inherit; }
  .pied__legal a::after { bottom: calc(50% - .95em); }
  @media (max-width: 719px) {
    /* Téléphone : trois colonnes repliées en lignes de 44 px, Contact ouvert,
       le pied ne fait plus deux écrans de liens répétés. */
    .pied { padding-top: 3.5rem; }
    .pied__haut { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .pied__marque { margin-bottom: 1.6rem; }
    .pied__avis { display: none; }
    .pied__col:not(:last-child) { border-top: var(--filet); }
    .pied__col:last-child { margin-top: 1.6rem; }
    .pied__pli > summary { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin: 0; cursor: pointer; }
    .pied__pli > summary::after { content: ""; width: 9px; height: 9px; margin-right: 6px; border-right: 1px solid var(--argile); border-bottom: 1px solid var(--argile); transform: translateY(-3px) rotate(45deg); transition: transform .6s var(--doux); }
    .pied__pli[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
    .pied__pli > ul { padding-bottom: .8rem; }
    .pied__col:nth-last-child(2) { border-bottom: var(--filet); }
    .pied__signature { margin-top: 2.5rem; font-size: clamp(2.6rem, 12vw, 3.6rem); }
  }
  @media (min-width: 720px) { .pied__haut { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .pied__haut { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); } .pied__marque { grid-column: auto; } }

  /* ======================================================================
     Formulaires : champs de chaux claire aux angles doux, bordure de pierre,
     focus argile. Choix en tuiles arrondies, dépôt de photos en niche.
     ====================================================================== */
  .form { display: grid; gap: var(--esp-xl); max-width: 46rem; }
  .form fieldset { min-width: 0; display: grid; gap: var(--esp-m); padding: 0; border: 0; }
  .form legend { float: left; width: 100%; padding: 0; margin-bottom: var(--esp-m); }
  .form legend + * { clear: both; }
  .form__aide { margin: 0; font-size: var(--fs-petit); color: var(--encre-doux); }
  .field { display: grid; gap: .5rem; }
  .field > label, .field > .field__titre { font-weight: var(--fw-appui); font-size: .95rem; }
  .aide { font-size: var(--fs-mini); color: var(--encre-doux); max-width: var(--mesure); }
  .field :is(input, textarea, select) { width: 100%; min-height: 52px; padding: 13px 16px; border: 1px solid rgba(166, 140, 104, .55); border-radius: var(--rayon-s); background: var(--chaux-clair); transition: border-color var(--dur-survol) var(--doux), box-shadow var(--dur-survol) var(--doux); }
  .field select { appearance: none; padding-right: 44px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A5236' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
  .field :is(input, textarea, select):hover { border-color: var(--pierre); }
  .field :is(input, textarea, select):focus { outline: none; border-color: var(--argile); box-shadow: 0 0 0 3px rgba(142, 85, 56, .14); }
  .field :is(input, textarea, select):focus-visible { outline: 1.5px solid var(--argile); outline-offset: 2px; }
  .field.is-error :is(input, textarea, select) { border-color: var(--erreur); }
  .field__error { font-size: var(--fs-petit); font-weight: var(--fw-appui); color: var(--erreur); }
  .field__precision { margin-top: .5rem; }
  .field--recherche { max-width: 30rem; }
  .field--consent { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 1rem; padding-top: var(--esp-m); border-top: var(--filet); }
  .field--consent input { width: 22px; height: 22px; min-height: 0; margin-top: 2px; padding: 0; accent-color: var(--argile); cursor: pointer; }
  .field--consent label { font-weight: var(--fw-texte); font-size: var(--fs-petit); line-height: 1.6; }
  .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .choices { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
  .choices--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice { position: relative; display: flex; }
  .choice input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
  .choice label { flex: 1; display: flex; align-items: center; gap: .7rem; min-height: 52px; padding: .7rem 1rem; border: 1px solid rgba(166, 140, 104, .55); border-radius: var(--rayon-s); background: var(--chaux-clair); font-size: .95rem; cursor: pointer; transition: border-color var(--dur-survol) var(--doux), background-color var(--dur-survol) var(--doux); }
  .choice label::before { content: ""; flex: none; width: 18px; height: 18px; border: 1px solid var(--pierre); border-radius: 5px; background: var(--chaux) center / 11px no-repeat; transition: background-color var(--dur-survol) var(--doux), border-color var(--dur-survol) var(--doux); }
  .choice input[type="radio"] + label::before { border-radius: 50%; }
  .choice label:hover { border-color: var(--pierre); }
  .choice input:checked + label { border-color: var(--argile); background: var(--lin); }
  .choice input:checked + label::before { border-color: var(--argile); background-color: var(--argile); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='%23FAF6EE' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  .choice input:focus-visible + label { outline: 1.5px solid var(--argile); outline-offset: 2px; }
  .dropzone { padding: var(--esp-l) var(--esp-m); border: 1px dashed var(--pierre); border-radius: 120px 120px var(--rayon) var(--rayon); background: var(--chaux-clair); text-align: center; color: var(--encre-doux); transition: border-color var(--dur-survol) var(--doux), background-color var(--dur-survol) var(--doux); }
  .dropzone--compact { padding: var(--esp-m); border-radius: 80px 80px var(--rayon) var(--rayon); }
  .dropzone:is(:hover, .is-drag) { border-color: var(--argile); background: var(--lin); }
  .dropzone .icon { width: 28px; height: 28px; margin: 0 auto .5rem; color: var(--argile); }
  .dropzone > p { max-width: none; font-weight: var(--fw-appui); color: var(--encre); }
  .dropzone input[type="file"] { display: block; max-width: 100%; margin: var(--esp-s) auto 0; font-size: var(--fs-petit); }
  .dropzone__previews { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-s); margin-top: var(--esp-m); }
  .dropzone__previews figure { position: relative; margin: 0; }
  .dropzone__previews img { width: 80px; height: 96px; object-fit: cover; border-radius: var(--cintre); }
  .dropzone__remove { position: absolute; top: -10px; right: -10px; width: var(--cible); height: var(--cible); display: grid; place-items: center; border-radius: 50%; background: var(--encre); color: var(--chaux-clair); font-size: 15px; line-height: 1; }
  .progress { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; counter-reset: etape; }
  .progress li { counter-increment: etape; display: grid; justify-items: center; gap: .45rem; max-width: none; font-size: var(--fs-mini); color: var(--encre-doux); text-align: center; }
  .progress li::before { content: counter(etape); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 40px; padding-top: 5px; border: 1px solid var(--pierre); border-radius: 999px 999px 4px 4px; font-family: var(--sans); font-variant-numeric: var(--fvn); color: var(--encre-doux); background: var(--chaux-clair); transition: background-color var(--dur-survol) var(--doux), color var(--dur-survol) var(--doux); }
  .progress li.is-done::before { border-color: var(--argile); color: var(--argile); }
  .progress li.is-current { color: var(--encre); }
  .progress li.is-current::before { border-color: var(--argile); background: var(--argile); color: var(--chaux-clair); }
  .form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; max-width: none; }
  .form__actions .btn { flex: 1 1 auto; min-width: 200px; }
  .notice { padding: 1rem 1.25rem; border-radius: var(--rayon-s); background: rgba(160, 53, 40, .08); font-weight: var(--fw-appui); max-width: none; }
  .notice--error { color: var(--erreur); }
  .articles { display: grid; gap: var(--esp-m); }
  .article { min-width: 0; margin: 0; padding: var(--esp-m) clamp(1rem, 3vw, 1.75rem) var(--esp-l); border: 0; border-radius: var(--rayon); background: var(--enduit); }
  .article__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-s); margin-bottom: var(--esp-m); }
  .article__rang { font: italic 1.25rem / 1.2 var(--serif); color: var(--argile); }
  .article__retirer { display: inline-flex; align-items: center; min-height: var(--cible); padding: 0 1rem; border-radius: var(--pill); box-shadow: inset 0 0 0 1px var(--contour); font-size: var(--fs-petit); color: var(--encre-doux); }
  .article__retirer:hover { color: var(--encre); background: var(--chaux-clair); }
  .article__champs { display: grid; gap: var(--esp-m); }
  .article__champs .field + .field { margin-top: 0; }
  .articles__ajout { margin: var(--esp-m) 0 0; }
  .articles__ajout .lien { width: 100%; }
  .articles__ajout .lien::after { display: none; }
  .dims { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
  .dims__champ { flex: 1 1 8rem; min-width: 0; display: grid; gap: .3rem; }
  .dims__champ label { margin: 0; font-size: var(--fs-petit); color: var(--encre-doux); }
  .dims__saisie { position: relative; }
  .dims__saisie input { width: 100%; padding-right: 2.6rem; }
  .dims__unite { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: var(--fs-petit); color: var(--encre-doux); pointer-events: none; }
  .dims__signe { flex: none; padding-bottom: 1rem; color: var(--encre-doux); line-height: 1; }
  .dims__total { margin: .5rem 0 0; font-size: var(--fs-petit); color: var(--encre-doux); }
  @media (max-width: 479px) { .dims { display: grid; grid-template-columns: 1fr; } .dims__signe { display: none; } .choices--duo { grid-template-columns: 1fr; } }
  .tel { white-space: nowrap; }

  /* Un lien .lien posé au milieu d'une phrase reste un lien de texte (argile,
     demi-gras, filet au survol) : une pilule couperait la ligne. */
  :is(.fiche-local p, .prose p) .lien, .registre__meta .lien--texte {
    display: inline; min-height: 0; padding: 0; border-radius: 0; overflow: visible; isolation: auto; box-shadow: none; white-space: normal;
    font: inherit; font-weight: var(--fw-appui); color: var(--argile);
    background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px; transition: background-size var(--dur-survol) var(--doux);
  }
  :is(.fiche-local p, .prose p) .lien::before, :is(.fiche-local p, .prose p) .lien::after { display: none; }
  :is(.fiche-local p, .prose p) .lien:is(:hover, :focus-visible) { background-position: 0 100%; background-size: 100% 1px; box-shadow: none; }

  /* Filtres : des pilules, l'active pleine. */
  .filters { display: flex; flex-wrap: wrap; gap: 10px; margin-block: var(--bloc-y); }
  .filters button { display: inline-flex; align-items: center; min-height: var(--cible); padding: 0 1.2rem; border-radius: var(--pill); box-shadow: inset 0 0 0 1px var(--contour); font-size: var(--fs-petit); color: var(--encre-doux); transition: background-color var(--dur-survol) var(--doux), color var(--dur-survol) var(--doux); }
  .filters button:hover { background: var(--lin); color: var(--encre); }
  .filters button[aria-pressed="true"] { background: var(--encre); color: var(--chaux-clair); box-shadow: none; }

  /* Classes historiques encore posées par quelques gabarits. */
  .btn__circle { display: none; }
  .btn--cta, .constat { }
  .aide--avant { margin: 0 0 .4rem; }
  .choices__zone { margin: var(--esp-s) 0 .3rem; font: italic 1.08rem / 1.3 var(--serif); color: var(--argile); }
  .credit__taux { min-width: 0; }
  .credit__logos { display: block; }
  .is-current, .is-actif { }

  /* Constat d'intervention : page privée, pensée pour l'impression. */
  .constat__rapport { display: grid; gap: var(--esp-l); max-width: var(--mesure); }
  .constat__bloc { padding: var(--esp-m) var(--esp-l); border-radius: var(--rayon); background: var(--chaux-clair); }
  .constat__bloc h2 { margin: 0 0 .5rem; font: italic 1.2rem / 1.3 var(--serif); color: var(--argile); }
  .constat__bloc p + p { margin-top: var(--esp-s); }
  .constat__reserves { max-width: var(--mesure); padding: var(--esp-m) var(--esp-l); border-radius: var(--rayon); background: var(--enduit); }
  .constat__reserves h2 { margin: 0 0 var(--esp-s); font-size: var(--fs-h3); }
  .constat__reserves p + p { margin-top: var(--esp-s); }
  .constat__photos { display: grid; gap: var(--gouttiere); }
  @media (min-width: 700px) { .constat__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .constat__photos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .constat__photos figure { margin: 0; }
  .constat__photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon-s); }
  .constat__photos figcaption { margin-top: .5rem; font-size: var(--fs-petit); color: var(--encre-doux); }
  .constat__signature { max-width: none; }
  .constat__impression { margin-top: var(--esp-s); font-size: var(--fs-petit); color: var(--encre-doux); max-width: none; }

  /* ======================================================================
     Héros des pages intérieures : les textes. La mise en page (grille,
     baie) est dans core.css ; ici, les éléments communs du bloc de texte.
     ====================================================================== */
  :is(.fiche-hero__intro, .zn-hero__texte, .pro-hero__texte, .edito-hero__intro, .hero-naut__bas, .fm-hero__panneau) > * + * { margin-block-start: var(--esp-m); }
  :is(.fiche-hero, .zn-hero, .pro-hero, .edito-hero, .hero-naut, .fm-hero) :is(.lead, [class$="__chapo"], [class$="__lead"]) { font-size: var(--fs-lead); line-height: 1.65; color: var(--encre-doux); max-width: 32em; }
  :is(.fiche-hero__delai, .pro-hero__delai, .fm-hero__delai) { font: italic 1.15rem / 1.35 var(--serif); color: var(--encre-doux); }
  /* Le persienne et le rameau des héros intérieurs, posés en CSS. */
  :is(.fiche-hero, .zn-hero, .pro-hero, .edito-hero, .hero-naut, .fm-hero)::before { content: ""; position: absolute; z-index: -1; inset: -10% -14% 20% 30%; pointer-events: none; background: var(--persienne); filter: blur(7px); transform: skewX(-10deg); -webkit-mask-image: radial-gradient(50% 55% at 70% 34%, #000, transparent 78%); mask-image: radial-gradient(50% 55% at 70% 34%, #000, transparent 78%); }
}

@layer utilities {
  @media (max-width: 599px) {
    .fiche > div { grid-template-columns: 1fr; gap: 4px; }
    table.data { font-size: var(--fs-mini); }
    table.data :is(th, td) { padding: .7rem .6rem .7rem 0; }
    .form__actions .btn { width: 100%; }
  }
}

@media print {
  @page { size: A4; margin: 12mm 10mm; }
  html, body { background: #fff !important; }
  body { font-size: 10.5pt; line-height: 1.5; }
  body::after, .entete, .menu, .filters, .skip-link, .rameau, .ombre-persienne, .arche__ombre { display: none !important; }
  main { padding-top: 0; }
  .section { padding-block: 10mm; break-inside: avoid; }
  .quote, .registre__ligne, .credit, .constat__bloc { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  .btn, .lien { box-shadow: none !important; border: 1px solid currentColor; background: none !important; color: inherit !important; min-height: 0; padding: 4px 12px; }
  main a[href^="/"]::after { content: " (azurproclean.fr" attr(href) ")"; font-size: .75em; color: #666; }
  main a[href^="tel:"]::after, main a[href^="#"]::after { content: none; }
  .constat__photos { grid-template-columns: 1fr 1fr; }
  .constat__impression { display: none; }
}