/* Fenaison · direction A « Plein champ »
   Un repas au pré en plein jour : une photo dans un cadre de lin, une sans-serif
   élargie couchée comme l’horizon, des cartes arrondies posées comme des assiettes.
   Une seule famille (Mona Sans, variable en largeur et en graisse). */

/* Mona Sans n’a pas l’espace fine insécable (U+202F) : cette micro-fonte locale
   la fournit avec une chasse de 0,14 em. Placée en tête de pile, elle ne sert
   qu’à ces deux caractères (unicode-range) : Chrome et Safari affichent alors
   la même espace, au lieu d’une espace synthétisée ou d’une police de secours. */
@font-face {
  font-family: "Fenaison Fine";
  src: url(data:font/woff2;base64,d09GMgABAAAAAAFQAAoAAAAAAqAAAAEHAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAPAocOAE2AiQDDAsIAAQgBXIHNRsAAgAuBuy24lTsraG4FD+llwqC8dD/vXnnzaQWCn0MlaqxBQ0mQLF4jlfhCO1ZwqRb6fTVbddgyYZsCdIN7cLQg+zisXnogKUl70t9AvB+6+T4AHiEkwVEAWeJtbWA2iLJbczpFCUIGqdoi4z5uDGmkM/BYQm6qa4c9ovk0BsAoAMNiVUpsKqsY1wJrYv1PX78/y8AkGAcgcIYoEBAzYzN1Y6bgEBwcpQ6XuDJzBd4er07Q6wRowapgWCaRHzZsRMjAQDIar8L3CKQSoAGAIByIECYQ4BmwpwUNSWsWc1+M29jAKqF8862Fkl9QjogZYKjasAQDLB8h3oyOSfRIsdOOeMW96cJAAAA) format("woff2");
  unicode-range: U+2009, U+202F;
  font-display: block;
}

/* Progression liée au défilement (0 → 1). Valeur initiale 1 : sans animation,
   tout est dans son état final. */
@property --v { syntax: "<number>"; inherits: true; initial-value: 1; }

