/* Les pages intérieures (carte, formules, comment ça marche, galerie, devis) et les pages de texte (mentions,
   confidentialité, 404), chargées après site.css et par elles seules. Tout ce qui bouge est en fin de feuille. */

.page .section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.tete + .section, .tete + section { padding-top: clamp(0.5rem, 2vw, 1.5rem); }

/* Menu du téléphone, sans script : quand le focus entre dans la page, le panneau se cache (site.css) et le bouton
   reprend l'icône et le nom d'ouverture, jusqu'au retour du focus dans l'en-tête. */
@media (max-width: 63.99rem) {
  body:has(main :focus-visible, .pied :focus-visible) .menu[open] summary::before { height: 0.8rem; border-block: 2px solid; background: linear-gradient(currentColor 0 0) center / 100% 2px no-repeat; }
  body:has(main :focus-visible, .pied :focus-visible) .menu[open] span:first-child { display: revert; }
  body:has(main :focus-visible, .pied :focus-visible) .menu[open] span + span { display: none; }
}

/* La tête de page : le fil, le sceau, le titre au centre, le chapeau. */
.tete { padding: clamp(1.25rem, 3.5vw, 2.75rem) var(--gouttiere) clamp(2.5rem, 5vw, 4rem); text-align: center; }
.fil { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 0.65rem; margin: 0 0 clamp(0.75rem, 2vw, 1.5rem); padding: 0; list-style: none; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); }
.fil a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--encre); text-decoration-color: var(--filet-fort); }
.fil li + li::before { content: ""; display: inline-block; width: 0.4em; height: 0.4em; margin-right: 0.65rem; border: solid; border-width: 1.5px 1.5px 0 0; rotate: 45deg; vertical-align: 0.12em; }
@media (max-width: 23.4rem) { .fil { gap: 0 0.5rem; letter-spacing: 0.05em; } .fil li + li::before { margin-right: 0.5rem; } }
.tete h1 { max-width: 15em; margin-inline: auto; font-size: clamp(2.1rem, 1.2rem + 3.9vw, 4.75rem); line-height: 1.03; }
.tete h1::before, .devis-page h1::before, .groupe h2::before, .galerie-groupe h2::before { content: ""; display: block; width: 0.5625rem; height: 0.5625rem; margin: 0 auto 1.4rem; background: var(--rouge); }
.tete-chapeau { max-width: 38rem; margin: 1.4rem auto 0; font-family: var(--serif); font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.45; text-wrap: balance; }
.tete-chapeau + .tete-chapeau { margin-top: 0.5rem; }
@media (max-width: 23.4rem) { .page-carte .tete-chapeau { max-width: 19rem; } }

/* Titres à gauche, le sceau en tête (groupes de la carte, formules, questions, galerie, devis). */
.groupe h2, .formule-detail h2, .qr h2, .galerie-groupe h2, .devis-page h1 { max-width: none; margin: 0; text-align: left; }
.groupe h2::before, .formule-detail h2::before, .qr h2::before, .galerie-groupe h2::before, .devis-page h1::before { margin-left: 0; }
.groupe h2, .qr h2 { font-size: clamp(2rem, 1.45rem + 1.7vw, 3rem); }

/* Les liens vers les autres pages, puis l'appel au devis. */
.suite { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 2.5rem; margin: 0; padding: clamp(1rem, 3vw, 2rem) var(--gouttiere) clamp(3rem, 6vw, 5rem); list-style: none; }
.suite .lien-suite { margin: 0; }
.appel { background: var(--creme-profond); text-align: center; }
.appel-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem; }
.appel-horaires { margin-top: 1.1rem; font-size: 0.9375rem; color: var(--gris); }
@media (max-width: 39.99rem) { .appel-actions { flex-direction: column; align-items: stretch; max-width: 24rem; margin-inline: auto; } }

