/* =============================================================================
   TENPAD SAINT CAST — feuille de style unique du site
   Reprise du site WordPress/DIVI (tenpad.fr) en HTML statique :
   mêmes pages, mêmes textes, même ordre des sections, mise en forme modernisée.
   Couleurs et polices du site d'origine : tout est réglé ici, en haut du fichier.
   ============================================================================= */

:root {
  --bleu: #0062ad;           /* bleu du logo : titres « Bienvenue au », menu, bandeau du téléphone */
  --bleu-clair: #2b87da;     /* départ des traits dégradés des surtitres */
  --bleu-pale: #eaf3fb;      /* fonds bleutés */
  --orange: #e55730;         /* orange du logo : « TENPAD », boutons, icônes, réseaux sociaux */
  --orange-fonce: #c8431f;   /* survol des boutons */
  --orange-pale: #fdeee9;
  --nuit: #192028;           /* surtitres « de 9h à 22h » et pied de page */
  --encre: #333;             /* titres « SAINT CAST », « sur l'App store… » */
  --texte: #7e7f80;          /* textes (gris DIVI du site d'origine) */
  --texte-fonce: #5d5e60;
  --gris-clair: #f5f7fa;
  --gris-trait: #e6e9ee;
  --blanc: #fff;
  --degrade: linear-gradient(90deg, var(--bleu-clair), var(--orange));   /* traits des surtitres */
  --ombre-douce: 0 40px 80px -40px rgba(25, 32, 40, .55);
  --ombre-carte: 0 2px 18px 0 rgba(0, 0, 0, .15);                       /* ombre de la vignette « Réservation effectuée » */
  --ombre-bouton: 0 14px 28px -12px rgba(229, 87, 48, .65);
  --rayon: 10px;             /* coins des boutons du site d'origine */
  --rayon-carte: 30px;       /* coins de la carte Google du site d'origine */
  --titre: "Poppins", Helvetica, Arial, sans-serif;     /* titres, textes, boutons (Poppins) */
  --corps: "Open Sans", Arial, sans-serif;              /* menu et textes courants (Open Sans) */
  --entete-h: 84px;
  --bandeau-h: 34px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--entete-h) + 20px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--titre); font-size: 16px; font-weight: 500; line-height: 1.75; color: var(--texte); background: var(--blanc); overflow-x: clip; }
img, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--titre); font-weight: 700; line-height: 1.15; margin: 0 0 .45em; color: var(--encre); }
h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
p { margin: 0 0 1em; }
strong, b { font-weight: 700; color: var(--texte-fonce); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--orange); color: #fff; }

.conteneur { width: min(1180px, 100% - 40px); margin-inline: auto; }
.conteneur--etroit { width: min(900px, 100% - 40px); margin-inline: auto; }
.section { position: relative; padding: clamp(64px, 8vw, 110px) 0; isolation: isolate; }
.section--serree { padding: clamp(36px, 5vw, 60px) 0; }
.section--pale { background: var(--gris-clair); }
.centre { text-align: center; }
.orange { color: var(--orange); }
.bleu { color: var(--bleu); }
.lien { color: var(--orange); font-weight: 600; border-bottom: 1px solid currentColor; overflow-wrap: anywhere; transition: color .3s; }
.lien:hover { color: var(--bleu); }

/* Surtitre (« de 9h à 22h », « 7 jours sur 7 ») : Poppins gras majuscules + trait dégradé bleu → orange */
.surtitre { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 10px; font-family: var(--titre); font-weight: 700; font-size: .82rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--nuit); line-height: 1.4; }
.surtitre::before, .surtitre--centre::after { content: ""; flex: none; width: 0; height: 4px; border-radius: 4px; background: var(--degrade); transition: width .9s var(--ease) .25s; }
.surtitre--centre::after { background: linear-gradient(90deg, var(--orange), var(--bleu-clair)); }
.visible .surtitre::before, .surtitre.visible::before, .visible .surtitre--centre::after, .surtitre--centre.visible::after { width: 56px; }
.surtitre .point { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }

/* Titres en deux couleurs (préfixe bleu + mot orange, module « Advanced Heading ») */
.titre-bleu { color: var(--bleu); }