:root {
  --lin: #F4F5EF;
  --pre: #E2EBDD;
  --encre: #17302A;
  --encre-douce: #4A5D55;
  --regain: #2B6A50;
  --regain-profond: #1E4D3A;
  --regain-clair: #8FD3B1;
  --loire: #4F8097;
  --porcelaine: #FFFFFF;

  --police: "Fenaison Fine", "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ombre: 0 24px 50px -28px rgba(23, 48, 42, .35);
  --ombre-nette: 0 30px 44px -24px rgba(23, 48, 42, .46);

  --hdr: 76px;
  --gut: 64px;
  --max: 1312px;
  --sec: 140px;
  --marge-bloc: 16px;
  --cont: min(var(--max), calc(100% - 2 * var(--gut)));
  color-scheme: light;
}
@media (max-width: 1199px) { :root { --gut: 40px; } }
@media (max-width: 899px)  { :root { --gut: 32px; --sec: 112px; } }
@media (max-width: 759px)  { :root { --gut: 20px; --hdr: 64px; --sec: 88px; --marge-bloc: 10px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Largeur de Mona Sans : font-stretch, doublé par l’axe wdth. Le rendu ne
   dépend pas de la prise en charge de font-stretch sur les polices variables
   (Safari compris) : chaque règle qui élargit pose aussi --w, hérité. */
:root { --w: 100; }
*, *::before, *::after { font-variation-settings: "wdth" var(--w); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 16px); }
body {
  margin: 0;
  background: var(--lin);
  color: var(--encre);
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  font-stretch: 100%; --w: 100;
  font-kerning: normal;
  font-variant-numeric: lining-nums;
}
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico { width: 20px; height: 20px; flex: none; }
.cont { width: var(--cont); margin-inline: auto; }
.bloc-in { padding-inline: max(calc(var(--gut) - var(--marge-bloc)), calc((100% - var(--max)) / 2)); }

:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
.sombre :focus-visible { outline-color: var(--regain-clair); }

.evitement {
  position: absolute; left: 16px; top: -90px; z-index: 100;
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px;
  background: var(--encre); color: var(--lin); border-radius: 999px; font-weight: 560;
}
.evitement:focus { top: 14px; }

/* ---------- Typographie ---------- */
.titre {
  font-stretch: 116%; --w: 116;
  font-weight: 480;
  letter-spacing: -.022em;
  line-height: 1.04;
  text-wrap: balance;
}
h1.titre {
  font-weight: 470;
  line-height: 1;
  font-size: clamp(40px, 5.6vw, 84px);
  /* Sur un écran bas, le titre rapetisse pour rester dans le tiers haut du cadre. */
  font-size: clamp(40px, min(5.6vw, 15.7svh - 61px), 84px);
}
h2.titre { font-size: clamp(30px, 3.4vw, 48px); }
.texte-lead { font-size: 18px; line-height: 1.55; text-wrap: pretty; }
p { text-wrap: pretty; }
.insec { white-space: nowrap; }
.surtitre { font-size: 13.5px; font-weight: 560; letter-spacing: .004em; line-height: 1.35; }
/* Chiffres proportionnels partout : les chiffres tabulaires de Mona Sans ont un
   zéro barré et un 1 à empattement qui donnent un air de machine à écrire
   (« 9,5ø € »). Aucun prix n’est aligné en colonne, rien n’est perdu. */
.prix, .num { font-variant-numeric: proportional-nums lining-nums; }

/* ---------- Boutons et liens ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  font-size: 16px; font-weight: 560; line-height: 1.15; white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.btn-plein { background: var(--regain); color: #fff; }
.btn-plein:hover { background: var(--regain-profond); }
.btn-voile { background: rgb(244 245 239 / .92); color: var(--encre); }
.btn-voile:hover { background: #fff; }
.btn-lin { background: var(--lin); color: var(--encre); }
.btn-lin:hover { background: #fff; }

.lien {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--regain); font-weight: 560;
  text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 1.5px; text-underline-offset: 4px;
  transition: text-decoration-color .25s var(--ease);
}
.lien:hover { text-decoration-color: currentColor; }
.lien .ico { transition: transform .4s var(--ease); }
.lien:hover .ico { transform: translateX(3px); }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 50; background: var(--lin); }
.entete-in {
  height: var(--hdr);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding: 0 max(var(--gut), 24px);
}
.marque {
  justify-self: start; display: inline-flex; align-items: center; min-height: 44px;
  font-stretch: 118%; --w: 118; font-weight: 620; font-size: 22px; letter-spacing: -.01em; line-height: 1;
}
.nav ul { display: flex; gap: 6px; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  border-radius: 999px; font-size: 15px; font-weight: 520;
  transition: background-color .25s var(--ease);
}
.nav a:hover { background: var(--pre); }
.nav a[aria-current="page"] { background: var(--pre); color: var(--regain-profond); font-weight: 600; }
.entete-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.txt-court { display: none; }
.menu-btn { display: none; }
.menu[hidden] { display: none; }

@media (max-width: 899px) {
  .nav { display: none; }
  .entete-in { grid-template-columns: 1fr auto; }
  .menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; padding: 0; border: 0; border-radius: 999px;
    background: var(--pre); cursor: pointer;
  }
  .menu-traits { position: relative; width: 18px; height: 10px; }
  .menu-traits span {
    position: absolute; left: 0; width: 18px; height: 2px; border-radius: 2px; background: var(--encre);
    transition: transform .35s var(--ease), top .35s var(--ease);
  }
  .menu-traits span:first-child { top: 0; }
  .menu-traits span:last-child { top: 8px; }
  .menu-ouvert .menu-traits span:first-child { top: 4px; transform: rotate(45deg); }
  .menu-ouvert .menu-traits span:last-child { top: 4px; transform: rotate(-45deg); }

  .menu {
    position: fixed; left: 0; right: 0; top: var(--hdr); bottom: 0; z-index: 49;
    display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
    padding: 16px max(var(--gut), 24px) calc(32px + var(--av-dock-h, 0px)); background: var(--lin); overflow: auto;
  }
  .menu-liste li { border-radius: 18px; }
  .menu-liste a {
    display: flex; align-items: center; min-height: 64px;
    font-stretch: 116%; --w: 116; font-size: 32px; font-weight: 480; letter-spacing: -.02em; line-height: 1.05;
  }
  .menu-liste a[aria-current="page"] { color: var(--regain); }
  .menu-tel { font-size: 15px; color: var(--encre-douce); }
  .menu-tel a { display: inline-flex; align-items: center; min-height: 44px; color: var(--regain); font-weight: 600; font-size: 18px; font-variant-numeric: proportional-nums lining-nums; }
  .menu-ouvert .av-demo-badge { visibility: hidden; }
  html.menu-ouvert { overflow: hidden; }
}
@media (max-width: 759px) {
  .entete-devis { min-height: 44px; padding: 0 18px; font-size: 15px; }
  .entete-devis .txt-long { display: none; }
  .entete-devis .txt-court { display: inline; }
  .menu-btn { width: 44px; height: 44px; }
  .marque { font-size: 21px; }
}

/* ---------- Ouverture : hero + aiguillage (mise en page de base, dans le flux) ---------- */
.ouverture { position: relative; }
.scene { position: relative; }
.hero { position: relative; height: calc(100svh - var(--hdr)); min-height: 600px; }
.cadre {
  position: absolute; inset: 0 16px 16px;
  clip-path: inset(0 round 28px);
  background: #CDD3C7;
  overflow: hidden;
}
.cadre-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%;
  transform-origin: 50% 50%;
}
.voile {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(244 245 239 / .94) 0%, rgb(244 245 239 / .88) 35%, rgb(244 245 239 / .68) 44%, rgb(244 245 239 / .18) 58%, rgb(244 245 239 / 0) 70%);
}
.hero-texte {
  position: absolute; z-index: 2;
  left: calc(max(var(--gut), 56px) - 16px); right: calc(max(var(--gut), 56px) - 16px);
  top: clamp(36px, 7svh, 60px);
}
.hero-texte .surtitre { margin-bottom: 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.chapo {
  position: absolute; z-index: 2; left: 40px; bottom: 40px; width: 440px;
  background: var(--lin); border-radius: 22px; padding: 24px 24px 24px;
  font-size: 16px; line-height: 1.55;
}
.reperes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.reperes li {
  background: var(--pre); border-radius: 999px; padding: 7px 12px;
  font-size: 13px; font-weight: 560; line-height: 1.3;
}
/* Dans les modes animés, la carte est posée dans le cadre : elle s’efface avec lui. */
.cadre > .chapo { left: 24px; bottom: 24px; }
/* La barre Avolia est fixée en bas à gauche de l’écran : la carte du chapô
   passe alors en bas à droite du cadre, où elle ne croise que la photo. */
.dock-gauche .chapo { left: auto; right: 40px; }
.dock-gauche .cadre > .chapo { left: auto; right: 24px; }
/* Écran bas : la carte s’élargit pour garder la place du titre. */
@media (min-width: 760px) and (max-height: 860px) {
  .chapo { width: 540px; }
}

.plan { width: var(--cont); margin-inline: auto; padding-top: clamp(64px, 8vw, 112px); }
.aig-titre { margin-bottom: 40px; }
.bande-cible { display: none; }
.cartes { display: grid; grid-template-columns: 36fr 36fr 24fr; gap: 24px; align-items: start; }

/* ---------- Cartes de l’aiguillage ---------- */
.carte { position: relative; isolation: isolate; --o: 1; transform-origin: 50% 40%; }
.carte-in {
  position: relative; height: 100%;
  background: var(--porcelaine); border-radius: 24px;
  transition: transform .45s var(--ease);
}
.carte-in::before, .carte-in::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
}
.carte-in::after { box-shadow: var(--ombre); opacity: var(--o); }
.carte-in::before { box-shadow: var(--ombre-nette); opacity: 0; transition: opacity .45s var(--ease); }
.carte:hover .carte-in { transform: translateY(-4px); }
.carte:hover .carte-in::before { opacity: 1; }
.carte-photo {
  flex: none; width: 100%; aspect-ratio: 16 / 9; max-height: var(--ph-max, none);
  overflow: hidden; border-radius: 24px 24px 0 0; background: #D6DACE;
}
.carte-photo img { width: 100%; height: 100%; object-fit: cover; }
.carte-mariages .carte-photo img { object-position: 50% 55%; }
.carte-entreprises .carte-photo img { object-position: 50% 60%; }
.carte-famille .carte-photo img { object-position: 50% 55%; }
.carte-corps { padding: 22px 24px 18px; display: flex; flex-direction: column; flex: 1; }
.carte-mariages, .carte-entreprises { align-self: stretch; }
.carte-in { display: flex; flex-direction: column; }
.carte h3 { font-stretch: 112%; --w: 112; font-weight: 560; font-size: 24px; letter-spacing: -.012em; line-height: 1.1; margin-bottom: 10px; }
.carte-corps > p { font-size: 16px; line-height: 1.55; }
.carte-pied { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: auto; padding-top: 16px; }
.prix { background: var(--pre); border-radius: 15px; padding: 7px 13px; font-size: 13.5px; font-weight: 560; line-height: 1.3; text-wrap: balance; }
.lien-carte { font-size: 15.5px; }
.lien-carte::after { content: ""; position: absolute; inset: 0; border-radius: 24px; }
.carte-famille .carte-in { background: var(--pre); }
.carte-famille .prix { background: var(--lin); }
.carte-famille h3 { font-size: 22px; }
.carte-famille .carte-corps > p { font-size: 14.5px; line-height: 1.5; }

