:root {
  --vert: #1f4d3a;
  --vert-fonce: #163a2b;
  --vert-clair: #e7efe9;
  --sable: #f7f3ea;
  --terre: #b5652b;
  --texte: #1c2320;
  --gris: #56625b;
  --ligne: #d9e1dc;
  --blanc: #ffffff;
  --rayon: 10px;
  --largeur: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

a { color: var(--vert); }

img, svg { max-width: 100%; display: block; }

.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 20px; }

/* En-tête */
.entete { border-bottom: 1px solid var(--ligne); background: var(--blanc); position: sticky; top: 0; z-index: 10; }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--vert-fonce); font-weight: 700; font-size: 21px; letter-spacing: 0.2px; }
.logo svg { width: 30px; height: 30px; }
.menu { display: flex; gap: 22px; font-size: 15px; }
.menu a { text-decoration: none; color: var(--gris); }
.menu a:hover { color: var(--vert); }

/* Boutons */
.bouton { display: inline-block; padding: 13px 20px; border-radius: 8px; font-weight: 600; text-decoration: none; font-size: 16px; }
.bouton-plein { background: var(--vert); color: var(--blanc); }
.bouton-plein:hover { background: var(--vert-fonce); }
.bouton-contour { border: 1.5px solid var(--vert); color: var(--vert); }
.bouton-contour:hover { background: var(--vert-clair); }

/* Accroche */
.accroche { background: var(--sable); padding: 56px 0 64px; }
.accroche .conteneur { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.accroche h1 { font-size: 40px; line-height: 1.15; margin: 0 0 18px; color: var(--vert-fonce); }
.accroche p { color: var(--gris); margin: 0 0 14px; }
.accroche .actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 16px; }
.petit { font-size: 14px; color: var(--gris); }

/* Lettre d'exemple */
.lettre { background: var(--blanc); border-radius: 6px; box-shadow: 0 18px 40px rgba(31, 77, 58, 0.16); padding: 22px 22px 16px; font-size: 13px; line-height: 1.45; position: relative; transform: rotate(0.8deg); }
.lettre .bandeau { position: absolute; top: -12px; right: 16px; background: #9a5222; color: var(--blanc); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.lettre .haut { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.lettre .emetteur { display: flex; gap: 8px; align-items: center; font-weight: 600; color: var(--vert-fonce); }
.lettre .logo-client { width: 30px; height: 30px; border-radius: 6px; background: var(--vert-clair); border: 1px dashed var(--vert); }
.lettre .destinataire { text-align: right; color: var(--gris); font-size: 12px; }
.lettre .vue { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; align-items: center; margin: 10px 0; }
.lettre .chiffres div { margin-bottom: 6px; }
.lettre .chiffres strong { display: block; font-size: 16px; color: var(--vert-fonce); }
.lettre .bas { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--ligne); padding-top: 10px; margin-top: 10px; }
.lettre .qr { width: 52px; height: 52px; flex: none; }
.lettre .mentions { font-size: 10.5px; color: var(--gris); margin-top: 8px; }

/* Sections */
section { padding: 64px 0; }
section[id] { scroll-margin-top: 72px; } /* les ancres ne passent pas sous l'en-tête collant */
section h2 { font-size: 30px; line-height: 1.2; margin: 0 0 14px; color: var(--vert-fonce); }
.intro { max-width: 720px; color: var(--gris); margin: 0 0 28px; }
.fond-vert { background: var(--vert-clair); }

.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }

.etapes { counter-reset: etape; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; list-style: none; padding: 0; margin: 0; }
.etapes li { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 20px 18px; }
.etapes li::before { counter-increment: etape; content: counter(etape); display: inline-flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; background: var(--vert); color: var(--blanc); font-weight: 700; margin-bottom: 10px; }
.etapes h3 { font-size: 17px; margin: 0 0 6px; }
.etapes p { margin: 0; color: var(--gris); font-size: 15px; }

.liste-coches { list-style: none; padding: 0; margin: 0; }
.liste-coches li { padding-left: 30px; position: relative; margin-bottom: 12px; }
.liste-coches li::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 9px; border-left: 3px solid var(--vert); border-bottom: 3px solid var(--vert); transform: rotate(-45deg); }