/* Barre de progression de lecture */
.progression { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 120; background: var(--degrade); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- Boutons (orange, coins 10 px, contour au survol comme le site d'origine) ---------- */
.bouton { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: 18px 30px; border-radius: var(--rayon); font-family: var(--titre); font-weight: 600; font-size: 1rem; line-height: 1.2; text-align: center; background: var(--orange); color: #fff; border: 3px solid var(--orange); box-shadow: var(--ombre-bouton); transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s; overflow: hidden; isolation: isolate; }
.bouton::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.bouton:hover::after { transform: translateX(120%); }
.bouton:hover { transform: translateY(-3px); background: #fff; color: var(--orange); box-shadow: 0 12px 18px -6px rgba(0, 0, 0, .24); }
.bouton svg { width: 20px; height: 20px; flex: none; transition: transform .35s var(--ease); }
.bouton:hover svg { transform: translateX(4px); }
.bouton--contour { background: transparent; color: var(--bleu); border-color: var(--bleu); box-shadow: none; }
.bouton--contour:hover { background: var(--bleu); color: #fff; }
.bouton--petit { padding: 10px 18px; font-size: .88rem; border-width: 2px; }
.boutons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.boutons--centre { justify-content: center; }

/* ---------- Bandeau du téléphone + en-tête vitré qui se réduit ---------- */
.bandeau { position: fixed; inset: 0 0 auto 0; z-index: 101; height: var(--bandeau-h); background: var(--bleu); color: #fff; font-family: var(--corps); font-size: .82rem; font-weight: 600; transition: transform .4s var(--ease); }
.bandeau .conteneur { height: 100%; display: flex; align-items: center; gap: 8px; }
.bandeau a { display: inline-flex; align-items: center; gap: 8px; }
.bandeau svg { width: 15px; height: 15px; animation: sonne 3.2s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes sonne { 0%, 82%, 100% { transform: rotate(0); } 85% { transform: rotate(-16deg); } 88% { transform: rotate(14deg); } 91% { transform: rotate(-10deg); } 94% { transform: rotate(6deg); } }
.bandeau.cache { transform: translateY(-100%); }
.entete { position: fixed; inset: var(--bandeau-h) 0 auto 0; z-index: 100; height: var(--entete-h); transition: height .4s var(--ease), top .4s var(--ease); }
.entete::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .8); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid rgba(0, 0, 0, .06); transition: background .4s, box-shadow .4s; }
.entete.reduite { height: 66px; top: 0; }
.entete.reduite::before { background: rgba(255, 255, 255, .95); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .45); }
.entete__in { position: relative; height: 100%; display: flex; align-items: center; gap: 18px; }
.entete__logo { flex: none; display: flex; align-items: center; }
.entete__logo img { height: 66px; width: auto; transition: height .4s var(--ease), transform .8s var(--ease); }
.entete__logo:hover img { transform: rotate(-18deg) scale(1.05); }
.entete.reduite .entete__logo img { height: 50px; }
.menu { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.menu a { position: relative; padding: 8px 16px; font-family: var(--corps); font-weight: 600; font-size: 1.05rem; color: var(--bleu); white-space: nowrap; transition: color .25s; }
.menu a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 2px; height: 3px; border-radius: 3px; background: var(--degrade); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.menu a:hover, .menu a.actif { color: var(--orange); }
.menu a:hover::after, .menu a.actif::after { transform: none; }
.entete__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.burger { display: none; width: 46px; height: 46px; border-radius: 50%; position: relative; }
.burger span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--bleu); border-radius: 2px; transition: transform .4s var(--ease), opacity .3s; }
.burger span:nth-child(1) { top: 16px; } .burger span:nth-child(2) { top: 22px; } .burger span:nth-child(3) { top: 28px; }
body.menu-ouvert .burger span { background: #fff; }
body.menu-ouvert .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-ouvert .burger span:nth-child(2) { opacity: 0; }
body.menu-ouvert .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
body.menu-ouvert .entete::before { background: transparent; box-shadow: none; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Menu mobile plein écran (cercle qui s'ouvre depuis le bouton) */
.tiroir { position: fixed; inset: 0; z-index: 99; background: radial-gradient(circle at 85% 8%, #0b4f86 0, var(--nuit) 62%); color: #fff; padding: calc(var(--entete-h) + var(--bandeau-h) + 24px) 28px 36px; overflow-y: auto; clip-path: circle(0 at calc(100% - 44px) 76px); visibility: hidden; transition: clip-path .7s var(--ease), visibility 0s .7s; display: flex; flex-direction: column; }
body.menu-ouvert .tiroir { clip-path: circle(150% at calc(100% - 44px) 76px); visibility: visible; transition: clip-path .7s var(--ease), visibility 0s; }
body.menu-ouvert { overflow: hidden; }
.tiroir > a:not(.bouton) { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; font-family: var(--titre); font-weight: 700; font-size: 1.9rem; line-height: 1.2; border-bottom: 1px solid rgba(255, 255, 255, .1); opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .5s var(--ease), color .3s; }
.tiroir > a:not(.bouton)::after { content: "→"; color: var(--orange); font-size: 1.3rem; }
.tiroir > a.actif { color: var(--orange); }
body.menu-ouvert .tiroir > a { opacity: 1; transform: none; }
body.menu-ouvert .tiroir > a:nth-child(2) { transition-delay: .06s; } body.menu-ouvert .tiroir > a:nth-child(3) { transition-delay: .12s; }
body.menu-ouvert .tiroir > a:nth-child(4) { transition-delay: .18s; }
.tiroir .bouton { margin-top: 26px; width: 100%; }
.tiroir__coord { margin-top: auto; padding-top: 26px; color: rgba(255, 255, 255, .75); font-size: .95rem; }
.tiroir__coord a { color: #fff; font-weight: 700; white-space: nowrap; }

/* ---------- Héros de l'accueil : « Bienvenue au TENPAD SAINT CAST » + photo des courts ---------- */
.hero { position: relative; padding: calc(var(--entete-h) + var(--bandeau-h) + 50px) 0 clamp(70px, 9vw, 120px); overflow: hidden; isolation: isolate; }
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(10px); }
.hero::before { width: 640px; height: 640px; right: -180px; top: -160px; background: radial-gradient(circle, rgba(43, 135, 218, .18), transparent 65%); animation: halo 12s ease-in-out infinite alternate; }
.hero::after { width: 520px; height: 520px; left: -220px; bottom: -220px; background: radial-gradient(circle, rgba(229, 87, 48, .14), transparent 65%); animation: halo 14s ease-in-out infinite alternate-reverse; }
@keyframes halo { to { transform: translate(-60px, 50px) scale(1.12); } }
.hero__in { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
.hero h1 { margin: 0 0 .1em; }
.hero h1 .ligne { display: block; }
.hero__ville { font-size: clamp(2.4rem, 5.2vw, 4rem); font-weight: 700; line-height: 1.15; color: var(--encre); margin: 0 0 26px; letter-spacing: .02em; }
.hero__intro { font-size: 1.05rem; }
.hero .bouton { margin-top: 12px; }

/* Liste des activités (TENNIS, PICKLEBALL, PADEL, PRO SHOP) */
.activites { list-style: none; margin: 22px 0 18px; padding: 0; display: grid; gap: 10px; }
.activites li { position: relative; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 12px 16px 12px 20px; border-radius: 14px; background: #fff; border: 1px solid var(--gris-trait); transition: transform .4s var(--ease), box-shadow .4s, border-color .3s; overflow: hidden; }
.activites li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--degrade); transform: scaleY(0); transform-origin: top; transition: transform .6s var(--ease); }
.activites li:hover { transform: translateX(6px); box-shadow: 0 18px 36px -24px rgba(25, 32, 40, .5); border-color: rgba(229, 87, 48, .35); }
.activites li:hover::before { transform: none; }
.activites b { color: var(--nuit); letter-spacing: .5px; }
.chiffre { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--orange); }

/* Photo + vignette « Réservation effectuée » qui chevauche (flou d'arrière-plan du site d'origine) */
.visuel { position: relative; max-width: 560px; margin-inline: auto; }
.visuel__resa { position: relative; z-index: 2; width: min(330px, 70%); margin: -110px 0 0 auto; margin-right: -24px; padding: 18px 10px 8px 0; border-radius: 14px; background: rgba(255, 255, 255, .55); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: var(--ombre-carte); animation: flotte 5s ease-in-out infinite alternate; }
@keyframes flotte { from { transform: translateY(-8px) rotate(-1.5deg); } to { transform: translateY(8px) rotate(1.5deg); } }
.photo { position: relative; border-radius: 28px; overflow: hidden; box-shadow: var(--ombre-douce); transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); }
.photo img { width: 100%; transition: transform 1.4s var(--ease); }
.photo:hover img { transform: scale(1.05); }
/* Rideau dégradé qui découvre la photo au défilement */
.photo::after { content: ""; position: absolute; inset: 0; background: var(--degrade); transform-origin: right; transition: transform 1.1s var(--ease) .15s; }
.revele.visible .photo::after, .photo.visible::after { transform: scaleX(0); }

/* ---------- Bandeau défilant (logos des services, photos des installations) : à glisser ---------- */
.defile { position: relative; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.defile.glisse { cursor: grabbing; }
.defile__piste { display: flex; align-items: center; gap: 30px; width: max-content; will-change: transform; }
.defile img { pointer-events: none; -webkit-user-drag: none; }
.defile--logos .defile__piste > * { flex: none; width: 240px; padding: 10px 16px; border-radius: 18px; transition: transform .4s var(--ease), background .3s, box-shadow .4s; }
.defile--logos .defile__piste > *:hover { transform: translateY(-6px) scale(1.04); background: #fff; box-shadow: 0 20px 40px -26px rgba(25, 32, 40, .45); }
.defile--logos img { width: 100%; height: auto; }
.defile--photos .defile__piste > * { flex: none; width: clamp(260px, 30vw, 400px); border-radius: 22px; overflow: hidden; box-shadow: 0 24px 50px -30px rgba(25, 32, 40, .6); transition: transform .5s var(--ease); }
.defile--photos .defile__piste > *:hover { transform: translateY(-6px); }
.defile--photos img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.defile__aide { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 14px; font-size: .82rem; color: #9a9b9c; }
.defile__aide svg { width: 16px; height: 16px; animation: glisse-aide 2.4s ease-in-out infinite; }
@keyframes glisse-aide { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }

/* Grande photo du Pro shop (zoom léger au défilement) */
.vitrine { border-radius: 30px; overflow: hidden; box-shadow: var(--ombre-douce); }
.vitrine img { width: 100%; transform: scale(var(--zoom, 1.08)); transition: transform .2s linear; }

/* ---------- Bloc « Téléchargez notre application » ---------- */
.appli { overflow: hidden; }
.appli__in { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
.appli h2 { margin-bottom: .15em; }
.appli h2 + p.sous-titre { font-family: var(--titre); font-weight: 700; font-size: clamp(1.4rem, 2.8vw, 2.1rem); line-height: 1.2; color: var(--encre); margin-bottom: 24px; }
.atouts { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.atouts li { padding: 8px 16px; border-radius: 100px; background: #fff; border: 1px solid var(--gris-trait); font-size: .95rem; color: var(--texte-fonce); transition: transform .35s var(--ease), border-color .3s, color .3s, background .3s; }
.atouts li:hover { transform: translateY(-3px); border-color: var(--orange); color: var(--orange); }
.appli__tel { position: relative; display: grid; place-items: center; }
.appli__tel::before { content: ""; position: absolute; width: min(420px, 90%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(229, 87, 48, .2), rgba(43, 135, 218, .12) 55%, transparent 70%); animation: pulse 5s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.1); } }
.appli__tel img { position: relative; width: min(300px, 70vw); filter: drop-shadow(0 40px 40px rgba(25, 32, 40, .3)); animation: flotte 6s ease-in-out infinite alternate; }

/* ---------- Bloc « Contactez-nous » (carte + coordonnées, répété en bas des pages) ---------- */
.contact__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.coordonnees { text-align: center; }
.coordonnees__logo { width: 190px; margin: 0 auto 18px; animation: tourne-logo 1.2s var(--ease) both paused; }
.visible .coordonnees__logo { animation-play-state: running; }
@keyframes tourne-logo { from { opacity: 0; transform: rotate(-160deg) scale(.6); } }
.coordonnees__logo:hover { animation: rebond-logo .9s var(--ease); }
@keyframes rebond-logo { 30% { transform: scale(1.08) rotate(-8deg); } 60% { transform: scale(.97) rotate(4deg); } }
.coordonnees .surtitre { display: flex; justify-content: center; margin-bottom: 4px; }
.coordonnees h2, .coordonnees h1 { font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 600; margin: 18px 0 14px; }
.coordonnees address { font-style: normal; display: grid; gap: 6px; font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: var(--encre); font-weight: 500; line-height: 1.4; }
.coordonnees address .nom { margin-bottom: 14px; }
.coordonnees address a { justify-self: center; color: var(--encre); border-bottom: 2px solid transparent; transition: color .3s, border-color .3s; }
.coordonnees address a:hover { color: var(--orange); border-color: var(--orange); }

/* Carte Google chargée au clic */
.carte { position: relative; border-radius: var(--rayon-carte); overflow: hidden; min-height: 560px; background: linear-gradient(135deg, var(--bleu-pale), var(--orange-pale)); box-shadow: var(--ombre-douce); }
.carte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.carte__invite { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; }
.carte__invite::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .4; background-image: linear-gradient(rgba(0, 98, 173, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 98, 173, .12) 1px, transparent 1px); background-size: 34px 34px; }
.carte__epingle { width: 64px; height: 64px; border-radius: 50% 50% 50% 0; background: var(--orange); transform: rotate(-45deg); display: grid; place-items: center; box-shadow: 0 16px 30px -10px rgba(229, 87, 48, .9); animation: epingle 1.6s ease-in-out infinite alternate; }
.carte__epingle i { width: 22px; height: 22px; border-radius: 50%; background: #fff; }
@keyframes epingle { to { transform: rotate(-45deg) translate(6px, -6px); } }
.carte__invite p { margin: 0; font-weight: 600; color: var(--encre); }
.carte__invite small { max-width: 340px; color: #888; line-height: 1.5; }

/* ---------- Tarifs : cartes par sport ---------- */
.tarifs-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 30px); align-items: stretch; }
.tarif { display: flex; flex-direction: column; border-radius: 24px; background: #fff; border: 1px solid var(--gris-trait); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; }
.tarif:hover { transform: translateY(-8px); box-shadow: 0 34px 60px -36px rgba(25, 32, 40, .6); border-color: rgba(229, 87, 48, .35); }
.tarif__img { position: relative; overflow: hidden; }
.tarif__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.2s var(--ease); }
.tarif:hover .tarif__img img { transform: scale(1.07); }
.tarif__corps { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 22px 30px; }
.tarif__titre { font-size: 1.5rem; letter-spacing: 1px; margin: 0 0 4px; }
.tarif .surtitre { margin-bottom: 18px; }
.tarif__prix { display: grid; gap: 8px; margin-bottom: 16px; }
.tarif__prix p { margin: 0; color: var(--texte-fonce); }
.montant { display: inline-block; font-size: 2rem; font-weight: 700; line-height: 1; color: var(--orange); font-variant-numeric: tabular-nums; margin-right: 4px; vertical-align: -3px; }
.tarif__note { margin-top: auto; font-size: .92rem; color: var(--texte); }
.tarif__note p { margin: 0; }
.tarif__note em { font-style: italic; }

/* « Profitez de toutes nos offres, avec nos cartes de crédits ! » */
.offres__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
.offres h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
.offres h2 .ligne { display: block; }
.offres h3 { color: var(--bleu); }

/* Cartes de crédits Bronze / Argent / Or */
.credits { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 30px); }
.credit { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 24px 32px; border-radius: 24px; background: #fff; border: 1px solid var(--gris-trait); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.credit::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--metal, var(--orange)); }
.credit--bronze { --metal: linear-gradient(90deg, #f0a35e, #e5732f); }
.credit--argent { --metal: linear-gradient(90deg, #d8dbe0, #9aa1ab); }
.credit--or { --metal: linear-gradient(90deg, #f7d64a, #e5a70c); }
.credit:hover { transform: translateY(-8px); box-shadow: 0 34px 60px -36px rgba(25, 32, 40, .6); }
.credit h3 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 10px; }
.credit__piece { width: 120px; height: 120px; margin: 4px 0 12px; perspective: 600px; }
.credit__piece img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform 1s var(--ease); }
.credit:hover .credit__piece img { transform: rotateY(360deg); }
.credit__valeur { font-size: clamp(2.4rem, 4vw, 3rem); font-weight: 700; line-height: 1; color: var(--nuit); margin: 0 0 6px; font-variant-numeric: tabular-nums; }
.credit__taux { margin: 0 0 16px; font-weight: 600; color: var(--bleu); }
.credit__offre { margin: 0 0 6px; }
.credit__offre strong { color: var(--nuit); }
.jauge { width: 100%; height: 10px; border-radius: 10px; background: var(--gris-clair); overflow: hidden; margin: 10px 0 6px; }
.jauge span { display: block; height: 100%; width: 0; border-radius: 10px; background: var(--degrade); transition: width 1.6s var(--ease) .3s; }
.visible .jauge span { width: var(--valeur); }
.credit__bonus { display: inline-block; margin: 6px 0 14px; padding: 4px 14px; border-radius: 100px; background: var(--orange-pale); color: var(--orange); font-weight: 700; }
.credit__note { margin: auto 0 0; font-size: .92rem; font-style: italic; }

/* ---------- Installations (page Contact) ---------- */
.installations .surtitre { display: flex; justify-content: center; }

/* ---------- Mentions légales ---------- */
.hero-page { position: relative; padding: calc(var(--entete-h) + var(--bandeau-h) + 50px) 0 clamp(30px, 4vw, 50px); overflow: hidden; isolation: isolate; }
.hero-page::before { content: ""; position: absolute; z-index: -1; width: 600px; height: 600px; right: -200px; top: -240px; border-radius: 50%; background: radial-gradient(circle, rgba(43, 135, 218, .18), transparent 65%); animation: halo 11s ease-in-out infinite alternate; pointer-events: none; }
.sommaire { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.sommaire a { padding: 8px 18px; border-radius: 100px; border: 1.5px solid var(--gris-trait); font-weight: 600; font-size: .92rem; color: var(--bleu); transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease); }
.sommaire a:hover, .sommaire a.actif { background: var(--bleu); border-color: var(--bleu); color: #fff; transform: translateY(-2px); }
.legal { padding-bottom: clamp(50px, 7vw, 90px); }
.legal__partie { padding-top: clamp(30px, 4vw, 50px); }
.legal__partie > h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); padding-bottom: 14px; margin-bottom: 22px; border-bottom: 1px solid var(--gris-trait); position: relative; }
.legal__partie > h2::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 90px; height: 4px; border-radius: 4px; background: var(--degrade); }
.article { padding: 22px 24px; margin-bottom: 14px; border-radius: 18px; background: var(--gris-clair); border: 1px solid transparent; transition: background .3s, border-color .3s, box-shadow .4s; color: #444; }
.article:hover { background: #fff; border-color: var(--gris-trait); box-shadow: 0 20px 44px -34px rgba(25, 32, 40, .55); }
.article h3, .article .article__titre { font-size: 1.15rem; color: var(--nuit); }
.article h4, .article .article__sous-titre { font-size: 1rem; color: var(--nuit); margin: .8em 0 .3em; }
.article p:last-child, .article ul:last-child, .article ol:last-child { margin-bottom: 0; }
.article strong, .article b { color: #222; }
.article ul, .article ol { margin: 0 0 1em; padding-left: 22px; }
.article ul ul { margin: 4px 0 6px; }
.article li { margin-bottom: 4px; }
.article li::marker { color: var(--orange); }
.article .maj { font-size: .9rem; color: var(--texte); }
/* Informations à faire confirmer par le club (pages légales) */
.a-confirmer { background: #fff1b8; color: #222; font-weight: 700; padding: 0 .3em; border-radius: 4px; }

/* ---------- Pied de page ---------- */
.pied { position: relative; background: var(--nuit); color: rgba(255, 255, 255, .72); padding: 54px 0 30px; font-size: .95rem; }
.pied::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--degrade); }
.pied__haut { display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: center; padding-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.pied__logo { width: 240px; padding: 14px 18px; border-radius: 16px; background: #fff; transition: transform .5s var(--ease); }
.pied__logo:hover { transform: rotate(-2deg) scale(1.03); }
.reseaux { display: flex; justify-content: center; gap: 14px; }
.reseaux a { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--orange); color: #fff; transition: transform .45s var(--ease), background .3s, box-shadow .3s; }
.reseaux a svg { width: 22px; height: 22px; transition: transform .6s var(--ease); }
.reseaux a:hover { transform: translateY(-4px); box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .6); }
.reseaux a:hover svg { transform: rotate(360deg); }
.reseaux a.fb:hover { background: #3b5998; }
.reseaux a.ig:hover { background: #fc328d; }
.pied__contact { justify-self: end; text-align: right; }
.pied__contact p { margin: 0; font-family: var(--titre); font-weight: 700; font-size: 1.25rem; color: #fff; line-height: 1.4; }
.pied__contact a { color: #fff; border-bottom: 2px solid var(--orange); transition: color .3s; }
.pied__contact a:hover { color: var(--orange); }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 30px; padding-top: 22px; }
.pied__bas p { margin: 0; }
.pied__bas nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.pied a:hover { color: #fff; }
.coeur { display: inline-block; color: var(--orange); animation: bat 1.6s ease-in-out infinite; }
@keyframes bat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.18); } }

/* Retour en haut + bouton flottant « Réserver » (mobile) */
.flottant { position: fixed; z-index: 90; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.haut { width: 48px; height: 48px; border-radius: 50%; background: var(--bleu); color: #fff; display: grid; place-items: center; opacity: 0; transform: translateY(20px); transition: opacity .4s, transform .4s var(--ease), background .3s; pointer-events: none; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); }
.haut.visible { opacity: 1; transform: none; pointer-events: auto; }
.haut:hover { background: var(--orange); }
.haut svg { width: 20px; height: 20px; }
.flottant .bouton { display: none; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6); }

/* Lueur qui suit la souris */
.lueur { --x: 50%; --y: 50%; position: relative; }
.lueur::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(320px circle at var(--x) var(--y), rgba(229, 87, 48, .12), transparent 55%); }
.lueur:hover::after { opacity: 1; }

/* Page 404 */
.page-404 { min-height: 100svh; display: flex; align-items: center; text-align: center; padding: calc(var(--entete-h) + var(--bandeau-h) + 40px) 0 80px; background: radial-gradient(circle at 80% 20%, rgba(43, 135, 218, .14), transparent 45%), radial-gradient(circle at 15% 85%, rgba(229, 87, 48, .12), transparent 45%); }
.page-404 .gros-chiffre { font-weight: 700; font-size: clamp(6rem, 20vw, 12rem); line-height: 1; color: var(--bleu); margin: 0; }
.balle-404 { display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a5f, var(--orange) 60%, #b53b17); position: relative; vertical-align: -.04em; animation: rebond .6s cubic-bezier(.5, 0, .5, 1) infinite alternate; overflow: hidden; }
.balle-404::before { content: ""; position: absolute; inset: 8% -40% 8% 45%; border: .045em solid rgba(255, 255, 255, .9); border-radius: 50%; }
@keyframes rebond { from { transform: translateY(-30px); } to { transform: translateY(8px) scale(1.06, .92); } }

/* ---------- Titres qui montent ---------- */
.ligne-titre { display: block; overflow: hidden; padding-bottom: .08em; }
.ligne-titre > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); }
.visible .ligne-titre > span, .ligne-titre.visible > span { transform: none; }
.ligne-titre + .ligne-titre > span { transition-delay: .1s; }
.ligne-titre + .ligne-titre + .ligne-titre > span { transition-delay: .2s; }
.ligne-titre + .ligne-titre + .ligne-titre + .ligne-titre > span { transition-delay: .3s; }

/* ---------- Apparitions au défilement ---------- */
.revele { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--delai, 0s); }
.revele--gauche { transform: translateX(-60px); }
.revele--droite { transform: translateX(60px); }
.revele--zoom { transform: scale(.93); }
.revele.visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .menu, .entete__actions .bouton { display: none; }
  .burger { display: block; }
  .entete__actions { margin-left: auto; }
  .hero__in, .appli__in, .contact__in, .offres__in { grid-template-columns: 1fr; }
  .hero__texte, .appli__texte, .offres__texte { text-align: center; }
  .hero .surtitre, .appli .surtitre, .offres .surtitre { justify-content: center; }
  .activites li { justify-content: center; text-align: center; padding-left: 16px; }
  .atouts { justify-content: center; }
  .visuel__resa { margin-right: 0; }
  .tarifs-grille, .credits { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .pied__haut { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pied__contact { justify-self: center; text-align: center; }
  .carte { min-height: 440px; }
  .contact__in > .ordre-mobile { order: -1; }
}
@media (max-width: 760px) {
  body { font-size: 15.5px; }
  :root { --entete-h: 70px; --bandeau-h: 30px; }
  .entete__logo img { height: 54px; }
  .entete.reduite .entete__logo img { height: 46px; }
  .flottant .bouton { display: inline-flex; }
  .revele--gauche, .revele--droite { transform: translateY(40px); }
  .carte { min-height: 360px; }
  .visuel__resa { width: 78%; margin-top: -70px; }
  .defile--logos .defile__piste > * { width: 190px; }
  .pied__bas { justify-content: center; text-align: center; }
  .pied__bas nav { justify-content: center; }
  .article { padding: 18px 16px; }
  .bouton { padding: 16px 22px; }
}
@media (max-width: 420px) {
  .hero h1, .hero__ville { font-size: 2.1rem; }
  .hero-page h1 { font-size: 2rem; }
  .boutons .bouton { flex: 1 1 100%; }
  .montant { font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .revele { opacity: 1; transform: none; }
  .ligne-titre > span { transform: none; }
  .photo::after { transform: scaleX(0); }
  .vitrine img { transform: none; }
}

/* Compléments : bouton « Réserver » du menu, bloc Contact placé en haut de page */
.menu a.bouton { margin-left: 10px; padding: 10px 20px; color: #fff; }
.menu a.bouton::after { display: none; }
.menu a.bouton:hover { color: var(--orange); }
.section--haut { padding-top: calc(var(--entete-h) + var(--bandeau-h) + 50px); }
@media (max-width: 520px) {
  .surtitre { gap: 8px; font-size: .72rem; letter-spacing: 1px; white-space: nowrap; }
  .visible .surtitre::before, .surtitre.visible::before, .visible .surtitre--centre::after, .surtitre--centre.visible::after { width: 20px; }
}

/* ---------- Itinéraires (bloc « Contactez-nous ») et formulaire « Écrivez-nous » (page Contact) — 2026-10-26 ---------- */
.itineraires { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 16px; margin-top: 26px; }
.formulaire__in { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.formulaire { padding: clamp(24px, 4vw, 40px); border-radius: var(--rayon-carte); background: #fff; box-shadow: var(--ombre-douce); }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.champ { position: relative; }
.champ--large { grid-column: 1 / -1; }
.champ input, .champ textarea { width: 100%; padding: 22px 16px 10px; border-radius: var(--rayon); border: 1.5px solid var(--gris-trait); background: var(--gris-clair); font: inherit; color: var(--encre); transition: border-color .3s, background .3s, box-shadow .3s; }
.champ textarea { min-height: 150px; resize: vertical; }
.champ label { position: absolute; left: 17px; top: 16px; font-weight: 600; color: #888; pointer-events: none; transform-origin: left top; transition: transform .3s var(--ease), color .3s; }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--bleu); background: #fff; box-shadow: 0 0 0 4px var(--bleu-pale); }
.champ input:focus + label, .champ input:not(:placeholder-shown) + label, .champ textarea:focus + label, .champ textarea:not(:placeholder-shown) + label { transform: translateY(-11px) scale(.74); color: var(--bleu); }
.formulaire .bouton { margin-top: 18px; }
.formulaire .bouton[disabled] { opacity: .6; pointer-events: none; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.message-form { margin-top: 14px; padding: 14px 18px; border-radius: 12px; font-weight: 700; display: none; }
.message-form.ok { display: block; background: rgba(37, 160, 90, .12); color: #17673a; }
.message-form.erreur { display: block; background: #fdecec; color: #b42318; }
.formulaire__rgpd { margin: 12px 0 0; font-size: .85rem; opacity: .85; }
.formulaire__rgpd a { color: var(--orange); text-decoration: underline; }
@media (max-width: 860px) { .formulaire__in { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .champs { grid-template-columns: 1fr; } .itineraires .bouton { flex: 1 1 100%; } }
.menu a.bouton { margin-left: 14px; }   /* « Réserver » tout à droite, détaché des liens */

/* =============================================================================
   HABILLAGE « CIMES » — 2026-10-29 (demande de Fanny : « le design sympa comme
   Cimes Padel », en gardant toutes les photos, les textes et la structure).
   Même esprit que Cimes : Montserrat très grasse, grands titres serrés, bleu nuit
   tiré du logo pour l'en-tête, le haut de l'accueil, le bloc appli et le pied de
   page ; orange du logo pour les boutons pilule ; photos et cartes très arrondies.
   Tout est ici : retirer ce bloc rend l'ancien habillage.
   ============================================================================= */
:root {
  --nuit: #0c2238;            /* bleu nuit (logo assombri) : en-tête, héros, appli, pied */
  --nuit-2: #123150;
  --ciel: #7cc0ff;            /* bleu du logo éclairci, lisible sur le bleu nuit */
  --encre: #0c2238;
  --texte: #4f5b68;
  --texte-fonce: #2c3845;
  --gris-clair: #f2f5f9;
  --titre: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --corps: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --rayon: 999px;
  --rayon-carte: 30px;
}
body { font-weight: 500; color: var(--texte); }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.02em; color: var(--nuit); }
h1 { font-size: clamp(2.8rem, 6.6vw, 5.8rem); line-height: .98; }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.9rem); line-height: 1.02; }
strong, b { color: var(--texte-fonce); }
.surtitre { font-weight: 800; font-size: .74rem; letter-spacing: .26em; color: var(--orange); }
.surtitre .point { background: var(--bleu); }

/* Boutons : pilules orange, passent au bleu nuit au survol (blanc sur fond sombre) */
.bouton { border-radius: 999px; font-weight: 800; font-size: .95rem; letter-spacing: .01em; padding: 17px 30px; }
.bouton:hover { background: var(--nuit); border-color: var(--nuit); color: #fff; box-shadow: 0 16px 30px -14px rgba(12, 34, 56, .6); }
.bouton--contour { color: var(--nuit); border-color: rgba(12, 34, 56, .25); background: transparent; }
.bouton--contour:hover { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.bouton--petit { padding: 11px 20px; font-size: .85rem; }

/* Bandeau du téléphone et en-tête : bleu nuit vitré, liens blancs */
.bandeau { background: #071726; }
.entete::before { background: rgba(12, 34, 56, .72); border-color: transparent; backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
.entete.reduite::before { background: rgba(12, 34, 56, .96); box-shadow: 0 14px 34px -20px rgba(0, 0, 0, .7); }
.entete__logo img { background: #fff; border-radius: 50%; padding: 3px; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .55); }
.menu a { font-weight: 700; font-size: .95rem; color: #fff; }
.menu a::after { background: var(--orange); height: 2px; }
.menu a:hover, .menu a.actif { color: #fff; }
.menu a.bouton { padding: 11px 22px; }
.menu a.bouton:hover { background: #fff; border-color: #fff; color: var(--nuit); }
.burger span { background: #fff; }
.tiroir { background: radial-gradient(circle at 85% 8%, var(--nuit-2) 0, #071726 64%); }

/* Accueil : le haut passe en grand bloc bleu nuit, titre géant, « TENPAD » en filigrane */
.hero { background: radial-gradient(ellipse at 85% 10%, rgba(43, 135, 218, .35), transparent 50%), radial-gradient(ellipse at 5% 95%, rgba(229, 87, 48, .22), transparent 45%), var(--nuit); color: rgba(255, 255, 255, .82); padding-bottom: clamp(110px, 14vw, 190px); }
.hero::before { display: none; }
.hero::after { content: "TENPAD"; left: 50%; right: auto; bottom: -.18em; top: auto; width: auto; height: auto; transform: translateX(-50%); border-radius: 0; filter: none; background: none; animation: none; font: 900 clamp(7rem, 22vw, 21rem)/1 var(--titre); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .1); white-space: nowrap; }
.hero h1 { color: #fff; }
.hero .titre-bleu { color: var(--ciel); }
.hero .surtitre { color: #fff; }
.hero .surtitre .point { background: var(--orange); }
.hero__intro { color: rgba(255, 255, 255, .78); font-size: 1.1rem; }
.hero__intro strong { color: #fff; }
.activites li { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.activites li:hover { background: rgba(255, 255, 255, .1); border-color: rgba(229, 87, 48, .6); box-shadow: 0 20px 40px -26px rgba(0, 0, 0, .8); }
.activites b { color: #fff; }
.activites .chiffre { color: var(--orange); font-weight: 800; }
.hero .bouton:hover { background: #fff; border-color: #fff; color: var(--nuit); }
.hero .photo { border-radius: 34px; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .85); }
.photo, .vitrine, .vitrine img { border-radius: 34px; }
.visuel__resa { border-radius: 20px; }

/* Sections claires */
.section--pale { background: var(--gris-clair); }
.defile--logos .defile__piste > * { border-radius: 22px; }

/* Bloc « Téléchargez notre application » : carte bleu nuit arrondie, comme Cimes */
.appli { background: #fff; padding-inline: clamp(12px, 2vw, 24px); }
.appli__in { width: min(1240px, 100%); padding: clamp(34px, 5vw, 70px) clamp(24px, 5vw, 70px); border-radius: 36px; background: radial-gradient(ellipse at 90% 0%, rgba(43, 135, 218, .35), transparent 55%), var(--nuit); color: rgba(255, 255, 255, .8); overflow: hidden; }
.appli h2 { color: #fff; }
.appli .titre-bleu { color: var(--ciel); }
.appli h2 + p.sous-titre { color: #fff; font-weight: 800; }
.atouts li { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .85); }
.atouts li:hover { color: #fff; border-color: var(--orange); }
.appli .bouton:hover { background: #fff; border-color: #fff; color: var(--nuit); }
.appli__tel::before { background: radial-gradient(circle, rgba(229, 87, 48, .35), rgba(43, 135, 218, .15) 55%, transparent 70%); }

/* Contact, carte, tarifs, crédits : coins plus ronds, titres bleu nuit */
.carte { border-radius: 34px; }
.tarif, .credit { border-radius: 30px; }
.tarif__titre { font-weight: 900; letter-spacing: -.01em; font-size: 1.8rem; }
.montant { font-weight: 900; }
.credit__valeur { font-weight: 900; }
.offres h3 { color: var(--orange); font-weight: 800; }
.formulaire { border-radius: 30px; }

/* Haut des pages légales : bandeau bleu nuit */
.hero-page { background: radial-gradient(ellipse at 90% 0%, rgba(43, 135, 218, .35), transparent 55%), var(--nuit); color: rgba(255, 255, 255, .8); padding-bottom: clamp(40px, 6vw, 70px); }
.hero-page h1, .hero-page h2 { color: #fff; }
.hero-page .sommaire a { color: #fff; border-color: rgba(255, 255, 255, .25); }
.hero-page .sommaire a:hover, .hero-page .sommaire a.actif { background: var(--orange); border-color: var(--orange); }

/* Pied de page : bleu nuit profond */
.pied { background: #071726; }
.haut { background: var(--nuit); }

@media (max-width: 980px) {
  .hero::after { bottom: -.1em; }
  .appli__in { padding: 34px 22px 0; }
}
@media (max-width: 420px) {
  .hero h1 { font-size: 2.45rem; }
}
/* « SAINT-CAST » jamais coupé au trait d'union : la ligne reste entière, taille ajustée */
.hero h1 { font-size: clamp(2.5rem, 5.6vw, 5.2rem); }
.hero h1 .ligne-titre:last-child { white-space: nowrap; }
.hero-page .titre-bleu { color: var(--ciel); }
@media (max-width: 360px) { .hero h1 { font-size: 2.2rem; } }
.article a[href^="mailto:"] { overflow-wrap: anywhere; }   /* très petits écrans : l'adresse e-mail ne déborde pas */