/* ---------- Scène collante (modes posés par script.js) ---------- */
.scene-complet .scene,
.scene-reduit .scene,
.scene-mobile .scene {
  position: sticky; top: var(--hdr);
  height: calc(100svh - var(--hdr));
  /* Rogné en largeur seulement : rien ne déborde à 360 px, et l’ombre des
     cartes posées n’est pas coupée par le bas de la scène. */
  overflow-x: clip;
}
.scene-complet .ouverture { height: 250svh; }
.scene-reduit .ouverture { height: 170svh; }
.scene-mobile .ouverture { height: 170svh; }
.scene-complet .hero,
.scene-reduit .hero,
.scene-mobile .hero { position: absolute; inset: 0; height: auto; min-height: 0; }
.scene-complet .cadre-img,
.scene-reduit .cadre-img,
.scene-mobile .cadre-img { will-change: transform; }

.scene-complet .plan,
.scene-reduit .plan,
.scene-mobile .plan {
  position: absolute; inset: 0; width: auto; margin: 0; padding: 0;
  display: flex; flex-direction: column; pointer-events: none;
}
.scene-complet .plan > *,
.scene-reduit .plan > * { width: var(--cont); margin-inline: auto; flex: none; }

/* Complet : titre, bande de la tablée et trois cartes, centrés dans la scène. */
.scene-complet .plan {
  justify-content: center; padding: 40px 0 var(--res, 20px);
  --B: clamp(160px, calc((100svh - var(--hdr)) * .36 - 66px), 280px);
}
.scene-complet .aig-titre { margin-bottom: 14px; }
.scene-complet .bande-cible { display: block; height: var(--B); }
/* Le conteneur des cartes occupe déjà sa place finale pendant le hero : il ne
   doit pas intercepter les clics sur les boutons du hero. Seules les cartes,
   qui montent depuis le bas de l’écran, sont cliquables. */
.scene-complet .cartes { margin-top: -70px; pointer-events: none; position: relative; z-index: 2; grid-template-columns: 36fr 36fr 24fr; }
.scene-complet .carte { will-change: transform; pointer-events: auto; }

/* Réduit (tablette, portable bas) : titre et bande, les cartes suivent dans le flux. */
.scene-reduit .plan { padding-top: 32px; }
.scene-reduit .aig-titre { margin-bottom: 16px; }
.scene-reduit .bande-cible { display: block; width: auto; margin-inline: 16px; height: 30svh; }

/* Mobile : la bande se forme en haut, le chapô monte dessous. */
.scene-mobile .plan { padding: 10px 10px 0; }
.scene-mobile .bande-cible { display: block; height: 30svh; }

.suite { position: relative; z-index: 3; }
.scene-reduit .suite,
.scene-mobile .suite { margin-top: calc(-1 * var(--remonte, 0px)); }
/* Mobile : le bas du cadre suit le chapô à 40 px. Si un lancer très rapide
   devance d’une image le rendu du cadre, le fond de lin de la suite passe
   devant la photo au lieu de poser le texte dessus. */
.scene-mobile .suite { background: var(--lin); }
.suite > .cartes,
.suite > .chapo,
.suite > .aig-titre { width: var(--cont); margin-inline: auto; }

/* ---------- Engagements ---------- */
.engagements { padding-top: clamp(64px, 8vw, 112px); }
.engagements-liste {
  width: var(--cont); margin-inline: auto;
  display: flex; justify-content: space-between; align-items: center; gap: 14px 28px;
  background: var(--pre); border-radius: 999px; padding: 22px 40px;
  font-size: 16px; font-weight: 540; line-height: 1.35;
}
.engagements-liste li { display: flex; align-items: center; gap: 12px; text-wrap: balance; }
.engagements-liste li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--regain); }

