/* Accroche animée posée sur la photo de l'accueil (réglée dans le back-office, voir Accroche.php).
   Utilisée par le site et par l'aperçu du back-office (Réglages). Couleurs de la charte seulement. */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(polices/hanken-grotesk-latin.woff2) format("woff2"); }

.accroche-hote { position: relative; }
.accroche { position: absolute; inset: 0; display: flex; padding: 26px 30px; pointer-events: none; font-family: "Hanken Grotesk", Arial, sans-serif; font-size: 16px; }
/* Léger voile sombre du côté du texte : il reste lisible quelle que soit la photo. */
.accroche::before { content: ""; position: absolute; inset: 0; }
.pos-bas-gauche, .pos-bas-droite { align-items: flex-end; }
.pos-haut-gauche, .pos-haut-droite { align-items: flex-start; }
.pos-bas-droite, .pos-haut-droite { justify-content: flex-end; text-align: right; }
.pos-bas-gauche::before, .pos-bas-droite::before { background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 60%); }
.pos-haut-gauche::before, .pos-haut-droite::before { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 60%); }

/* « .accroche .accroche-msg » : plus fort que les styles de paragraphe de la page (ex. « .ouverture p »). */
.accroche .accroche-msg { position: relative; display: none; margin: 0; max-width: 88%; color: inherit; font-size: inherit; line-height: 1.12; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); }
.accroche .accroche-msg.actif { display: block; }
.accroche-msg .l1 { display: block; font-weight: 600; letter-spacing: 0.005em; }
.accroche-msg .l2 { display: block; font-weight: 400; margin-top: 0.18em; opacity: 0.94; }

.taille-s .l1 { font-size: 1.35em; } .taille-s .l2 { font-size: 1.05em; }
.taille-m .l1 { font-size: 2em; }    .taille-m .l2 { font-size: 1.4em; }
.taille-l .l1 { font-size: 2.7em; }  .taille-l .l2 { font-size: 1.85em; }

.couleur-blanc { color: #fff; }
.couleur-bleu-clair { color: #9fcdf2; }
.couleur-bleu { color: #2f8fd6; }
.couleur-gris { color: #d7dbdf; }

/* Animations : rejouées à chaque affichage d'un message (classe « actif » remise par accroche.js). */
@keyframes accGlisse { from { opacity: 0; transform: translateX(var(--acc-dx, -28px)); } to { opacity: 1; transform: none; } }
@keyframes accFondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes accZoom { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
.pos-bas-droite, .pos-haut-droite { --acc-dx: 28px; }
.anim-glissement .actif .l1 { animation: accGlisse 0.8s ease-out both; }
.anim-glissement .actif .l2 { animation: accGlisse 0.8s ease-out 0.7s both; }
.anim-fondu .actif .l1 { animation: accFondu 1.2s ease-out both; }
.anim-fondu .actif .l2 { animation: accFondu 1.2s ease-out 0.9s both; }
.anim-zoom .actif .l1 { animation: accZoom 0.9s ease-out both; transform-origin: left bottom; }
.anim-zoom .actif .l2 { animation: accZoom 0.9s ease-out 0.7s both; transform-origin: left bottom; }
/* Machine à écrire et mot par mot : chaque lettre ou mot est un <span class="morceau"> retardé (accroche.js). */
.anim-machine .actif .morceau { animation: accFondu 0.05s linear both; }
.anim-mots .actif .morceau { animation: accFondu 0.5s ease-out both; }

@media (max-width: 900px) {
  .accroche { font-size: 12px; padding: 16px 18px; }
  .accroche.sans-mobile { display: none; }
}
/* Visiteur qui a demandé moins d'animations : l'accroche s'affiche sans mouvement. */
@media (prefers-reduced-motion: reduce) {
  .accroche * { animation: none !important; }
}