.comparaison { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.carte { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 22px 20px; }
.carte h3 { font-size: 17px; margin: 0 0 8px; color: var(--vert-fonce); }
.carte p { margin: 0; color: var(--gris); font-size: 15px; }

/* Tarifs */
.tarifs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }
.tarif { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 26px 24px; }
.tarif.mise-en-avant { border: 2px solid var(--vert); }
.tarif h3 { margin: 0 0 4px; font-size: 19px; }
.tarif .prix { font-size: 34px; font-weight: 700; color: var(--vert-fonce); margin: 8px 0 2px; }
.tarif .prix-texte { font-size: 24px; line-height: 1.25; margin-top: 12px; }
.tarif .unite { color: var(--gris); font-size: 15px; margin-bottom: 14px; }
.tarif ul { margin: 0; padding-left: 18px; color: var(--gris); font-size: 15px; }
.tarif li { margin-bottom: 6px; }
.conditions { color: var(--gris); font-size: 15px; }

/* Questions */
.questions details { border-bottom: 1px solid var(--ligne); }
.questions summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; color: var(--vert); font-size: 22px; line-height: 1; }
.questions details[open] summary::after { content: "−"; }
.questions details p { margin: -6px 0 16px; color: var(--gris); max-width: 820px; }

/* Contact */
.contact { background: var(--vert); color: var(--blanc); text-align: center; }
.contact h2 { color: var(--blanc); }
.contact p { color: #d5e3da; max-width: 640px; margin: 0 auto 24px; }
.contact .bouton-plein { background: var(--blanc); color: var(--vert-fonce); }
.contact .bouton-plein:hover { background: var(--sable); }
.contact .adresse { margin-top: 16px; font-size: 15px; }
.contact .adresse a { color: var(--blanc); display: inline-block; padding: 8px 2px; }

/* Pied de page */
.pied { padding: 28px 0 36px; font-size: 14px; color: var(--gris); }
.pied .conteneur { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pied nav { display: flex; gap: 18px; flex-wrap: wrap; }
.pied a { color: var(--gris); display: inline-block; padding: 6px 0; }

/* Pages juridiques */
.page-texte { padding: 48px 0 64px; }
.page-texte .conteneur { max-width: 820px; }
.page-texte h1 { color: var(--vert-fonce); font-size: 32px; margin: 0 0 8px; }
.page-texte h2 { font-size: 21px; margin: 32px 0 8px; color: var(--vert-fonce); }
.page-texte p, .page-texte li { color: #333d38; }
.a-completer { background: #fff3cd; padding: 0 4px; border-radius: 3px; }

/* Petits écrans */
@media (max-width: 900px) {
  .accroche .conteneur, .deux-colonnes, .tarifs { grid-template-columns: 1fr; }
  .etapes { grid-template-columns: 1fr 1fr; }
  .comparaison { grid-template-columns: 1fr; }
  .accroche h1 { font-size: 32px; }
  .lettre { transform: none; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .menu { display: none; }
  .etapes { grid-template-columns: 1fr; }
  section { padding: 48px 0; }
  section h2 { font-size: 25px; }
  .accroche { padding: 36px 0 44px; }
  .accroche h1 { font-size: 28px; }
  .lettre .vue { grid-template-columns: 1fr; }
}

/* Chiffres par commune : le tableau, et l'encadré centré à côté */
.chiffres-grille { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.chiffres-grille .note { margin-bottom: 0; }
@media (max-width: 900px) {
  .chiffres-grille { grid-template-columns: 1fr; gap: 24px; }
}
.tableau { width: 100%; border-collapse: collapse; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); overflow: hidden; font-size: 16px; }
.tableau th, .tableau td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--ligne); }
.tableau th { background: var(--vert-clair); color: var(--vert-fonce); font-size: 14px; font-weight: 600; }
.tableau td.nombre, .tableau th.nombre { text-align: right; font-variant-numeric: tabular-nums; }
.tableau tr:last-child td { border-bottom: none; }
@media (min-width: 601px) {
  .tableau td:first-child { white-space: nowrap; } /* « Roquebrune-sur-Argens » sur une ligne */
}
.note { font-size: 14px; color: var(--gris); margin-top: 10px; }
.encart { background: var(--sable); border-left: 4px solid var(--terre); border-radius: 6px; padding: 18px 20px; }
.encart h3 { margin: 0 0 6px; font-size: 18px; color: var(--vert-fonce); }
.encart p { margin: 0; color: #3b4540; }

/* Calcul */
.calcul { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 24px; max-width: 720px; }
.calcul label { font-weight: 600; display: block; margin-bottom: 8px; }
.calcul .saisie { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.calcul input { font-size: 20px; width: 140px; padding: 8px 10px; border: 1.5px solid var(--ligne); border-radius: 8px; color: var(--vert-fonce); font-weight: 700; }
.calcul input:focus { outline: 2px solid var(--vert); border-color: var(--vert); }
.calcul .resultat { margin: 0 0 8px; }
.calcul .resultat strong { color: var(--vert-fonce); }

/* À propos */
.apropos { max-width: 760px; }
.apropos p { color: #3b4540; }

/* Contact secondaire */
.contact .sms { margin-top: 14px; font-size: 15px; color: #d5e3da; }
.contact .sms a { color: var(--blanc); font-weight: 600; display: inline-block; padding: 8px 2px; }

/* Barre fixe sur mobile */
.barre-mobile { display: none; }
@media (max-width: 700px) {
  .barre-mobile { display: grid; grid-template-columns: 1fr auto; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--ligne); z-index: 20; }
  .barre-mobile a { display: block; text-align: center; padding: 12px 14px; font-size: 15px; }
  .barre-mobile .bouton-contour { background: var(--blanc); }
  body { padding-bottom: 76px; }
  .tableau { font-size: 15px; }
  .tableau th, .tableau td { padding: 10px 10px; }
}

/* Animation de l'accroche : de la lettre à la demande de devis */
.film { --cycle: 16s; margin: 0; background: var(--blanc); border-radius: 12px; box-shadow: 0 18px 40px rgba(31, 77, 58, 0.16); overflow: hidden; }
.film-scene { position: relative; }
.film-scene > svg { width: 100%; height: auto; }
.film text { font-family: inherit; }
.film .t-gras { font-weight: 700; }
.film .t-contour { paint-order: stroke; stroke: #1f4d3a; stroke-width: 3px; stroke-linejoin: round; }
.film figcaption { padding: 14px 18px 16px; border-top: 1px solid var(--ligne); }
.film-legendes { counter-reset: legende; list-style: none; margin: 0; padding: 0; display: grid; }
.film-legendes li { grid-area: 1 / 1; counter-increment: legende; display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--vert-fonce); line-height: 1.35; opacity: 0; }
.film-legendes li::before { content: counter(legende); flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--vert); color: var(--blanc); font-size: 14px; }
.film-pause { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.85); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.film-pause svg { width: 14px; height: 14px; fill: var(--vert-fonce); }
.film-pause .icone-lecture, .film.en-pause .icone-pause { display: none; }
.film.en-pause .icone-lecture { display: block; }
.film-pause:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; }
@media (pointer: coarse) { .film-pause { width: 44px; height: 44px; top: 6px; right: 6px; } }

/* États par défaut : image fixe de la dernière scène si les animations sont coupées */
.film .scene { opacity: 0; }
.film .scene-4 { opacity: 1; }
.film .s1-enveloppe, .film .s2-enveloppe, .film .s2-onde, .film .s3-camera, .film .s3-balayage,
.film .s3-cadre-ok, .film .s3-doigt, .film .s3-texte-2, .film .s4-vibrations { opacity: 0; }
.film .s1-lettre, .film .s1-qr, .film .s1-enveloppe, .film .s2-enveloppe, .film .s2-boite, .film .s2-onde,
.film .s3-doigt, .film .s4-telephone, .film .s4-rappeler { transform-box: fill-box; transform-origin: center; }
.film .s4-notif { transform-box: fill-box; transform-origin: 0 50%; }

/* Un cycle de 16 s : quatre scènes de 4 s, légendes synchronisées */
.film .scene-1 { animation: film-scene-1 var(--cycle) ease-in-out infinite; }
.film .scene-2 { animation: film-scene-2 var(--cycle) ease-in-out infinite; }
.film .scene-3 { animation: film-scene-3 var(--cycle) ease-in-out infinite; }
.film .scene-4 { animation: film-scene-4 var(--cycle) ease-in-out infinite; }
.film-legendes li:nth-child(1) { animation: film-legende-1 var(--cycle) linear infinite; }
.film-legendes li:nth-child(2) { animation: film-legende-2 var(--cycle) linear infinite; }
.film-legendes li:nth-child(3) { animation: film-legende-3 var(--cycle) linear infinite; }
.film-legendes li:nth-child(4) { animation: film-legende-4 var(--cycle) linear infinite; }
.film .s1-qr { animation: film-s1-qr var(--cycle) ease-in-out infinite; }
.film .s1-lettre { animation: film-s1-lettre var(--cycle) ease-in-out infinite; }
.film .s1-enveloppe { animation: film-s1-enveloppe var(--cycle) ease-in-out infinite; }
.film .s2-enveloppe { animation: film-s2-enveloppe var(--cycle) ease-in-out infinite; }
.film .s2-boite { animation: film-s2-boite var(--cycle) ease-in-out infinite; }
.film .s2-onde { animation: film-s2-onde var(--cycle) ease-out infinite; }
.film .s2-perimetre { animation: film-fourmis 1.2s linear infinite; }
.film .s3-telephone { animation: film-s3-telephone var(--cycle) ease-in-out infinite; }
.film .s3-camera { animation: film-s3-camera var(--cycle) ease-in-out infinite; }
.film .s3-page { animation: film-s3-page var(--cycle) ease-in-out infinite; }
.film .s3-balayage { animation: film-s3-balayage var(--cycle) linear infinite; }
.film .s3-cadre-ok { animation: film-s3-cadre-ok var(--cycle) ease-in-out infinite; }
.film .s3-doigt { animation: film-s3-doigt var(--cycle) ease-out infinite; }
.film .s3-texte-1 { animation: film-s3-texte-1 var(--cycle) ease-in-out infinite; }
.film .s3-texte-2 { animation: film-s3-texte-2 var(--cycle) ease-in-out infinite; }
.film .s3-bouton { animation: film-s3-bouton var(--cycle) ease-in-out infinite; }
.film .s4-mini { animation: film-s4-mini var(--cycle) ease-in-out infinite; }
.film .s4-notif { animation: film-s4-notif var(--cycle) cubic-bezier(0.2, 0.9, 0.3, 1.2) infinite; }
.film .s4-telephone { animation: film-s4-telephone var(--cycle) linear infinite; }
.film .s4-vibrations { animation: film-s4-vibrations var(--cycle) linear infinite; }
.film .s4-rappeler { animation: film-s4-rappeler var(--cycle) ease-in-out infinite; }

@keyframes film-scene-1 { 0%, 23% { opacity: 1; } 25%, 97.5% { opacity: 0; } 100% { opacity: 1; } }
@keyframes film-scene-2 { 0%, 23% { opacity: 0; } 25%, 48% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes film-scene-3 { 0%, 48% { opacity: 0; } 50%, 73% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes film-scene-4 { 0%, 73% { opacity: 0; } 75%, 97.5% { opacity: 1; } 100% { opacity: 0; } }
/* Les légendes se relaient sans se superposer, pour rester lisibles pendant les fondus */
@keyframes film-legende-1 { 0%, 23% { opacity: 1; } 24%, 98.5% { opacity: 0; } 99.5%, 100% { opacity: 1; } }
@keyframes film-legende-2 { 0%, 24% { opacity: 0; } 25%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes film-legende-3 { 0%, 49% { opacity: 0; } 50%, 73% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes film-legende-4 { 0%, 74% { opacity: 0; } 75%, 97.5% { opacity: 1; } 98.5%, 100% { opacity: 0; } }

/* 1. La lettre : le QR code clignote, la lettre passe sous enveloppe, l'enveloppe part */
@keyframes film-s1-qr { 0%, 5% { transform: scale(1); } 8% { transform: scale(1.25); } 11%, 100% { transform: scale(1); } }
@keyframes film-s1-lettre {
  0%, 14% { transform: translateY(0) scale(1); opacity: 1; }
  18.5%, 25.5% { transform: translateY(20px) scale(0.5); opacity: 0; }
  26%, 100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes film-s1-enveloppe {
  0%, 14% { transform: translate(0, 0) rotate(0deg) scale(0.8); opacity: 0; }
  18.5%, 20.5% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  24% { transform: translate(300px, -40px) rotate(14deg) scale(0.8); opacity: 1; }
  24.1% { transform: translate(300px, -40px) rotate(14deg) scale(0.8); opacity: 0; }
  25%, 100% { transform: translate(0, 0) rotate(0deg) scale(0.8); opacity: 0; }
}

/* 2. L'enveloppe traverse le ciel et entre dans la boîte aux lettres */
@keyframes film-s2-enveloppe {
  0%, 25.5% { transform: translate(-190px, -150px) rotate(-14deg) scale(3); opacity: 0; }
  26% { transform: translate(-178px, -150px) rotate(-14deg) scale(3); opacity: 1; }
  32% { transform: translate(-70px, -118px) rotate(-5deg) scale(2.2); opacity: 1; }
  37% { transform: translate(0, -14px) rotate(0deg) scale(1.15); opacity: 1; }
  38.5% { transform: translate(0, -3px) rotate(0deg) scale(1); opacity: 1; }
  40.5% { transform: translate(0, 16px) rotate(0deg) scale(1); opacity: 1; }
  41%, 100% { transform: translate(0, 16px) rotate(0deg) scale(1); opacity: 0; }
}
@keyframes film-s2-boite { 0%, 40% { transform: translateY(0); } 41% { transform: translateY(1.5px); } 42.5%, 100% { transform: translateY(0); } }
@keyframes film-s2-onde { 0%, 40.5% { transform: scale(0.6); opacity: 0; } 41% { transform: scale(0.8); opacity: 0.9; } 45%, 100% { transform: scale(3.2); opacity: 0; } }
@keyframes film-fourmis { to { stroke-dashoffset: -24; } }

/* 3. Le téléphone scanne le QR code, la page du paysagiste s'ouvre, la demande part */
@keyframes film-s3-telephone { 0%, 51.5% { transform: translateX(280px); } 55%, 75.5% { transform: translateX(0); } 76%, 100% { transform: translateX(280px); } }
@keyframes film-s3-camera { 0%, 61% { opacity: 1; } 62.5%, 75.5% { opacity: 0; } 76%, 100% { opacity: 1; } }
@keyframes film-s3-page { 0%, 61% { opacity: 0; } 62.5%, 75.5% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes film-s3-balayage {
  0%, 55.5% { transform: translateY(0); opacity: 0; }
  56% { transform: translateY(0); opacity: 1; }
  59.5% { transform: translateY(85px); opacity: 1; }
  60%, 100% { transform: translateY(85px); opacity: 0; }
}
@keyframes film-s3-cadre-ok { 0%, 59.5% { opacity: 0; } 60%, 62.5% { opacity: 1; } 63%, 100% { opacity: 0; } }
@keyframes film-s3-doigt { 0%, 66% { transform: scale(0.5); opacity: 0; } 66.5% { transform: scale(0.7); opacity: 0.8; } 69.5%, 100% { transform: scale(1.8); opacity: 0; } }
@keyframes film-s3-texte-1 { 0%, 67% { opacity: 1; } 67.5%, 75.5% { opacity: 0; } 76%, 100% { opacity: 1; } }
@keyframes film-s3-texte-2 { 0%, 67% { opacity: 0; } 67.5%, 75.5% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes film-s3-bouton { 0%, 67% { fill: #3f8a66; } 67.5%, 75.5% { fill: #1f4d3a; } 76%, 100% { fill: #3f8a66; } }

/* 4. Le téléphone du paysagiste vibre : nouvelle demande de devis */
@keyframes film-s4-mini { 0%, 77% { opacity: 0; } 78%, 100% { opacity: 1; } }
@keyframes film-s4-notif { 0%, 78.5% { transform: translate(-110px, 40px) scale(0.3); opacity: 0; } 81%, 100% { transform: translate(0, 0) scale(1); opacity: 1; } }
@keyframes film-s4-telephone {
  0%, 80% { transform: rotate(0deg); }
  80.5% { transform: rotate(3deg); } 81% { transform: rotate(-3deg); } 81.5% { transform: rotate(3deg); } 82% { transform: rotate(-3deg); }
  82.5%, 84% { transform: rotate(0deg); }
  84.5% { transform: rotate(3deg); } 85% { transform: rotate(-3deg); } 85.5% { transform: rotate(3deg); } 86% { transform: rotate(-3deg); }
  86.5%, 100% { transform: rotate(0deg); }
}
@keyframes film-s4-vibrations { 0%, 80% { opacity: 0; } 80.5%, 82.5% { opacity: 1; } 83%, 84% { opacity: 0; } 84.5%, 86.5% { opacity: 1; } 87%, 100% { opacity: 0; } }
@keyframes film-s4-rappeler {
  0%, 82% { transform: translateY(8px) scale(1); opacity: 0; }
  84%, 88% { transform: translateY(0) scale(1); opacity: 1; }
  89.5% { transform: translateY(0) scale(1.08); opacity: 1; }
  91%, 100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Sur une seule colonne, l'animation passe juste sous le titre, avant le texte */
@media (max-width: 900px) {
  .accroche .conteneur { row-gap: 0; }
  .accroche-texte { display: contents; }
  .accroche h1 { order: 1; }
  /* Assez petite pour tenir en entier sous l'en-tête, même sur un téléphone tenu à l'horizontale */
  .accroche .film { order: 2; width: 100%; max-width: min(560px, calc((100vh - 150px) * 4 / 3)); margin: 4px auto 26px; }
  .accroche-texte > :not(h1) { order: 3; }
}

/* Pause (bouton) et pause automatique hors de l'écran */
.film.en-pause *, .film.hors-ecran * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .film * { animation: none !important; }
  .film-legendes { display: block; }
  .film-legendes li { opacity: 1; margin-bottom: 8px; }
  .film-legendes li:last-child { margin-bottom: 0; }
  .film-pause { display: none; }
}