/* ---------- Produits ---------- */
.produits { padding-top: var(--sec); }
.produits-in {
  margin-inline: var(--marge-bloc); border-radius: 32px; background: var(--pre);
  padding-block: 120px;
  padding-inline: max(calc(var(--gut) - var(--marge-bloc)), calc((100% - var(--max)) / 2));
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center;
  overflow-x: clip; /* les étiquettes arrivent de la droite sans déborder */
}
.produits-photo {
  grid-column: 1 / 6; position: relative; aspect-ratio: 4 / 5;
  border-radius: 28px; overflow: hidden; background: #D6DACE;
}
.produits-photo img {
  position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover;
  transform: translate3d(0, calc((var(--v) - .5) * 10%), 0);
}
.produits-texte { grid-column: 7 / 13; }
.produits-texte .texte-lead { margin-top: 28px; max-width: 60ch; }
.etiquettes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.etiquette { background: var(--lin); border-radius: 18px; padding: 20px 22px 22px; box-shadow: var(--ombre); }
.etiquette h3 { font-stretch: 116%; --w: 116; font-weight: 560; font-size: 19px; letter-spacing: -.012em; line-height: 1.15; margin-bottom: 8px; }
.etiquette p { font-size: 15px; line-height: 1.5; color: var(--encre-douce); }

/* ---------- Déroulé ---------- */
.deroule { padding-top: var(--sec); }
.etapes-zone {
  position: relative; margin-top: 56px;
  --f: clamp(0, (var(--v) - .03) / .93, 1);
}
.fil {
  position: absolute; top: 25px; left: 26px; right: calc((100% - 72px) / 4 - 26px);
  height: 2px; border-radius: 2px; background: var(--pre);
}
.fil-trait {
  position: absolute; inset: 0; border-radius: inherit; background: var(--regain);
  transform-origin: 0 50%; transform: scaleX(var(--f));
}
.etapes { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.etape { --on: clamp(0, (var(--f) - var(--i) / 3) * 20 + 1, 1); }
.etape-num {
  position: relative; display: grid; width: 52px; height: 52px; margin-bottom: 24px;
  font-stretch: 116%; --w: 116; font-weight: 560; font-size: 18px; font-variant-numeric: proportional-nums lining-nums;
}
.etape-num .n {
  grid-area: 1 / 1; display: grid; place-items: center; border-radius: 50%;
  background: var(--pre); color: var(--encre);
}
.etape-num .n-on {
  background: var(--regain); color: #fff;
  opacity: var(--on); transform: scale(calc(.72 + .28 * var(--on)));
}
.etape h3 { font-stretch: 112%; --w: 112; font-weight: 560; font-size: 21px; letter-spacing: -.012em; line-height: 1.15; margin-bottom: 10px; }
.etape p { font-size: 16px; line-height: 1.55; color: var(--encre-douce); max-width: 34ch; }

.dressage { position: relative; margin-top: 88px; }
.dressage-cadre {
  aspect-ratio: 3 / 2; max-height: calc(100svh - var(--hdr) - 48px); width: 100%;
  overflow: hidden; background: #D6DACE;
  clip-path: inset(calc((1 - var(--v)) * 8%) calc((1 - var(--v)) * 6%) round 28px);
}
.dressage-cadre img { width: 100%; height: 100%; object-fit: cover; }
.dressage-legende {
  position: absolute; left: 24px; bottom: 24px; max-width: calc(100% - 48px);
  background: var(--lin); border-radius: 999px; padding: 12px 20px;
  font-size: 15px; font-weight: 540; line-height: 1.35;
}

/* ---------- Allergies ---------- */
.allergies { padding-top: var(--sec); }
.allergies-bloc {
  margin-inline: var(--marge-bloc); border-radius: 32px;
  background: var(--regain-profond); color: var(--lin);
  padding-block: 128px;
  transform: scale(calc(.96 + .04 * var(--v)));
}
.allergies-in {
  padding-inline: max(calc(var(--gut) - var(--marge-bloc)), calc((100% - var(--max)) / 2));
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; align-items: start;
}
.allergies h2 { grid-column: 1 / 6; }
.allergies-texte { grid-column: 7 / 13; max-width: 62ch; font-size: 18px; line-height: 1.55; }
.allergies-texte p + p { margin-top: 18px; }
.regimes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.regimes li {
  background: var(--regain-clair); color: var(--encre); border-radius: 999px;
  padding: 9px 16px; font-size: 15px; font-weight: 560; line-height: 1.3;
}

/* ---------- Zone ---------- */
.zone { padding-top: var(--sec); }
.zone-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; align-items: start; }
.zone-texte { grid-column: 1 / 6; }
.zone-texte .texte-lead { margin-top: 28px; }
.note { margin-top: 36px; padding-top: 0; }
.note h3 { font-stretch: 112%; --w: 112; font-weight: 560; font-size: 19px; letter-spacing: -.01em; line-height: 1.2; margin-bottom: 10px; }
.note p { font-size: 16px; color: var(--encre-douce); }
.zone-carte {
  grid-column: 6 / 13; background: var(--pre); border-radius: 28px;
  padding: 20px 24px 28px;
}
.carte-svg { width: 100%; height: auto; overflow: hidden; border-radius: 12px; }
.rayon {
  fill: none; stroke: var(--regain); stroke-width: 1.6;
  transform-box: view-box; transform-origin: 320px 270px;
}
.rayon-30 { stroke-dasharray: 5 6; transform: scale(var(--c30)); }
.rayon-50 { transform: scale(var(--c50)); }
.rayons { --c30: clamp(0, (var(--v) - .4) / .2, 1); --c50: clamp(0, (var(--v) - .48) / .22, 1); }
.rayon-txt {
  font-size: 13px; font-weight: 600; fill: var(--regain);
  paint-order: stroke; stroke: var(--pre); stroke-width: 5px; stroke-linejoin: round;
}
.rayon-txt:first-of-type { opacity: var(--c50); }
.rayon-txt:last-of-type { opacity: var(--c30); }
.riviere {
  fill: none; stroke: var(--loire); stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: calc(var(--len) * (1 - var(--d)));
}
.loire { stroke-width: 4; --d: clamp(0, var(--v) / .34, 1); }
.cher { stroke-width: 2.6; --d: clamp(0, (var(--v) - .16) / .28, 1); }
.riviere-txt { font-size: 13px; font-weight: 520; fill: var(--encre-douce); }
.riviere-txt:first-of-type { opacity: clamp(0, (var(--v) - .2) * 8, 1); }
.riviere-txt:last-of-type { opacity: clamp(0, (var(--v) - .36) * 8, 1); }
.communes-pts circle, .labo, .tours, .communes li {
  --a: clamp(0, (var(--v) - .52 - var(--r) * .028) * 18, 1);
}
.tours { --a: clamp(0, (var(--v) - .3) * 10, 1); }
.communes-pts circle { fill: var(--encre-douce); opacity: var(--a); transform-box: fill-box; transform-origin: center; transform: scale(calc(.4 + .6 * var(--a))); transition: fill .25s; }
.communes-pts circle.vise { fill: var(--regain); transform: scale(1.8); }
.tours, .labo { opacity: var(--a); }
.carte-plan { position: relative; }
.tours-pt { fill: var(--encre); stroke: var(--pre); stroke-width: 3; }
/* Étiquettes en pastilles posées sur la carte : elles masquent les tracés. */
.etiq {
  position: absolute; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: var(--lin); color: var(--encre); border-radius: 999px; padding: 5px 12px;
  font-size: 14px; font-weight: 600; line-height: 1.25;
  box-shadow: 0 6px 16px -10px rgba(23, 48, 42, .45);
  opacity: var(--a);
}
.etiq-tours { left: 48.89%; top: 48.15%; transform: translate(-100%, -100%); --a: clamp(0, (var(--v) - .3) * 10, 1); }
.etiq-labo {
  left: 55.93%; top: 59.26%; flex-direction: column; align-items: flex-start; gap: 0;
  border-radius: 14px; padding: 6px 12px 7px;
  --a: clamp(0, (var(--v) - .52 - 5 * .028) * 18, 1);
}
.etiq-ligne { display: inline-flex; align-items: center; gap: 7px; }
.etiq-pt { width: 8px; height: 8px; border-radius: 50%; background: var(--regain); flex: none; }
.etiq-sous { padding-left: 15px; font-size: 12.5px; font-weight: 500; color: var(--encre-douce); }
.labo-trait { fill: none; stroke: var(--encre-douce); stroke-width: 1.2; }
.labo-pt { fill: var(--regain); stroke: var(--pre); stroke-width: 3; }
.communes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.communes li {
  background: var(--lin); border-radius: 999px; padding: 6px 12px;
  font-size: 13.5px; font-weight: 520; line-height: 1.3;
  opacity: var(--a); transform: translate3d(0, calc((1 - var(--a)) * 8px), 0);
}