/* La carte : chaque groupe, ses polaroïds d'un côté, sa carte blanche de l'autre. */
.trois { display: grid; gap: 1.5rem; max-width: 66rem; margin: clamp(2rem, 4vw, 3rem) auto 0; padding: 0; list-style: none; }
.trois li { padding-top: 1.25rem; border-top: 1px solid var(--encre); font-family: var(--serif); font-size: 1.25rem; line-height: 1.45; text-wrap: pretty; }
.groupe { padding-block: clamp(1.75rem, 4vw, 3.5rem); overflow-x: clip; }
.groupe h2 { padding-bottom: 1rem; border-bottom: 1px solid var(--encre); }
.groupe-corps { display: grid; gap: 2.5rem; margin-top: clamp(1.75rem, 4vw, 2.75rem); align-items: center; }
.groupe-carte { padding: clamp(1.5rem, 4vw, 2.75rem); border-radius: 1.25rem; background: var(--blanc); }
.groupe-carte .etiquettes { margin: 0; }
.groupe-carte .carte-groupe-precision { margin: 0 0 1.25rem; }
.groupe-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.25rem; margin: 0; padding: 0.9rem 0.25rem 0; list-style: none; }
.groupe-photos li:nth-child(1) { --r: -3deg; }
.groupe-photos li:nth-child(2) { --r: 2deg; margin-top: 1.75rem; }
.groupe-photos li:nth-child(3) { --r: -1.5deg; }
.groupe-photos li:nth-child(4) { --r: 2.5deg; margin-top: 1.75rem; }
.groupe-photos.n1 { grid-template-columns: minmax(0, 15rem); justify-content: center; }
@media screen and (min-width: 48rem) { .groupe-photos.n3 li:nth-child(3) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 0.625rem); margin-top: 0; } }
.sans-photo .etiquettes { display: flex; flex-wrap: wrap; gap: 0.8rem 3rem; }
.sans-photo .groupe-carte { max-width: 36rem; }
.composer h2 { font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.25rem); }
.composer h2::before { content: none; }
@media (max-width: 47.99rem) {
  .groupe-photos.n4 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; gap: 1rem; margin-inline: calc(-1 * var(--gouttiere)); padding: 1.25rem var(--gouttiere) 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gouttiere); scrollbar-width: none; }
  .groupe-photos.n4 li { scroll-snap-align: start; }
  .groupe-photos.n4 li:nth-child(even) { margin-top: 0.75rem; }
}
.legende-carte { padding-block: clamp(1rem, 3vw, 2rem) clamp(1.5rem, 4vw, 3rem); }
.legende-carte .carte-legende { padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--filet-fort); border-radius: 1.25rem; }
@media (min-width: 48rem) { .trois { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }
@media (min-width: 60rem) {
  .groupe-corps { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(3rem, 6vw, 5.5rem); }
  .groupe.inverse .groupe-photos { order: 1; }
  .groupe.inverse .groupe-corps { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .sans-photo .groupe-corps { grid-template-columns: none; }
}

/* Les formules : la photo d'un côté, le texte de l'autre ; le banquet d'abord, et plus grand. */
.sommaire { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; max-width: 46rem; margin: 2rem auto 0; padding: 0; list-style: none; }
.sommaire a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.15rem; border: 1px solid var(--filet-fort); border-radius: 999px; background: var(--blanc); font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.sommaire a:focus-visible { border-color: var(--encre); background: var(--encre); color: var(--creme); }
/* Au téléphone, une seule rangée qui défile du doigt : sa hauteur ne dépend jamais de la police. */
@media (max-width: 47.99rem) { .sommaire { flex-wrap: nowrap; justify-content: flex-start; margin-inline: calc(-1 * var(--gouttiere)); padding: 0.375rem var(--gouttiere); overflow-x: auto; scrollbar-width: none; } .sommaire li { flex: none; } }
@media (hover: hover) and (pointer: fine) { .sommaire a:hover { border-color: var(--encre); background: var(--encre); color: var(--creme); } }
.page .formule-detail { padding-block: clamp(2rem, 5vw, 4rem); }
.formule-detail .contenu { display: grid; gap: 2.25rem; align-items: center; }
.formule-detail figure { margin: 0; rotate: var(--r, -1.5deg); }
.formule-detail.inverse figure { --r: 1.5deg; }
.formule-detail img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); background: var(--creme-profond); box-shadow: var(--ombre); }
.formule-detail h2 { font-size: clamp(2.1rem, 1.5rem + 1.9vw, 3.25rem); }
.principale h2 { font-size: clamp(2.5rem, 1.6rem + 2.8vw, 4.25rem); }
.formule-detail-texte p { max-width: 32rem; margin-top: 0.9rem; color: var(--gris); }
.formule-detail-texte h2 + p { margin-top: 1.4rem; font-size: 1.1875rem; color: var(--encre); }
.formule-detail .lien-suite { margin-top: 1.5rem; text-align: left; }
.page-formules .tete { padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.page-formules .tete h1 { max-width: 22em; font-size: clamp(1.75rem, 1rem + 2.9vw, 3.25rem); }
.page .principale { padding-top: 0.5rem; }
@media (min-width: 56rem) {
  .formule-detail .contenu { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(3rem, 6vw, 6rem); }
  .principale .contenu { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .formule-detail.inverse .contenu { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .formule-detail.inverse figure { order: 1; }
}
.chaque-panneau, .apres .contenu { padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 6vw, 5rem); border-radius: clamp(1.25rem, 2.5vw, 2rem); background: var(--vert); color: var(--vert-doux); }
.apres .contenu { width: auto; max-width: none; margin-inline: max(var(--gouttiere), 50% - 38rem + var(--gouttiere)); }
.chaque h2, .apres h2 { color: var(--vert-texte); }
.chaque h2::before, .apres h2::before { background: var(--mangue); }
.apres .chapeau { color: var(--vert-doux); }
.chaque ul { max-width: 62rem; margin: clamp(2rem, 4vw, 3rem) auto 0; padding: 0; list-style: none; columns: 2 22rem; column-gap: 3.5rem; }
.chaque li { break-inside: avoid; padding: 1rem 0 1.1rem; border-top: 1px solid rgba(201, 214, 201, 0.35); }

/* Comment ça marche : la frise de l'accueil, plus large, et les questions ouvertes, groupées. */
.etapes-page .etapes { max-width: 46rem; margin: clamp(2.5rem, 5vw, 4rem) auto 0; }
.etapes-page .etape h3 { font-family: var(--titrage); font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem); }
.etape .etape-plus { margin-top: 0.85rem; padding-left: 1rem; border-left: 2px solid var(--mangue); color: var(--encre); }
.etape-photos { grid-column: 2; display: grid; grid-auto-flow: column; grid-auto-columns: min(62vw, 15rem); gap: 1rem; margin: 1.25rem calc(-1 * var(--gouttiere)) 0 0; padding: 0.75rem var(--gouttiere) 1.25rem 0.5rem; list-style: none; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.etape-photos li { scroll-snap-align: start; }
.etape-photos li:nth-child(1) { --r: -2deg; }
.etape-photos li:nth-child(2) { --r: 1.5deg; }
.etape-photos li:nth-child(3) { --r: -1deg; }
.etape-photos img { aspect-ratio: 1; object-fit: cover; }
@media (min-width: 48rem) { .etape-photos { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-right: 0; padding-right: 0; overflow: visible; } }
.page .qr { padding-block: clamp(2.25rem, 5vw, 4rem); }
.qr .contenu { display: grid; gap: 1.75rem clamp(3rem, 6vw, 6rem); }
.qr-liste { border-top: 1px solid var(--encre); }
.qr-item { padding: 1.35rem 0 1.5rem; border-bottom: 1px solid var(--filet); }
.qr-item h3 { font-size: 1.3125rem; }
.qr-item p { max-width: 40rem; margin-top: 0.55rem; color: var(--gris); }
@media (min-width: 60rem) {
  .qr .contenu { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; }
  .qr h2 { position: sticky; top: 7rem; }
}

/* La galerie : un mur de photos arrondies, de travers, accrochées « en salon » : une grande, deux l'une sur l'autre,
   une petite ; elles se posent au défilement et se redressent au survol. */
.galerie-groupe { padding-block: clamp(2rem, 5vw, 4rem); }
.galerie-groupe h2 { font-size: clamp(2.2rem, 1.4rem + 2.5vw, 3.75rem); }
.mur-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1rem; align-items: start; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none; }
.mur-photos li { --r: -2deg; }
.mur-photos li:nth-child(4n+2) { --r: 2.5deg; }
.mur-photos li:nth-child(4n+3) { --r: -1.5deg; }
.mur-photos li:nth-child(4n) { --r: 1.75deg; }
.mur-photos figure, .etape-photos figure { position: relative; margin: 0; rotate: var(--r); }
.mur-photos img, .etape-photos img { width: 100%; border-radius: var(--rayon); background: var(--creme-profond); box-shadow: var(--ombre); }
.mur-photos figcaption, .etape-photos figcaption { position: relative; width: fit-content; max-width: calc(100% - 1.4rem); margin: -0.4rem 0 0 0.7rem; padding: 0.45rem 0.75rem; border-radius: 0.7rem; background: var(--blanc); box-shadow: 0 1px 2px rgba(28, 25, 22, 0.14), 0 6px 14px -6px rgba(28, 25, 22, 0.3); font-size: 0.875rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 55.99rem) {
  .mur-photos li:nth-child(4n+1), .mur-photos li:nth-child(4n) { grid-column: 1 / -1; }
  .mur-photos li:nth-child(4n+3) { margin-top: 2rem; }
}
@media (max-width: 47.99rem) { .mur-photos figcaption { padding: 0.4rem 0.6rem; letter-spacing: 0.04em; } }
@media (min-width: 56rem) {
  .mur-photos { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2.25rem, 4vw, 3.5rem) 1.5rem; align-items: center; }
  .mur-photos li:nth-child(1) { grid-area: 1 / 1 / 2 / 8; }
  .mur-photos li:nth-child(2) { grid-area: 1 / 8 / 2 / 13; }
  .mur-photos li:nth-child(3) { grid-area: 2 / 2 / 3 / 7; }
  .mur-photos li:nth-child(4) { grid-area: 2 / 7 / 3 / 13; }
  .inverse .mur-photos li:nth-child(1) { grid-column: 6 / 13; }
  .inverse .mur-photos li:nth-child(2) { grid-column: 1 / 6; }
  .inverse .mur-photos li:nth-child(3) { grid-column: 7 / 12; }
  .inverse .mur-photos li:nth-child(4) { grid-column: 1 / 7; }
  .mur-photos .portrait { width: 72%; justify-self: center; }
}
@media (min-width: 48rem) {
  .seule .contenu { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; column-gap: clamp(2rem, 5vw, 5rem); }
  .seule h2 { padding-top: clamp(1rem, 5vw, 4.5rem); }
  .seule .mur-photos { display: block; margin: 0; }
  .seule .mur-photos li { width: min(100%, 36rem); }
  .seule.inverse h2 { order: 1; }
  .seule.inverse .mur-photos li { margin-left: auto; }
}

