![flyer-tourisme-qr-code]()
![]()
/* Police système Apple */
:root {
--mac-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Helvetica Neue", Arial, sans-serif;
--mac-surface: rgba(255, 255, 255, 0.6);
--mac-border: rgba(0, 0, 0, 0.08);
--mac-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
--mac-text: #111;
--mac-subtle: #5f5f5f;
--mac-blue: #0a84ff; /* macOS accent */
--mac-blue-pressed: #0669cc;
}
/* Backdrop flouté et légèrement assombri */
.macos-swal-container {
backdrop-filter: blur(8px);
background: rgba(0, 0, 0, 0.2);
}
/* La “feuille” translucide */
.macos-swal {
font-family: var(--mac-font);
background: var(--mac-surface);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border: 1px solid var(--mac-border);
border-radius: 16px;
box-shadow: var(--mac-shadow);
padding: 18px 18px 12px;
width: min(520px, 92vw);
}
/* Titre et corps */
.macos-swal-title {
font-weight: 600;
font-size: 17px;
color: var(--mac-text);
letter-spacing: -0.01em;
margin: 6px 0 8px;
}
.macos-swal-body {
font-size: 16px;
line-height: 1.45;
color: var(--mac-subtle);
margin-bottom: 10px;
}
/* Actions alignées à droite comme sur macOS */
.macos-swal-actions {
gap: 8px !important;
justify-content: flex-end !important;
margin-top: 6px;
}
/* Boutons type macOS (pilules, très légers) */
.macos-swal-btn {
border-radius: 999px !important;
padding: 7px 14px !important;
font-size: 13px !important;
line-height: 1.1 !important;
border: 1px solid var(--mac-border) !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 0.5px 0 rgba(0,0,0,0.06);
transition: transform .06s ease, background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.macos-swal-btn:active { transform: translateY(1px); }
/* Primaire (bleu Apple) */
.macos-swal-btn-primary {
background: var(--mac-blue) !important;
color: #fff !important;
border-color: rgba(10,132,255,0.5) !important;
}
.macos-swal-btn-primary:hover { filter: brightness(1.03); }
.macos-swal-btn-primary:active { background: var(--mac-blue-pressed) !important; }
/* Secondaire (ton clair) */
.macos-swal-btn-secondary {
background: rgba(255,255,255,0.7) !important;
color: var(--mac-text) !important;
}
.macos-swal-btn-secondary:hover { background: rgba(255,255,255,0.9) !important; }
/* Animations d’apparition/disparition */
@keyframes macos-zoom-fade-in {
from { opacity: 0; transform: scale(0.98); }
to { opacity: 1; transform: scale(1); }
}
@keyframes macos-zoom-fade-out {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(0.98); }
}
.macos-swal-animate-in { animation: macos-zoom-fade-in .16s ease-out both; }
.macos-swal-animate-out { animation: macos-zoom-fade-out .12s ease-in both; }
/* Mode sombre auto (comme macOS) */
@media (prefers-color-scheme: dark) {
:root {
--mac-surface: rgba(22, 22, 24, 0.6);
--mac-border: rgba(255, 255, 255, 0.08);
--mac-text: #f5f5f7;
--mac-subtle: #c2c2c2;
--mac-shadow: 0 16px 50px rgba(0, 0, 0, 0.6);
}
.macos-swal-container { background: rgba(0,0,0,0.35); }
}
/* Vars + police système pour tout viewport */
:root {
--mac-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Helvetica Neue", Arial, sans-serif;
--mac-surface: rgba(255,255,255,0.85);
--mac-border: rgba(0,0,0,0.22);
--mac-border-hover: rgba(0,0,0,0.35);
--mac-shadow: 0 16px 50px rgba(0,0,0,0.15);
--mac-text: #111;
--mac-subtle: #555;
--mac-blue: #0a84ff;
--mac-blue-pressed: #0669cc;
}
/* Container + popup – appliqué partout (pas de @media) */
html .swal2-container.macos-swal-container {
backdrop-filter: blur(8px);
background: rgba(0,0,0,0.22);
}
html .swal2-popup.macos-swal {
font-family: var(--mac-font);
background: var(--mac-surface);
-webkit-backdrop-filter: saturate(180%) blur(14px);
backdrop-filter: saturate(180%) blur(14px);
border: 1px solid var(--mac-border);
border-radius: 16px;
box-shadow: var(--mac-shadow);
padding: 18px 18px 12px;
/* largeur adaptable desktop & mobile */
width: clamp(420px, 48vw, 560px);
max-width: 92vw;
}
/* Titres/texte */
html .macos-swal-title {
font-weight: 600;
font-size: 17px;
color: var(--mac-text);
margin: 6px 0 8px;
}
html .macos-swal-body {
font-size: 16px;
line-height: 1.45;
color: var(--mac-subtle);
}
/* Grille labels à gauche (tous formats) */
html .macos-swal .macos-form-grid {
display: grid;
grid-template-columns: 1fr; /* ← une seule colonne */
gap: 0px 0; /* petit espace entre label et input */ /* labels visibles aussi en desktop */
gap: 10px 14px;
align-items: center;
margin-top: 10px;
}
html .macos-swal .macos-form-grid label {
font-size: 13px;
color: #333;
text-align: right;
font-weight: 500;
user-select: none;
}
/* Inputs avec contour TOUJOURS visible (spécificité ↑) */
html .swal2-popup.macos-swal .macos-input {
width: 100%;
font-size: 16px;
padding: 6px 10px;
border: 1px solid var(--mac-border) !important; /* force le contour au repos */
border-radius: 8px;
background: rgba(255,255,255,0.95);
color: #111;
box-shadow: 0 1px 1px rgba(0,0,0,0.05);
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
html .swal2-popup.macos-swal .macos-input:hover {
border-color: var(--mac-border-hover) !important;
background: #fff;
}
html .swal2-popup.macos-swal .macos-input:focus {
outline: none;
border-color: var(--mac-blue) !important;
box-shadow: 0 0 0 2px rgba(10,132,255,0.28);
background: #fff;
}
/* Ligne d’aide */
html .macos-swal .macos-form-note {
grid-column: 1 / -1;
font-size: 12px;
color: #666;
text-align: center;
margin-top: 8px;
}
/* Actions */
html .macos-swal-actions {
gap: 8px !important;
justify-content: flex-end !important;
}
/* Boutons */
html .macos-swal-btn {
border-radius: 999px !important;
padding: 7px 14px !important;
font-size: 13px !important;
border: 1px solid var(--mac-border) !important;
transition: transform .06s ease, filter .15s ease;
}
html .macos-swal-btn:active { transform: translateY(1px); }
html .macos-swal-btn-primary {
background: var(--mac-blue) !important;
color: #fff !important;
border-color: rgba(10,132,255,0.5) !important;
}
html .macos-swal-btn-primary:hover { filter: brightness(1.04); }
html .macos-swal-btn-primary:active { background: var(--mac-blue-pressed) !important; }
html .macos-swal-btn-secondary {
background: rgba(255,255,255,0.9) !important;
color: var(--mac-text) !important;
}
/* Animations */
@keyframes macos-zoom-fade-in { from {opacity:0; transform:scale(.98)} to {opacity:1; transform:scale(1)} }
@keyframes macos-zoom-fade-out{ from {opacity:1; transform:scale(1)} to {opacity:0; transform:scale(.98)} }
html .macos-swal-animate-in { animation: macos-zoom-fade-in .16s ease-out both; }
html .macos-swal-animate-out { animation: macos-zoom-fade-out .12s ease-in both; }
/* Mode sombre automatique (tous formats, basé sur préférence OS) */
@media (prefers-color-scheme: dark) {
:root {
--mac-surface: rgba(22,22,24,0.78);
--mac-border: rgba(255,255,255,0.12);
--mac-border-hover: rgba(255,255,255,0.24);
--mac-text: #f5f5f7;
--mac-subtle: #c2c2c2;
--mac-shadow: 0 18px 60px rgba(0,0,0,0.6);
}
html .swal2-container.macos-swal-container { background: rgba(0,0,0,0.35); }
}
/* Grille labels à gauche */
.swal2-container .swal2-popup.macos-swal .macos-form-grid {
display: grid;
grid-template-columns: 1fr; /* ← une seule colonne */
gap: 0px 0; /* petit espace entre label et input */
gap: 10px 14px;
align-items: center;
margin-top: 8px;
}
/* Labels */
.swal2-container .swal2-popup.macos-swal .macos-form-grid label {
font-size: 13px;
color: #333;
text-align: right;
font-weight: 500;
}
/* Inputs — on écrase les styles par défaut */
.swal2-container .swal2-popup.macos-swal .macos-input,
.swal2-container .swal2-popup.macos-swal .swal2-input.macos-input {
width: 100% !important;
font-size: 16px !important;
padding: 6px 10px !important;
border: 1px solid rgba(0,0,0,0.25) !important; /* contour visible au repos */
border-radius: 8px !important;
background: rgba(255,255,255,0.95) !important;
color: #111 !important;
box-shadow: 0 1px 1px rgba(0,0,0,0.05) !important;
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
}
.swal2-container .swal2-popup.macos-swal .macos-input:hover {
border-color: rgba(0,0,0,0.35) !important;
background: #fff !important;
}
.swal2-container .swal2-popup.macos-swal .macos-input:focus {
outline: none !important;
border-color: #0a84ff !important;
box-shadow: 0 0 0 2px rgba(10,132,255,0.28) !important;
background: #fff !important;
}
/* Note */
.swal2-container .swal2-popup.macos-swal .macos-form-note {
grid-column: 1 / -1;
font-size: 12px;
color: #666;
text-align: center;
margin-top: 6px;
}
/* Mise en forme du formulaire (labels à gauche) */
.swal2-container .swal2-popup.macos-swal #formSouscription {
display: grid;
grid-template-columns: 1fr; /* ← une seule colonne */
gap: 0px 0; /* petit espace entre label et input */
gap: 10px 14px;
align-items: center;
margin-top: 8px;
}
/* Labels */
.swal2-container .swal2-popup.macos-swal #formSouscription label {
font-size: 13px;
color: #333;
text-align: right;
font-weight: 500;
}
/* Inputs — SANS classes, on cible par type & scope du formulaire */
.swal2-container .swal2-popup.macos-swal #formSouscription input[type="text"],
.swal2-container .swal2-popup.macos-swal #formSouscription input[type="email"],
.swal2-container .swal2-popup.macos-swal #formSouscription input,
.swal2-container .swal2-popup.macos-swal #formSouscription select,
.swal2-container .swal2-popup.macos-swal #formSouscription textarea {
width: 100%;
font-size: 16px;
padding: 6px 10px;
border: 1px solid rgba(0,0,0,0.25);
border-radius: 8px;
background: rgba(255,255,255,0.95);
color: #111;
box-shadow: 0 1px 1px rgba(0,0,0,0.05);
transition: border-color .15s, box-shadow .15s, background .15s;
}
.swal2-container .swal2-popup.macos-swal #formSouscription input:hover,
.swal2-container .swal2-popup.macos-swal #formSouscription select:hover,
.swal2-container .swal2-popup.macos-swal #formSouscription textarea:hover {
border-color: rgba(0,0,0,0.35);
background: #fff;
}
.swal2-container .swal2-popup.macos-swal #formSouscription input:focus,
.swal2-container .swal2-popup.macos-swal #formSouscription select:focus,
.swal2-container .swal2-popup.macos-swal #formSouscription textarea:focus {
outline: none;
border-color: #0a84ff;
box-shadow: 0 0 0 2px rgba(10,132,255,0.28);
background: #fff;
}
/* Ligne d’aide */
.swal2-container .swal2-popup.macos-swal #formSouscription .macos-form-note {
grid-column: 1 / -1;
font-size: 12px;
color: #666;
text-align: center;
margin-top: 6px;
}
.swal2-container .swal2-popup.macos-swal #formSouscription input[type="text"],
.swal2-container .swal2-popup.macos-swal #formSouscription input[type="email"],
.swal2-container .swal2-popup.macos-swal #formSouscription input {
width: 100%;
font-size: 16px;
padding: 6px 10px;
border: 1px solid rgba(0,0,0,0.25);
border-radius: 8px;
background: rgba(255,255,255,0.95);
color: #111;
box-shadow: inset 0 0 0 0 rgba(10,132,255,0);
transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
/* survol léger */
.swal2-container .swal2-popup.macos-swal #formSouscription input:hover {
border-color: rgba(0,0,0,0.35);
background: #fff;
}
/* focus sans agrandissement */
.swal2-container .swal2-popup.macos-swal #formSouscription input:focus {
outline: none;
border-color: #0a84ff;
/* on garde border-width identique : 1px */
box-shadow: 0 0 0 2px rgba(10,132,255,0.25); /* halo sans décalage */
background: #fff;
}