/* ---------- Réalisations ---------- */
.realisations { padding-top: var(--sec); }
.tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 40px; }
.tete h2 { max-width: 16ch; }
.real-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.real-carte {
  position: relative; isolation: isolate; height: 100%; min-height: 232px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--pre); border-radius: 24px; padding: 28px 28px 24px;
  transition: transform .45s var(--ease);
}
.real-carte::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  box-shadow: var(--ombre-nette); opacity: 0; transition: opacity .45s var(--ease);
}
.real-carte:hover { transform: translateY(-4px); }
.real-carte:hover::after { opacity: 1; }
.real-lieu { font-stretch: 116%; --w: 116; font-weight: 500; font-size: 28px; letter-spacing: -.02em; line-height: 1.08; text-wrap: balance; }
.real-format { font-size: 15px; color: var(--encre-douce); }
.real-fleche {
  margin-top: auto; align-self: flex-end; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%; background: var(--lin); color: var(--regain);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.real-carte:hover .real-fleche { background: var(--regain); color: #fff; }
.real-fleche .ico { transition: transform .4s var(--ease); }
.real-carte:hover .real-fleche .ico { transform: translateX(2px); }
.mention { margin-top: 24px; font-size: 14px; color: var(--encre-douce); }

/* ---------- Avis ---------- */
.avis { padding-top: var(--sec); }
.avis-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 48px; margin-top: 56px; align-items: start; }
.avis-liste li:nth-child(2) { margin-top: 56px; }
.avis-liste li:nth-child(3) { margin-top: 112px; }
.avis blockquote p { font-stretch: 108%; --w: 108; font-weight: 450; font-size: 23px; line-height: 1.36; letter-spacing: -.012em; }
.avis figcaption { margin-top: 18px; font-size: 15px; color: var(--encre-douce); }
.avis figcaption::before { content: ""; display: block; width: 28px; height: 8px; margin-bottom: 14px; border-radius: 999px; background: var(--pre); }
.avis .mention { margin-top: 48px; }

/* ---------- Appel final ---------- */
.appel { padding-top: var(--sec); }
.appel-bloc {
  margin-inline: var(--marge-bloc); border-radius: 32px;
  background: var(--regain); color: var(--lin); padding-block: 120px;
}
.appel-in {
  padding-inline: max(calc(var(--gut) - var(--marge-bloc)), calc((100% - var(--max)) / 2));
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; align-items: end;
}
.appel h2 { grid-column: 1 / 7; font-size: clamp(44px, 6.4vw, 92px); line-height: .98; }
.appel-corps { grid-column: 7 / 13; }
.appel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 28px; }
.appel-tel {
  display: inline-flex; align-items: center; min-height: 48px;
  color: var(--lin); text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: text-decoration-color .25s;
}
.appel-tel:hover { text-decoration-color: currentColor; }
.appel-tel-in { display: inline; }
.appel-tel-label { font-size: 16px; margin-right: 4px; }
.appel-tel .num { font-stretch: 112%; --w: 112; font-weight: 560; font-size: 22px; letter-spacing: -.005em; }
.horaires { margin-top: 24px; font-size: 15px; line-height: 1.5; }