/* Pages de texte (mentions, confidentialité, 404). */
.page-texte { padding-block: clamp(3.5rem, 8vw, 6.5rem) var(--air); }
.page-texte .contenu { max-width: 50rem; }
.page-texte .contenu > * + * { margin-top: 1.1rem; }
.page-texte h1 { margin-bottom: 2.25rem; font-size: clamp(2.5rem, 1.7rem + 2.8vw, 4rem); line-height: 1.05; }
.page-texte h1::before { margin-left: 0; }
.page-texte .contenu > h2 { margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid var(--filet); font-family: var(--serif); font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.005em; }
.page-texte p { max-width: 42rem; }
.page-texte .contenu > p:last-child { margin-top: 2.75rem; }
.liens-404 { display: flex; flex-wrap: wrap; gap: 0 1.5rem; padding: 0; list-style: none; font-weight: 600; }
.liens-404 a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }

/* Le devis : la section de l'accueil, avec son titre ; le fond crème profond jusque sous l'en-tête ; rien ne bouge
   dans le formulaire. */
.fond-profond { --creme: var(--creme-profond); }
.page .devis-page { padding-top: clamp(1.25rem, 3.5vw, 2.75rem); }
.devis-page .fil { justify-content: flex-start; }
.devis-page h1 { max-width: 6em; font-size: clamp(2.6rem, 1.6rem + 3vw, 4.5rem); line-height: 1.02; }
.devis-page .chapeau { margin-left: 0; text-align: left; }
.ensuite-liste { display: grid; gap: 1.5rem; max-width: 66rem; margin: clamp(2.25rem, 5vw, 3.5rem) auto 0; padding: 0; list-style: none; counter-reset: ensuite; }
.ensuite-liste li { counter-increment: ensuite; display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1.1rem; align-items: center; font-family: var(--serif); font-size: 1.1875rem; line-height: 1.45; }
.ensuite-liste li::before { content: counter(ensuite); display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--mangue); font: 400 1.375rem/1 var(--titrage); }
@media (min-width: 56rem) { .ensuite-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } .ensuite-liste li { grid-template-columns: none; align-content: start; row-gap: 1rem; } }
.page .ensuite + .deja { padding-top: 0; }
.deja h2 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); }