/* ---------- Pied de page ---------- */
.pied { padding: 72px 0; }
.pied-in { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px 40px; }
.pied-marque { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.pied-marque span { font-size: 15px; color: var(--encre-douce); }
.pied-nav ul { display: flex; flex-wrap: wrap; gap: 0 20px; }
.pied-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; font-size: 15px; font-weight: 520; }
.pied-nav a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.pied-bas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 40px; }
.legal { font-size: 13.5px; line-height: 1.5; color: var(--encre-douce); max-width: 82ch; }
.pied-retour { font-size: 15px; }

/* Badge commun aux démonstrations Avolia (coin bas droit, laissé libre). */
.av-demo-badge {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px;
  border: 1px solid #ffffff36; border-radius: 999px; background: #101013e8; color: #fff;
  font-size: 12.5px; font-weight: 600; font-stretch: 100%; --w: 100; line-height: 1;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.av-demo-badge span { padding-left: 10px; border-left: 1px solid #ffffff3d; color: #d2d2d5; font-weight: 450; }
.av-demo-badge .ico { width: 16px; height: 16px; }

/* ---------- Apparitions : monter et se poser ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-pose] {
    opacity: 0;
    transform: translate3d(0, 40px, 0) scale(1.02);
    transition: opacity .7s var(--ease) var(--d, 0ms), transform .75s var(--ease) var(--d, 0ms);
  }
  .js [data-pose="droite"] { transform: translate3d(48px, 0, 0) scale(1.02); }
  @media (max-width: 759px) { .js [data-pose="droite"] { transform: translate3d(0, 40px, 0) scale(1.02); } }
  .js .suite [data-pose] { transform: translate3d(0, 48px, 0) scale(1.02); }
  .js [data-pose].vu { opacity: 1; transform: none; }
  .js .allergies-bloc [data-pose] { transform: translate3d(0, 28px, 0); }
  .js .allergies-bloc [data-pose].vu { transform: none; }
  .js .appel-bloc[data-pose], .js .encadre[data-pose], .js .appel-photo-cadre[data-pose] { transform: translate3d(0, 48px, 0); }
  .js .encadre[data-pose].vu, .js .appel-photo-cadre[data-pose].vu { transform: none; }
  .js .appel-bloc[data-pose].vu { transform: none; }

  .menu-liste li { transition: opacity .5s var(--ease), transform .6s var(--ease); }
  .menu:not([hidden]) .menu-liste li { opacity: 0; transform: translate3d(0, 16px, 0); }
  .menu-ouvert .menu:not([hidden]) .menu-liste li { opacity: 1; transform: none; }
  .menu-ouvert .menu-liste li:nth-child(2) { transition-delay: 40ms; }
  .menu-ouvert .menu-liste li:nth-child(3) { transition-delay: 80ms; }
  .menu-ouvert .menu-liste li:nth-child(4) { transition-delay: 120ms; }
  .menu-ouvert .menu-liste li:nth-child(5) { transition-delay: 160ms; }
}

/* ---------- Tablette ---------- */
@media (max-width: 1279px) {
  .engagements-liste { display: grid; grid-template-columns: 1fr 1fr; border-radius: 28px; padding: 26px 32px; gap: 16px 32px; }
}
@media (max-width: 1199px) {
  /* Dans le flux (tablette, portable), Fêtes de famille passe en encadré sur toute la largeur. */
  .cartes { grid-template-columns: 1fr 1fr; }
  .carte-famille { grid-column: 1 / -1; }
  .carte-famille .carte-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .carte-famille .carte-photo { aspect-ratio: auto; height: 100%; min-height: 220px; border-radius: 24px 0 0 24px; }
  .scene-complet .carte-famille .carte-in { display: flex; }
  .scene-complet .carte-famille .carte-photo { aspect-ratio: 16 / 9; height: auto; min-height: 0; border-radius: 24px 24px 0 0; }
  .scene-complet .carte-famille { grid-column: auto; }
}
@media (max-width: 1023px) {

  .produits-in { padding-block: 88px; row-gap: 48px; }
  .produits-photo { grid-column: 1 / 7; }
  .produits-texte { grid-column: 7 / 13; }
  .etiquettes { grid-template-columns: 1fr; }

  .etapes { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .fil { display: none; }

  .allergies h2 { grid-column: 1 / -1; max-width: 18ch; }
  .allergies-texte { grid-column: 1 / -1; }

  .zone-texte { grid-column: 1 / -1; max-width: 680px; }
  .zone-carte { grid-column: 1 / -1; }

  .real-liste { grid-template-columns: 1fr; }
  .real-carte { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 24px 24px 24px 28px; }
  .real-lieu { flex: 1 1 100%; }
  .real-format { flex: 1 1 auto; }
  .real-fleche { margin-top: 0; }

  .avis-liste { grid-template-columns: 1fr; gap: 40px; }
  .avis-liste li:nth-child(n) { margin-top: 0; }
  .avis-liste li:nth-child(2) { padding-left: 8%; }
  .avis-liste li:nth-child(3) { padding-left: 16%; }

  .appel h2 { grid-column: 1 / -1; }
  .appel-corps { grid-column: 1 / -1; max-width: 640px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 759px) {
  body { font-size: 16.5px; }
  .hero { height: auto; min-height: 0; }
  .cadre {
    position: relative; inset: auto; margin: 0 10px;
    height: max(560px, calc(100svh - 74px));
    clip-path: inset(0 round 22px);
  }
  .cadre-img { object-position: 50% 50%; }
  .hero-texte { left: 20px; right: 20px; top: 28px; }
  .hero-texte .surtitre { font-size: 12.5px; margin-bottom: 12px; }
  .surtitre .sep { display: none; }
  .surtitre-lieu { display: block; }
  .br-l { display: none; }
  .actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 24px; }
  .chapo { position: static; width: auto; margin: 28px var(--gut) 0; padding: 0; background: none; font-size: 17px; }
  .reperes { margin-top: 18px; }

  .scene-mobile .cadre { position: absolute; inset: 0 10px 10px; height: auto; margin: 0; }
  .suite > .chapo { margin: 0 auto; }
  .suite > .aig-titre { margin-top: 88px; margin-bottom: 32px; }

  .plan { padding-top: 88px; }
  .aig-titre { margin-bottom: 32px; }
  .cartes { grid-template-columns: 1fr; gap: 20px; }
  .carte-famille .carte-in { display: block; }
  .carte-famille .carte-photo { aspect-ratio: 16 / 9; height: auto; min-height: 0; border-radius: 24px 24px 0 0; }
  .carte-corps { padding: 20px 20px 18px; }
  .carte h3 { font-size: 22px; }

  .engagements-liste { grid-template-columns: 1fr; border-radius: 24px; padding: 22px; gap: 14px; font-size: 15.5px; }

  .produits-in { padding-block: 20px 56px; border-radius: 26px; padding-inline: 10px; row-gap: 40px; }
  .produits-photo { grid-column: 1 / -1; border-radius: 20px; }
  .produits-texte { grid-column: 1 / -1; padding-inline: 10px; }
  .produits-texte .texte-lead { margin-top: 20px; }
  .etiquettes { margin-top: 32px; gap: 12px; }

  .etapes-zone { margin-top: 40px; }
  .etapes { grid-template-columns: 1fr; row-gap: 36px; }
  .etape { display: grid; grid-template-columns: 52px 1fr; column-gap: 18px; }
  .etape-num { grid-row: 1 / 3; margin-bottom: 0; }
  .etape h3 { margin-top: 12px; }
  .fil {
    display: block; top: 26px; bottom: 60px; left: 25px; right: auto; width: 2px; height: auto;
  }
  .fil-trait { transform-origin: 50% 0; transform: scaleY(var(--f)); }
  .dressage { margin-top: 56px; }
  .dressage-cadre { aspect-ratio: 4 / 5; }
  .dressage-legende { left: 12px; bottom: 12px; max-width: calc(100% - 24px); border-radius: 18px; padding: 10px 16px; font-size: 14.5px; }

  .allergies-bloc { padding-block: 72px; border-radius: 26px; }
  .allergies-in { padding-inline: 20px; }
  .allergies-texte { font-size: 17px; }

  .zone-carte { padding: 12px 12px 20px; border-radius: 24px; margin-inline: -10px; }
  .communes { padding-inline: 8px; }
  .etiq { font-size: 12.5px; padding: 4px 10px; }
  .etiq-labo { border-radius: 999px; padding: 4px 10px; }
  .etiq-sous { display: none; }
  .rayon-txt { font-size: 19px; }
  .riviere-txt { font-size: 20px; }

  .real-carte { padding: 22px; }
  .real-lieu { font-size: 25px; }
  .avis blockquote p { font-size: 21px; }
  .avis-liste li:nth-child(n) { padding-left: 0; }

  .appel-bloc { padding-block: 72px; border-radius: 26px; }
  .appel-in { padding-inline: 20px; }
  .appel h2 { font-size: 44px; }
  .appel-actions { flex-direction: column; align-items: stretch; }
  .appel-actions .btn { width: 100%; }

  .pied { padding: 56px 0 64px; }
  .pied-in { grid-template-columns: 1fr; }
  .pied-bas { flex-direction: column; align-items: flex-start; }
  .av-demo-badge { right: 10px; bottom: 10px; }
}

/* Très petits écrans : l’étiquette du laboratoire reste dans le panneau de la carte. */
@media (max-width: 399px) {
  .etiq-labo { font-size: 12px; padding: 4px 9px; transform: translateX(-8px); }
}
/* 360 px : le titre garde ses deux lignes (« La saison, servie / à votre table. »)
   au lieu de laisser « servie » seul sur la sienne. */
@media (max-width: 374px) {
  h1.titre { font-size: 38px; }
}

/* Petits écrans en largeur ou en hauteur : la carte du chapô quitte la photo. */
@media (min-width: 760px) and (max-height: 619px) {
  .hero { height: auto; min-height: 0; }
  .cadre { position: relative; inset: auto; margin: 0 16px; height: max(480px, calc(100svh - var(--hdr) - 16px)); }
  .chapo { position: static; width: auto; max-width: 720px; margin: 28px var(--gut) 0; padding: 0; background: none; }
}

/* ---------- Mouvement réduit : tout visible, sans transformation ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; scroll-behavior: auto !important; }
  .produits-photo img { top: 0; height: 100%; transform: none; }
  .allergies-bloc { transform: none; }
  .carte:hover .carte-in, .real-carte:hover { transform: none; }
}

/* Voile du hero limité à la zone du titre, en haut à gauche : il garde le
   contraste du titre sans délaver le reste de la photo (la grange reste
   nette). Sur téléphone, le titre occupe toute la largeur : le voile reste
   horizontal, mais plus court et plus léger. */
@media (min-width: 760px) {
  .voile {
    background: radial-gradient(ellipse 70% 88% at 0% 0%, rgb(244 245 239 / .9) 0%, rgb(244 245 239 / .8) 44%, rgb(244 245 239 / .38) 72%, rgb(244 245 239 / 0) 100%);
  }
}
@media (max-width: 759px) {
  .voile {
    background: linear-gradient(180deg, rgb(244 245 239 / .9) 0%, rgb(244 245 239 / .76) 34%, rgb(244 245 239 / .34) 46%, rgb(244 245 239 / 0) 60%);
  }
}

/* ==================================================================== */
/* Pages intérieures (Mariages, Entreprises, Réalisations, Devis)        */
/* Même vocabulaire que l’accueil : lin, pré clair, cartes de porcelaine */
/* arrondies, pastilles, blocs pleins inscrits avec 16 px de marge.       */
/* ==================================================================== */
.sec { padding-top: var(--sec); }
.sec-tete { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 20px; align-items: end; }
.sec-tete .titre { grid-column: 1 / 8; }
.sec-tete .sec-intro { grid-column: 8 / 13; font-size: 17px; color: var(--encre-douce); max-width: 46ch; }
.sec-tete + * { margin-top: 48px; }
h1.titre-page { font-size: clamp(40px, 5vw, 72px); line-height: 1.02; }
.intro-chapo { font-size: 19px; line-height: 1.5; max-width: 50ch; text-wrap: pretty; }
.surtitre-page { margin-bottom: 18px; color: var(--encre-douce); }

/* Carte de porcelaine générique */
.porcelaine {
  position: relative; background: var(--porcelaine); border-radius: 24px;
  box-shadow: var(--ombre);
}
.pastille {
  display: inline-flex; align-items: center; background: var(--pre); border-radius: 999px;
  padding: 7px 13px; font-size: 13.5px; font-weight: 560; line-height: 1.3;
}
.pastille-lin { background: var(--lin); }

/* Encadré de prix et de conditions */
/* overflow-x: clip : les pièces qui arrivent de la droite ne créent pas de
   défilement horizontal (aucun élément collant à l’intérieur). */
.encadre { margin-inline: var(--marge-bloc); border-radius: 32px; background: var(--pre); overflow-x: clip; }
.encadre-in { padding-inline: max(calc(var(--gut) - var(--marge-bloc)), calc((100% - var(--max)) / 2)); }

/* Questions fréquentes */
.faq-liste { display: grid; gap: 12px; max-width: 920px; }
.faq-liste details { background: var(--pre); border-radius: 22px; }
.faq-liste summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 64px; padding: 16px 20px 16px 26px; border-radius: 22px;
  font-stretch: 108%; --w: 108; font-weight: 560; font-size: 19px; line-height: 1.3; letter-spacing: -.008em;
}
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-plus {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--lin);
  transition: background-color .3s var(--ease);
}
.faq-plus::before, .faq-plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px;
  border-radius: 2px; background: var(--regain); transition: transform .35s var(--ease);
}
.faq-plus::after { transform: rotate(90deg); }
details[open] .faq-plus::after { transform: rotate(0deg); }
.faq-liste summary:hover .faq-plus { background: #fff; }
.faq-rep { padding: 0 26px 24px; max-width: 70ch; font-size: 16.5px; line-height: 1.6; color: var(--encre); }
.faq-rep p + p { margin-top: 10px; }
@media (prefers-reduced-motion: no-preference) {
  details[open] .faq-rep { animation: faq-ouvre .45s var(--ease); }
}
@keyframes faq-ouvre { from { opacity: 0; transform: translate3d(0, -6px, 0); } to { opacity: 1; transform: none; } }

/* Lien vers l’autre page service, en bas de page */
.passerelle { padding-top: 40px; }
.passerelle a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
  font-stretch: 112%; --w: 112; font-weight: 520; font-size: 21px; letter-spacing: -.01em; color: var(--regain);
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 5px;
  transition: text-decoration-color .25s var(--ease);
}
.passerelle a:hover { text-decoration-color: currentColor; }
.passerelle .ico { transition: transform .4s var(--ease); }
.passerelle a:hover .ico { transform: translateX(3px); }

/* Appel de fin de page posé sur une photo (carte de lin, comme le chapô de l’accueil) */
.appel-photo { padding-top: var(--sec); }
.appel-photo-cadre {
  position: relative; margin-inline: var(--marge-bloc); border-radius: 32px; overflow: hidden;
  min-height: 620px; display: flex; align-items: flex-end; justify-content: flex-end;
  background: #CDD3C7;
}
.appel-photo-cadre > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.appel-carte {
  position: relative; z-index: 1; width: min(560px, calc(100% - 48px)); margin: 24px;
  background: var(--lin); border-radius: 24px; padding: 36px 36px 32px;
}
.appel-carte h2 { font-size: clamp(32px, 3.4vw, 48px); }
.appel-carte .texte-lead { margin-top: 16px; }
.appel-carte .actions { margin-top: 24px; align-items: center; }
.appel-carte .lien { font-size: 15.5px; }

@media (max-width: 1023px) {
  .sec-tete .titre, .sec-tete .sec-intro { grid-column: 1 / -1; }
}
@media (max-width: 759px) {
  .sec-tete + * { margin-top: 32px; }
  .intro-chapo { font-size: 17.5px; }
  .faq-liste summary { font-size: 17.5px; padding: 14px 14px 14px 20px; gap: 16px; }
  .faq-rep { padding: 0 20px 20px; font-size: 16px; }
  .passerelle a { font-size: 19px; }
  .appel-photo-cadre { min-height: 0; border-radius: 26px; flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .appel-photo-cadre > img { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 3; }
  .appel-carte { width: auto; margin: 10px; padding: 26px 22px 24px; border-radius: 20px; }
  .appel-carte .actions { align-items: stretch; }
  .appel-carte .lien { justify-content: center; }
}