@media print {
  .fil, .sommaire, .suite, .appel-actions { display: none; }
  .chaque h2 { color: var(--encre); }
  .etape-photos { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .qr h2 { position: static; }
  .qr .contenu { display: block; }
  .qr-liste { margin-top: 1rem; }
  figure, .galerie-groupe, .etiquettes li, .qr-item, .texte-court, .trois li, .chaque li, .ensuite-liste, .formule-detail-texte, .apres .contenu, .appel .contenu { break-inside: avoid; }
  .chaque-panneau, .apres .contenu { background: none; color: var(--gris); padding: 0; }
  .apres h2 { color: var(--encre); }
  .page-carte .tete, .groupe { padding-block: 0.75rem; }
  .page .section, .legende-carte { padding-block: 1rem; }
  .pied { padding-block: 1.5rem; }
  .pied .contenu { gap: 1rem; }
  .pied-pages a, .pied-liens a { min-height: 0; }
  .groupe-corps { grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; margin-top: 0.75rem; align-items: start; }
  .groupe-photos, .groupe-photos.n4, .groupe-photos.n1 { order: 1; grid-template-columns: repeat(2, 5.5rem); grid-auto-flow: row; gap: 0.5rem; margin: 0; padding: 0; overflow: visible; }
  .groupe .groupe-photos li:nth-child(n) { margin: 0; }
  .carte-vignette { padding: 0.3rem 0.3rem 0.5rem; }
  .carte-vignette figcaption { margin-top: 0.3rem; font-size: 0.75rem; }
  .carte-vignette::before { display: none; }
  .groupe-carte { padding: 0; }
  .groupe h2 { font-size: 1.75rem; padding-bottom: 0.5rem; }
  .mur-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 1rem; align-items: start; }
  .mur-photos li:nth-child(n) { grid-area: auto; width: auto; margin: 0; }
  .seule .contenu { display: block; }
  .seule .mur-photos { display: grid; margin-top: 1.25rem; }
  .formule-detail .contenu { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 2rem; }
}

/* ===== Le mouvement : à l'écran, sans mouvement réduit ; mêmes règles que site.css. Jamais le titre de la page, rien
   dans le devis ; chaque bloc est en place dès qu'il est entier à l'écran. ===== */
@media screen and (prefers-reduced-motion: no-preference) {
  @media (hover: hover) and (pointer: fine) {
    .mur-photos figure, .etape-photos figure { transition: rotate 0.3s var(--ressort), scale 0.3s var(--ressort); }
    .formule-detail img { transition: scale 0.3s var(--ressort), filter 0.3s ease; }
    .mur-photos figure:hover, .etape-photos figure:hover { z-index: 1; rotate: 0deg; scale: 1.035; }
    .formule-detail figure:hover img { scale: 1.04; filter: saturate(1.1); }
    .sommaire a { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
  }
  .tete h1::before { animation: hlv-sceau 0.5s var(--ressort) 0.15s backwards; }
  @keyframes hlv-sceau { from { scale: 2.6; rotate: 45deg; } }

  @supports (animation-timeline: view()) {
    .mur-photos figure, .etape-photos figure { animation: hlv-pose linear both; }
    .premier .mur-photos figure { animation-name: hlv-pose-doux; }
    .formule-detail figure { animation: hlv-devoile linear both; }
    .groupe-carte { animation: hlv-entree linear both; }
    @media (max-width: 47.99rem) { .groupe-photos.n4 .carte-vignette { animation: none; } .groupe-photos.n4 { animation: hlv-bande linear both; } .groupe-photos.n4:focus { animation: none; } }
    .mur-photos figure, .etape-photos figure, .formule-detail figure, .groupe-carte, .groupe-photos.n4 { animation-timeline: view(); animation-range: entry 0% entry 100%; animation-range-end: entry min(100%, 10rem); }
    .chaque-panneau, .apres .contenu { view-timeline: --t-zone; view-timeline-inset: 0 calc(100% - 5.5rem); }
    @media (max-width: 47.99rem) { .chaque-panneau, .apres .contenu { view-timeline-inset: 0 calc(100% - 5.125rem); } }
  }
  @keyframes hlv-pose-doux { from { translate: 0 -1rem; rotate: calc(var(--r) + 5deg); } }
  /* Le cadre s'ouvre puis s'efface au-delà de la photo : ni l'ombre ni les coins ne sont rognés. */
  @keyframes hlv-devoile { from { clip-path: inset(7% round var(--rayon)); } to { clip-path: inset(-12% round var(--rayon)); } }
}