@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("polices/Inter-Regular.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("polices/Inter-SemiBold.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("polices/Inter-Bold.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url("polices/Manrope-Regular.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url("polices/Manrope-SemiBold.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url("polices/Manrope-Bold.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url("polices/Manrope-ExtraBold.woff2") format("woff2")}

:root {
    --encre: #0B0F14;
    --anthracite: #1F2937;
    --blanc: #FFFFFF;
    --brume: #F4F5F7;
    --ardoise: #4B5563;
    --accent: #0F766E;
    --accent-n: #115E59;
    --accent-p: #E6F4F1;
    --turq: #2DD4BF;
    --succes: #15803D;
    --succes-f: #DCFCE7;
    --succes-t: #14532D;
    --alerte-t: #78350F;
    --alerte-f: #FEF3C7;
    --alerte-b: #B45309;
    --erreur: #B42318;
    --erreur-f: #FEE4E2;
    --erreur-t: #7A1B13;
    --bord: #E5E7EB;
    --champ: #6B7280;
    --police-texte: "Inter", system-ui, "Segoe UI", Arial, sans-serif;
    --police-titre: "Manrope", "Inter", system-ui, "Segoe UI", Arial, sans-serif;
    --ombre: 0 1px 2px rgba(11, 15, 20, .06), 0 4px 12px rgba(11, 15, 20, .04);
    --ombre-haute: 0 2px 4px rgba(11, 15, 20, .08), 0 8px 24px rgba(11, 15, 20, .08);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--blanc);
    color: var(--encre);
    font: 400 1rem/1.6 var(--police-texte);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3 {
    font-family: var(--police-titre);
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 0 0 12px;
    color: var(--encre);
}
h1 { font-weight: 800; font-size: clamp(2.25rem, 6vw, 3.5rem); }
h2 { font-weight: 800; font-size: clamp(1.625rem, 4vw, 2.25rem); }
h3 { font-weight: 700; font-size: 1.25rem; }
p { margin: 0 0 12px; }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-n); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sombre :focus-visible, .final :focus-visible, .pied :focus-visible, .auth-panneau :focus-visible { outline-color: var(--turq); }

.sr-titre {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.lien-evitement {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 20;
    background: var(--blanc);
    color: var(--encre);
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 0 0 10px 0;
}
.lien-evitement:focus { left: 0; }

.conteneur { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.etroit { max-width: 760px; }

main { flex: 1; }
main:focus { outline: none; }
.page { padding-top: 32px; padding-bottom: 64px; }

.ico {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex: none;
    background: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.ico-info { -webkit-mask-image: url("img/icones/info.svg"); mask-image: url("img/icones/info.svg"); }
.ico-alerte { -webkit-mask-image: url("img/icones/circle-alert.svg"); mask-image: url("img/icones/circle-alert.svg"); }
.ico-ok { -webkit-mask-image: url("img/icones/circle-check.svg"); mask-image: url("img/icones/circle-check.svg"); }
.ico-bouclier { -webkit-mask-image: url("img/icones/shield-check.svg"); mask-image: url("img/icones/shield-check.svg"); }
.ico-fichier { -webkit-mask-image: url("img/icones/file-text.svg"); mask-image: url("img/icones/file-text.svg"); }
.ico-mail { -webkit-mask-image: url("img/icones/mail.svg"); mask-image: url("img/icones/mail.svg"); }
.ico-calendrier { -webkit-mask-image: url("img/icones/calendar.svg"); mask-image: url("img/icones/calendar.svg"); }
.ico-plus { -webkit-mask-image: url("img/icones/plus.svg"); mask-image: url("img/icones/plus.svg"); }
.ico-fleche { -webkit-mask-image: url("img/icones/arrow-right.svg"); mask-image: url("img/icones/arrow-right.svg"); }

.entete { background: var(--blanc); border-bottom: 1px solid var(--bord); }
.entete-contenu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding-top: 12px;
    padding-bottom: 12px;
}
.marque {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font: 800 1.25rem var(--police-titre);
    letter-spacing: -.02em;
    color: var(--encre);
    text-decoration: none;
}
.marque:hover { color: var(--encre); }
.marque img { width: 36px; height: 36px; }

.menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 20px;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
    font-size: .9375rem;
}
.menu a:not(.btn), .nav-bouton {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2px;
    color: var(--ardoise);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.menu a:not(.btn):hover, .nav-bouton:hover { color: var(--encre); border-bottom-color: var(--bord); }
.menu a:not(.btn)[aria-current="page"] { color: var(--encre); font-weight: 600; border-bottom-color: var(--encre); }
.menu form { margin: 0; }
.nav-bouton { background: none; border: 0; border-bottom: 2px solid transparent; font: inherit; cursor: pointer; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border: 1.5px solid var(--encre);
    border-radius: 10px;
    font: 600 .9375rem/1.2 var(--police-texte);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}
.btn-p { background: var(--encre); color: #fff; }
.menu a.btn[aria-current="page"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--encre); }
.btn-p:hover { background: var(--anthracite); border-color: var(--anthracite); color: #fff; }
.btn-s { background: #fff; color: var(--encre); }
.btn-s:hover { background: var(--brume); color: var(--encre); }
.btn-blanc { background: #fff; color: var(--encre); border-color: #fff; }
.btn-blanc:hover { background: var(--brume); color: var(--encre); }
.btn-danger { background: #fff; color: var(--erreur); border-color: var(--erreur); }
.btn-danger:hover { background: var(--erreur-f); color: var(--erreur-t); }
.btn-danger-p { background: var(--erreur); color: #fff; border-color: var(--erreur); }
.btn-danger-p:hover { background: var(--erreur-t); border-color: var(--erreur-t); color: #fff; }
.btn:disabled, .btn[aria-disabled="true"] {
    background: var(--bord);
    border-color: var(--bord);
    color: var(--ardoise);
    cursor: not-allowed;
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }

.bandeau {
    background: var(--alerte-f);
    color: var(--alerte-t);
    font-size: .9375rem;
    padding: 10px 0;
    border-left: 4px solid var(--alerte-b);
}
.bandeau .conteneur { display: flex; gap: 10px; align-items: flex-start; }
.bandeau .ico { margin-top: 3px; }
.bandeau p { margin: 0; }

.message {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 24px auto 0;
    max-width: calc(1040px - 32px);
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--succes-f);
    color: var(--succes-t);
    font-weight: 600;
}
.message::before {
    content: "";
    width: 20px;
    height: 20px;
    flex: none;
    background: currentColor;
    -webkit-mask: url("img/icones/circle-check.svg") center / contain no-repeat;
    mask: url("img/icones/circle-check.svg") center / contain no-repeat;
}

.pastille {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--brume);
    color: var(--encre);
    font-size: .8125rem;
    font-weight: 600;
}
.pastille i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; }
.exemple {
    display: inline-block;
    background: var(--alerte-f);
    border: 1px solid var(--alerte-b);
    color: var(--alerte-t);
    font-size: .75rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
    vertical-align: middle;
}
.bientot {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--alerte-f);
    border: 1px solid var(--alerte-b);
    color: var(--alerte-t);
    font-size: .75rem;
    font-weight: 700;
}
.pastille-grise {
    display: inline-block;
    background: var(--brume);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: .8125rem;
    color: var(--ardoise);
}
.petit { font-size: .875rem; color: var(--ardoise); }
.sous { color: var(--ardoise); text-align: center; margin: 0 0 32px; }

.section { padding: 64px 0; }
.section > .conteneur > h2 { text-align: center; }
.gris { background: var(--brume); }

.hero { text-align: center; padding: 72px 0 32px; }
.hero h1 { margin: 18px auto 16px; max-width: 760px; }
.hero .signature { color: var(--ardoise); font-size: 1.125rem; max-width: 560px; margin: 0 auto 6px; }
.hero .actions { justify-content: center; margin: 28px 0 10px; }
.hero-img { max-width: 760px; width: 100%; margin: 32px auto 0; }

.garanties { background: var(--brume); padding: 22px 0; }
.garanties ul { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.garanties li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 8px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--bord);
    font-size: .8125rem;
    font-weight: 600;
}
.rond {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-p);
    color: var(--accent-n);
}
.rond .ico { width: 18px; height: 18px; }

.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.liste-nue { list-style: none; margin: 0; padding: 0; }

.carte {
    background: #fff;
    border: 1px solid var(--bord);
    border-radius: 24px;
    padding: 28px;
    box-shadow: var(--ombre);
}
.carte:hover { box-shadow: var(--ombre-haute); }
.carte h2, .carte h3 { text-align: left; }
.carte h2 { font-size: 1.375rem; }
.etape img { border-radius: 20px; margin-bottom: 18px; width: 100%; }
.num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: var(--encre);
    color: #fff;
    font-weight: 700;
}
.pour-qui { margin-top: 24px; }
.coches, .croix { list-style: none; margin: 12px 0 0; padding: 0; color: var(--ardoise); }
.coches li, .croix li { position: relative; padding: 4px 0 4px 28px; }
.coches li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 11px;
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(-45deg);
}
.croix li::before, .croix li::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 17px;
    width: 12px;
    height: 2px;
    background: var(--erreur);
}
.croix li::before { transform: rotate(45deg); }
.croix li::after { transform: rotate(-45deg); }

.tarif { display: flex; flex-direction: column; }
.tarif h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tarif .prix {
    font: 800 2.25rem/1.15 var(--police-titre);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    margin: 8px 0 2px;
}
.tarif .prix small { font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.tarif .corps { flex: 1; color: var(--ardoise); font-size: .9375rem; margin: 12px 0 24px; }
.tarif .coches { margin-bottom: 24px; flex: 1; font-size: .9375rem; }
.reco { border: 2px solid var(--accent); }
.reco .pastille { background: var(--accent-p); color: var(--accent-n); }
.info {
    max-width: 520px;
    margin: 0 auto 28px;
    padding: 10px 16px;
    border-radius: 12px;
    background: var(--brume);
    color: var(--ardoise);
    font-size: .875rem;
    text-align: center;
}
.gris .info { background: #fff; }
.a-la-carte { margin-top: 40px; }
.a-la-carte h2 { text-align: left; font-size: 1.625rem; }
.mentions-prix { margin-top: 24px; text-align: center; }

.questions { margin-top: 48px; }
.questions h2 { text-align: center; }
details {
    background: #fff;
    border: 1px solid var(--bord);
    border-radius: 16px;
    padding: 16px 20px;
    margin: 0 auto 10px;
    max-width: 720px;
}
summary { cursor: pointer; font-weight: 600; min-height: 28px; }
details p { color: var(--ardoise); margin: 10px 0 0; }

.final {
    background: var(--encre);
    color: #fff;
    text-align: center;
    border-radius: 24px;
    padding: 56px 24px;
    margin: 0 16px 64px;
}
.final h2 { color: #fff; }
.final p { color: #D1D5DB; }
.final img { width: 48px; height: 48px; margin: 0 auto 16px; }
.final .btn { margin-top: 8px; }

.pied { background: var(--encre); color: #D1D5DB; padding: 32px 0; font-size: .875rem; }
.pied a { color: #fff; margin-right: 16px; display: inline-block; padding: 8px 0; }
.pied a:hover { color: var(--turq); }
.pied-contenu { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.pied img { width: 36px; height: 36px; }
.pied p { margin: 0 0 4px; }
.pied a.pied-don, .pied a.pied-don:hover { color: var(--encre); padding: 8px 16px; margin-right: 8px; }
.encadre-lancement {
    max-width: 760px;
    margin: 24px auto 40px;
    padding: 24px;
    border: 1px solid var(--brume);
    border-radius: 12px;
    background: #fff;
}
.encadre-lancement h2, .encadre-lancement h3 { text-align: left; margin-top: 0; }
.encadre-lancement h3 { margin-top: 24px; font-size: 1.25rem; }

.champ { margin-top: 18px; }
.champ label { display: block; font-weight: 600; margin-bottom: 6px; }
.requis { font-size: .875rem; font-weight: 400; color: var(--ardoise); }
.aide { margin-top: 6px; font-size: .875rem; color: var(--ardoise); }
.aide ul { margin: 4px 0 0; padding-left: 20px; }
.champ input:not([type="checkbox"]):not([type="file"]):not([type="hidden"]),
.champ textarea,
.champ select {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1.5px solid var(--champ);
    border-radius: 10px;
    background: #fff;
    color: var(--encre);
    font: inherit;
}
.champ textarea { min-height: 120px; resize: vertical; }
.champ input[type="file"] {
    width: 100%;
    padding: 12px;
    border: 1.5px dashed var(--champ);
    border-radius: 10px;
    background: var(--brume);
    font: inherit;
}
.champ input:focus, .champ textarea:focus, .champ select:focus { border-color: var(--accent); }
.champ.en-erreur input:not([type="checkbox"]),
.champ.en-erreur textarea,
.champ.en-erreur select { border: 2px solid var(--erreur); }
.case-ligne { display: flex; gap: 12px; align-items: flex-start; }
.case-ligne input { width: 24px; height: 24px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.case-ligne label { margin: 0; }
.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.errorlist {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    color: var(--erreur);
    font-size: .875rem;
    font-weight: 600;
}
.errorlist li { display: flex; gap: 8px; align-items: flex-start; }
.errorlist li::before {
    content: "";
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex: none;
    background: currentColor;
    -webkit-mask: url("img/icones/circle-alert.svg") center / contain no-repeat;
    mask: url("img/icones/circle-alert.svg") center / contain no-repeat;
}
.resume-erreurs {
    margin: 0 0 24px;
    padding: 16px 20px;
    border-radius: 16px;
    background: var(--erreur-f);
    color: var(--erreur-t);
}
.resume-erreurs p { margin: 0 0 6px; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.resume-erreurs ul { margin: 0; padding-left: 28px; }
.resume-erreurs a { color: var(--erreur-t); font-weight: 600; }

.formulaire .carte { margin-bottom: 16px; }
.formulaire .carte:hover { box-shadow: var(--ombre); }
.formulaire .carte > h2 { margin-bottom: 0; }
.formulaire .carte > .champ:first-of-type { margin-top: 12px; }
.formulaire .actions { margin-top: 8px; }

.auth {
    display: grid;
    grid-template-columns: minmax(0, 480px) 1fr;
    min-height: 640px;
    margin: 24px 0 64px;
    border: 1px solid var(--bord);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--ombre);
}
.auth-panneau { background: var(--encre); }
.auth-panneau img { width: 100%; height: 100%; object-fit: cover; }
.auth-form { align-self: center; width: 100%; max-width: 460px; padding: 48px; }
.auth-form h1 { font-size: 2rem; }
.auth-form .btn { width: 100%; margin-top: 24px; }
.auth-form .liens { margin-top: 20px; font-size: .9375rem; color: var(--ardoise); }
.auth-form .liens a { display: inline-block; padding: 6px 0; }
.page-etroite { max-width: 520px; margin: 24px auto 64px; }
.page-etroite h1 { font-size: 2rem; }

.dash-tete, .fiche-tete {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin: 8px 0 24px;
}
.dash-tete h1, .fiche-tete h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0; }
.fiche-tete { align-items: flex-start; }

.vide { text-align: center; padding: 48px 24px; }
.vide img { margin: 0 auto 12px; }
.vide h2 { font-size: 1.5rem; text-align: center; }
.vide p { color: var(--ardoise); max-width: 420px; margin: 0 auto 20px; }
.vide-section { padding: 16px; text-align: center; }
.vide-section img { margin: 0 auto 4px; max-width: 220px; }
.vide-section p { color: var(--ardoise); margin: 0 auto 6px; max-width: 460px; }

.defil { overflow-x: auto; border-radius: 16px; }
.tableau {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--bord);
    border-radius: 16px;
    overflow: hidden;
    font-size: .9375rem;
}
.tableau caption { text-align: left; font-weight: 600; padding: 0 0 10px; }
.tableau thead th { background: var(--brume); text-align: left; padding: 12px 16px; font-weight: 700; white-space: nowrap; }
.tableau tbody th, .tableau td { padding: 14px 16px; border-top: 1px solid var(--bord); text-align: left; }
.tableau tbody th { font-weight: 600; }
.tableau tbody tr:nth-child(even) { background: var(--brume); }
.tableau .mont { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau td a { display: inline-block; padding: 8px 0; }

.retour { display: inline-block; margin-top: 8px; padding: 8px 0; font-size: .9375rem; }
.fiche { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.carte-titre { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; }
.carte-titre .rond { width: 36px; height: 36px; }
.carte-titre .rond .ico { width: 20px; height: 20px; }
.sombre { background: var(--encre); color: #fff; border-color: var(--encre); }
.sombre h2 { color: #fff; }
.sombre .petit, .sombre p { color: #D1D5DB; }
.sombre .rond { background: var(--anthracite); color: var(--turq); }
.donnees { margin: 0; }
.sombre .donnees dt { color: #D1D5DB; }
.donnees dt { margin-top: 12px; font-size: .875rem; font-weight: 600; color: var(--ardoise); }
.donnees dt:first-child { margin-top: 0; }
.donnees dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.donnees .montant-fort { font: 800 1.75rem/1.2 var(--police-titre); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fichier {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--brume);
}
.fichier .ico { color: var(--accent); width: 22px; height: 22px; }
.section-fiche { margin-bottom: 16px; }
.orient {
    margin: 16px 0 0;
    padding: 10px 14px;
    border-left: 4px solid var(--alerte-b);
    border-radius: 0 12px 12px 0;
    background: var(--alerte-f);
    color: var(--alerte-t);
    font-size: .9375rem;
}
.suppr { margin-top: 24px; }

.texte-long h2 { font-size: 1.5rem; margin-top: 32px; }
.texte-long ol, .texte-long ul { padding-left: 22px; }
.texte-long li { margin-bottom: 6px; }
.texte-long dt { font-weight: 600; margin-top: 12px; }
.texte-long dd { margin: 2px 0 0; color: var(--ardoise); }
.titre-page { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 8px; }
.chapeau { font-size: 1.125rem; color: var(--ardoise); max-width: 640px; }

.champ input:disabled { background: var(--brume); color: var(--encre); -webkit-text-fill-color: var(--encre); opacity: 1; cursor: not-allowed; }

.cal-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cal-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 8px; }
.cal-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-weight: 600; }
.cal-grille { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-grille caption { text-align: left; font-weight: 700; font-size: 1.125rem; padding: 0 0 8px; }
.cal-grille th { font-size: .75rem; font-weight: 700; color: var(--ardoise); text-align: center; padding: 6px 0; }
.cal-grille td { height: 60px; padding: 4px 2px; border: 1px solid var(--bord); vertical-align: top; text-align: center; font-size: .875rem; }
.cal-vide { background: var(--brume); }
.cal-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-variant-numeric: tabular-nums; }
.cal-relance { background: var(--accent-p); }
.cal-marque { display: flex; align-items: center; justify-content: center; gap: 3px; margin-top: 2px; font-size: .75rem; font-weight: 700; color: var(--accent-n); white-space: nowrap; }
.cal-marque i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.cal-auj { box-shadow: inset 0 0 0 2px var(--encre); }
.cal-auj .cal-num { background: var(--encre); color: #fff; font-weight: 700; }
.cal-legende { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0 0; padding: 0; list-style: none; font-size: .875rem; color: var(--ardoise); }
.cal-legende li { display: flex; align-items: center; gap: 6px; }
.cal-puce-auj { display: inline-block; width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--encre); flex: none; }
.cal-actions { margin-top: 16px; }
@media (max-width: 480px) {
    .cal-grille td { height: 56px; padding: 3px 1px; }
    .cal-actions .btn { width: 100%; justify-content: center; }
}

@media (max-width: 760px) {
    .grille-2, .fiche, .champs-2 { grid-template-columns: 1fr; }
    .auth { grid-template-columns: 1fr; min-height: 0; margin-top: 16px; }
    .auth-panneau { display: none; }
    .auth-form { padding: 32px 20px; max-width: none; }
}

@media (max-width: 600px) {
    .conteneur { padding: 0 16px; }
    .page { padding-top: 24px; padding-bottom: 48px; }
    .hero { padding: 48px 0 24px; }
    .section { padding: 48px 0; }
    .carte { padding: 24px 20px; }
    .menu { margin-left: 0; width: 100%; gap: 0 16px; }
    .actions .btn, .hero .actions .btn { width: 100%; }
    .final { padding: 40px 20px; margin-bottom: 48px; }
    .vide { padding: 32px 16px; }
    .fiche-tete .pastille { align-self: flex-start; }
    .dash-tete .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ===== Paliers, exemple, compteurs, pop-up ===== */
.paliers { align-items: stretch; }
.paliers .reco { background: var(--accent-p); }
.paliers .reco .pastille { background: #fff; color: var(--accent-n); }
.paliers-note { text-align: center; margin: 16px 0 0; }
.page > .info, .section-fiche > .info { max-width: none; margin: 0 0 16px; text-align: left; }
.compteurs { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0 0 4px; font-size: .9375rem; }
.dash-plein { margin: 0; max-width: 360px; }
.exemple-carte { max-width: 820px; margin: 24px auto 0; }
.exemple-carte h3 { margin: 8px 0 2px; }
.exemple-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.exemple-relances { margin: 16px 0 0; display: grid; gap: 4px; }
@media (max-width: 600px) {
    .paliers .reco { order: -1; }
}

.popup { width: calc(100% - 32px); max-width: 520px; padding: 0; border: 1px solid var(--bord); border-radius: 24px; background: #fff; color: var(--encre); box-shadow: var(--ombre-haute); }
.popup::backdrop { background: rgba(11, 15, 20, .6); }
.popup[open] { animation: popup-entree .25s ease-out; }
.popup-corps { padding: 28px 24px 24px; }
.popup-haut { display: flex; justify-content: flex-end; margin: -12px -8px 0 0; }
.popup-croix { width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--champ); border-radius: 50%; background: #fff; color: var(--encre); font-size: 1.75rem; line-height: 1; cursor: pointer; }
.popup-croix:hover { background: var(--brume); }
.popup h2 { margin: 0 0 16px; font-size: 1.5rem; text-align: left; }
.popup-bande { margin: 0 0 16px; padding: 14px 18px; border-radius: 12px; background: var(--encre); color: #fff; font-weight: 700; }
.popup-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.popup-mention { margin: 0; }
@keyframes popup-entree { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
    .popup[open] { animation: none; }
}
@media (max-width: 600px) {
    .popup-actions .btn { flex: 1 1 100%; }
}

/* ===== RelancIA : marque, cartes d'offre, L7 ===== */
.marque span { font-family: var(--police-titre); font-weight: 700; letter-spacing: -.02em; color: var(--encre); }
.marque .marque-ia { color: var(--accent); font-weight: 800; }
.bande-sombre .marque span { color: var(--blanc); }
.bande-sombre .marque .marque-ia { color: var(--turq); }

.mention-ia { display: block; max-width: 640px; margin: 0 auto 12px; padding: 10px 18px; border: 1px solid var(--accent); border-radius: 20px; background: var(--accent-p); color: var(--accent-n); font-size: .875rem; line-height: 1.5; text-align: center; }

.offres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; margin: 32px 0; }
.offre { position: relative; display: flex; flex-direction: column; padding: 32px; border-radius: 24px; background: var(--blanc); border: 1px solid var(--bord); }
.offre h3 { font-family: var(--police-titre); font-size: 1.25rem; margin: 0 0 8px; }
.offre-prix { font-family: var(--police-titre); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; margin: 8px 0; }
.offre-unite { color: var(--ardoise); font-size: .875rem; margin: 0 0 4px; }
.offre ul { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 8px; }
.offre-detail { margin: 12px 0 0; }
.offre-mentions { margin: 16px 0 24px; font-size: .875rem; color: var(--ardoise); }
.offre-mentions p { margin: 0 0 8px; }
.offre .btn { margin-top: auto; width: 100%; justify-content: center; }
.offre-gratuit .offre-prix { font-size: 2.25rem; }
.offre-essentiel { border: 3px solid var(--accent); box-shadow: var(--ombre-haute); padding-top: 0; overflow: hidden; }
.offre-essentiel .offre-etiquette { display: flex; align-items: center; gap: 8px; margin: 0 -29px 24px; padding: 10px 29px; background: var(--accent); color: var(--blanc); font-weight: 700; font-size: .875rem; }
.offre-essentiel .offre-etiquette .ico { width: 18px; height: 18px; }
.offre-essentiel .offre-prix { font-size: 3.25rem; }
.offre-essentiel .offre-zone-prix { background: var(--accent-p); margin: 0 -29px; padding: 12px 29px; }
.offre-essentiel .btn:disabled { background: var(--bord); color: var(--ardoise); }
.offre-premium { background: var(--encre); border-color: var(--anthracite); color: var(--blanc); border-top: 4px solid var(--turq); }
.offre-premium h3 { color: var(--blanc); }
.offre-premium .offre-prix { font-size: 2.75rem; color: var(--blanc); }
.offre-premium .offre-unite, .offre-premium .offre-mentions { color: #D1D5DB; }
.offre-premium li svg { color: var(--turq); }
.offre-premium .btn { background: var(--blanc); color: var(--encre); }
.offre-premium .btn:disabled { background: var(--bord); color: var(--ardoise); }
.offre-premium :focus-visible { outline-color: var(--turq); }
.offre-etiquette-ronde { display: inline-block; align-self: flex-start; margin: 0 0 12px; padding: 4px 12px; border-radius: 9999px; font-size: .875rem; font-weight: 600; background: var(--brume); color: var(--encre); }
.offre-premium .offre-etiquette-ronde { background: var(--anthracite); color: var(--blanc); }
@media (min-width: 1024px) { .offre-essentiel { transform: scale(1.04); z-index: 1; } }
@media (max-width: 900px) { .offres { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) { .offre { transition: box-shadow 150ms ease; } .offre:hover { box-shadow: var(--ombre-haute); } }

.bandeau-regle { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 0 0 24px; padding: 14px 20px; border-left: 4px solid var(--succes); border-radius: 0 16px 16px 0; background: var(--succes-f); color: var(--succes-t); font-weight: 600; }
.bandeau-regle p, .bandeau-regle form { margin: 0; }
@media (max-width: 600px) { .bandeau-regle .btn { width: 100%; } }
.form-action { margin-top: 16px; }
.form-action .champ { margin: 0 0 12px; max-width: 280px; }
.sombre .form-action label { color: #fff; }
.sombre .errorlist { color: #FECACA; }
.sombre .btn-blanc { background: var(--blanc); color: var(--encre); }
.lettre-apercu { max-width: 760px; margin: 0 auto 24px; padding: 40px 48px; font-family: Georgia, "Times New Roman", serif; line-height: 1.55; }
.lettre-apercu:hover { box-shadow: var(--ombre); }
.lettre-apercu .tableau { font-family: var(--police-texte); }
.consignes { margin: 0 0 16px; padding-left: 22px; }
.consignes li { margin-bottom: 6px; }
@media (max-width: 600px) { .lettre-apercu { padding: 24px 18px; } }

.menu a.menu-don:not(.btn) { border-bottom-color: var(--accent); }
.menu a.menu-don:not(.btn):hover, .menu a.menu-don:not(.btn)[aria-current="page"] { border-bottom-color: var(--accent); }
.don-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; }
.don-tete > div { flex: 1 1 0; min-width: 0; }
.don-stick { flex: none; width: 120px; height: auto; }
.don-trait { stroke: var(--encre); }
.don-coeur { fill: var(--accent); }
.don-visage { fill: #fff; stroke: var(--encre); stroke-width: 4; }
.don-bouche { fill: var(--encre); }
.don-bande { margin: 32px 0; padding: 28px 24px; border-radius: 16px; background: var(--encre); color: #fff; text-align: center; }
.don-bande p { margin: 0; color: #fff; }
.don-bande .btn { min-height: 48px; padding: 0 28px; font-size: 1rem; }
.don-bande .btn:focus-visible { outline-color: var(--turq); }
.don-bande .don-precision { margin-top: 12px; font-size: .875rem; color: #D1D5DB; }
@media (max-width: 520px) {
    .don-tete { flex-direction: column-reverse; align-items: flex-start; }
    .don-stick { width: 96px; }
    .don-bande .btn { width: 100%; }
}
.menu a.btn-don { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 10px; background: var(--turq); color: var(--encre); font-weight: 700; text-decoration: none; border: 2px solid var(--turq); }
.menu a.btn-don:hover { background: #5EEAD4; border-color: #5EEAD4; color: var(--encre); }
.menu a.btn-don:focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; }
.menu a.btn-don[aria-current="page"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--encre); }
.don-choix { margin: 8px 0 24px; }
.don-montants { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 12px 0; }
.don-montants .don-m { min-height: 52px; padding: 0 12px; font-size: 1.125rem; font-weight: 700; background: #fff; color: var(--encre); border: 2px solid var(--encre); border-radius: 10px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.don-montants .don-m:hover { background: var(--brume); color: var(--encre); }
.don-montants .don-m:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.don-montants .don-m-fort { background: var(--turq); border-color: var(--turq); box-shadow: 0 0 0 3px var(--accent-n); }
.don-montants .don-m-fort:hover { background: #5EEAD4; }
.don-bande .don-montants .don-m { border-color: #fff; }
.don-bande .don-montants .don-m-fort { border-color: var(--turq); box-shadow: 0 0 0 3px #fff; }
.don-bande .don-montants .don-m:focus-visible { outline-color: var(--turq); }
.don-bande .don-montants { margin-top: 0; }
.don-precision-choix { font-size: .875rem; color: var(--ardoise); }
.don-confiance { list-style: none; margin: 12px 0 0; padding: 12px 16px; background: var(--accent-p); border-radius: 10px; color: var(--accent-n); font-size: .9375rem; }
.don-confiance li { margin: 2px 0; }
@media (max-width: 520px) {
    .don-montants { grid-template-columns: repeat(2, 1fr); }
    .don-bande .don-montants .don-m { width: auto; }
}
.titre-suppression { font-size: clamp(1.75rem, 4vw, 2.25rem); }
.page-legale { line-height: 1.7; }
.page-legale h2 { padding-top: 8px; border-top: 1px solid var(--bord); }
.page-legale section:first-of-type h2 { border-top: 0; }
.page-legale p, .page-legale li { max-width: 68ch; }
.a-completer { padding: 8px 12px; border-left: 4px solid var(--alerte-b); border-radius: 0 10px 10px 0; background: var(--alerte-f); color: var(--alerte-t); font-weight: 600; }

/* ===== Guides et calculateur ===== */
.fil-ariane { margin-bottom: 16px; font-size: .875rem; color: var(--ardoise); }
.fil-ariane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.fil-ariane li { margin: 0; }
.fil-ariane li + li::before { content: "/"; margin-right: 8px; color: var(--champ); }
.fil-ariane a { color: var(--ardoise); text-decoration: underline; }
.fil-ariane a:hover { color: var(--encre); }
.formule { padding: 12px 16px; background: var(--brume); border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0; }
.actions-guide { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.encart-guide { margin: 32px 0; padding: 20px 24px; background: var(--accent-p); border-radius: 16px; }
.encart-guide h2 { margin-top: 0; }
.modele-lettre { margin: 16px 0; padding: 16px 20px; background: #fff; border: 1px solid var(--bord); border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; }
.modele-lettre p { margin: 0 0 12px; }
.modele-lettre p:last-child { margin-bottom: 0; }
.sources { font-size: .875rem; color: var(--ardoise); }
.sources a { overflow-wrap: anywhere; }
.liste-guides { display: grid; gap: 16px; margin: 24px 0; }
.liste-guides h2 { font-size: 1.25rem; margin: 0 0 8px; }
.liste-guides p { margin: 0; color: var(--ardoise); }
.resultat-calcul { margin-top: 32px; }
.resultat-calcul .defil { margin: 16px 0; }
.mentions-calcul { font-size: .9375rem; color: var(--ardoise); }
.texte-long details { max-width: none; }
.accueil-guides .liste-nue { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ===== Démo ===== */
.demo { --ease-sortie: cubic-bezier(.16, 1, .3, 1); --ease-entree-sortie: cubic-bezier(.65, 0, .35, 1); --ease-rebond: cubic-bezier(.34, 1.56, .64, 1); --ease-sortie-rapide: cubic-bezier(.4, 0, 1, 1); background: #fff; }
.demo-cadre { position: relative; max-width: 1008px; margin: 0 auto; background: var(--encre); color: #fff; border: 1px solid var(--anthracite); border-radius: 24px; box-shadow: var(--ombre-haute); overflow: hidden; }
.demo-cadre :focus-visible { outline-color: var(--turq); }
.demo-vue { display: flex; justify-content: center; padding: 20px 16px 0; }
.demo-pastille { position: absolute; top: 12px; right: 12px; z-index: 2; }
.dv { display: block; width: 120px; height: auto; overflow: visible; }
.demo-texte { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.demo-pan { padding: 16px 20px 24px; }
.demo-scenes { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; }
.demo-scene { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.demo-scene h3 { margin: 0 0 6px; color: #fff; font: 800 1.625rem/1.05 var(--police-titre); letter-spacing: -.03em; }
.k-l { display: block; overflow: hidden; padding: 0 .06em .1em 0; }
.k-m { display: inline-block; transform-origin: 0 100%; }
.k-big { font-size: 1.25em; color: var(--turq); }
.demo-d { margin: 0; color: var(--bord); }
.demo-d strong { color: #fff; }
.demo-m { margin: 0; font-size: .875rem; color: var(--bord); }
.demo-chip { margin: 4px 0 0; padding: 4px 14px; border: 1px solid var(--champ); border-radius: 999px; background: var(--anthracite); color: #fff; font-size: .875rem; font-weight: 700; transform-origin: 0 50%; }
.demo-total { margin: 0; color: var(--turq); font: 800 2.75rem/1 var(--police-titre); letter-spacing: -.03em; white-space: nowrap; transform-origin: 0 50%; }
.demo-nb { display: inline-block; min-width: 4.6em; text-align: right; font-variant-numeric: tabular-nums; }
.demo-lignes { width: 100%; max-width: 460px; margin: 0; }
.demo-lignes div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--anthracite); font-size: .875rem; color: var(--bord); }
.demo-lignes dd { margin: 0; color: #fff; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.demo-cal { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; max-width: 460px; }
.demo-cal li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 12px; border-left: 3px solid var(--turq); border-radius: 0 8px 8px 0; background: var(--anthracite); font-weight: 600; }
.demo-cal time { color: var(--bord); font-weight: 400; font-variant-numeric: tabular-nums; }
.demo-fort { margin: 4px 0 0; color: #fff; font: 800 1.125rem/1.25 var(--police-titre); }
.demo-scene p.k-f { margin: 0; }
.demo-lien { color: var(--turq); font-weight: 700; }
.demo-lien:hover { color: #fff; }
.demo-i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.demo-barre { display: flex; gap: 4px; padding: 0 16px; }
.demo-barre[hidden], .demo-ctrl[hidden], .demo-ctrl [hidden] { display: none; }
.demo-seg { position: relative; flex: 1 1 0; min-width: 0; min-height: 40px; padding: 0; border: 0; background: none; cursor: pointer; }
.demo-seg::before, .demo-rempli { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; }
.demo-seg::before { background: var(--anthracite); box-shadow: inset 0 0 0 1px var(--champ); }
.demo-rempli { background: var(--turq); transform: scaleX(0); transform-origin: left; }
.demo-seg.fait .demo-rempli { transform: none; }
.demo-seg.actif .demo-rempli { transform: none; animation: dv-trait linear both; }
.demo-attente .demo-seg.actif .demo-rempli { transform: scaleX(0); }
.demo-ctrl { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 4px 12px 14px; }
.demo-ctrl .btn { padding: 0 14px; }
.demo-ip { display: none; }
.en-lecture .demo-ip { display: inline; }
.en-lecture .demo-il { display: none; }
.demo-mention { text-align: center; margin: 12px 0 0; }
.demo-transcr { max-width: 1008px; margin: 12px auto 0; }
.demo-transcr summary { padding: 10px 0; color: var(--accent-n); }
.demo-transcr ol { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 6px; }

.dv-fig { transform-origin: 60px 140px; }
.dv-p { opacity: 0; transform: translateY(6px) scale(.94); transform-origin: 60px 100px; transition: opacity .35s var(--ease-sortie), transform .5s var(--ease-rebond); }
.demo:not([data-s]) .p3, .demo[data-s="1"] .p1, .demo[data-s="2"] .p2, .demo[data-s="3"] .p3, .demo[data-s="4"] .p4, .demo[data-s="5"] .p5 { opacity: 1; transform: none; }
.dv-loupe, .dv-doc, .dv-coeur { transform-box: fill-box; transform-origin: 50% 50%; }

.demo-js .demo-vue { padding-top: 14px; }
.demo-js .dv { width: 84px; }
.demo-js .demo-pan { padding: 8px 20px 12px; }
.demo-js .demo-scenes { grid-template-columns: minmax(0, 1fr); gap: 0; }
.demo-js .demo-scene { grid-area: 1 / 1; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .25s var(--ease-sortie-rapide), transform .25s var(--ease-sortie-rapide), visibility 0s .25s; }
.demo-js .demo-scene.est-actif { opacity: 1; visibility: visible; transform: none; transition: none; }
.demo-js[data-s] .dv-fig { animation: dv-hop .55s var(--ease-rebond) both; }
.demo-js[data-s="1"] .p1 { animation: dv-trem .12s linear .9s 4; }
.demo-js[data-s="2"] .dv-loupe { animation: dv-loupe .8s var(--ease-entree-sortie) .5s 2; }
.demo-js[data-s="4"] .dv-doc { animation: dv-pop .45s var(--ease-rebond) .3s both; }
.demo-js[data-s="5"] .dv-coeur { animation: dv-pop .5s var(--ease-rebond) .6s both, dv-pouls .45s var(--ease-rebond) 2.6s; }
.demo-js .est-actif .k-m { animation: dv-masque .7s var(--ease-sortie) var(--d, 0s) both; }
.demo-js .est-actif .k-s { animation-name: dv-bascule; }
.demo-js .est-actif .k-z { animation: dv-zoom .8s var(--ease-rebond) var(--d, 0s) both; }
.demo-js .est-actif .k-f { animation: dv-up .5s var(--ease-sortie) var(--d, 0s) both; }
.demo-js .est-actif .k-g { animation: dv-g .5s var(--ease-sortie) var(--d, 0s) both; }
.demo-js .est-actif .k-pop { animation: dv-pop .45s var(--ease-rebond) var(--d, 0s) both; }
.demo-js .est-actif .demo-total { animation: dv-pop .45s var(--ease-rebond) .6s both, dv-pouls .45s var(--ease-rebond) 2.6s; }

.demo-js.en-pause *, .demo-js.en-pause *::before { animation-play-state: paused !important; }
.demo-fixe *, .demo-fixe *::before, .demo-attente *, .demo-attente *::before { animation: none !important; transition: none !important; }
@keyframes dv-trait { from { transform: scaleX(0); } }
@keyframes dv-masque { from { transform: translateY(110%); } }
@keyframes dv-bascule { from { transform: translateY(110%) rotate(6deg); } }
@keyframes dv-zoom { from { opacity: 0; transform: translateY(40%) scale(1.35); } }
@keyframes dv-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes dv-g { from { opacity: 0; transform: translateX(-20px); } }
@keyframes dv-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes dv-pouls { 50% { transform: scale(1.06); } }
@keyframes dv-hop { from { transform: translateY(8px) scale(.95); } }
@keyframes dv-trem { 25% { transform: translateX(-1.5px); } 75% { transform: translateX(1.5px); } }
@keyframes dv-loupe { 50% { transform: translate(-3px, 2px) rotate(-10deg); } }
@media (prefers-reduced-motion: reduce) {
    .demo *, .demo *::before { animation: none !important; transition: none !important; }
}
@media (max-width: 419px) {
    .demo-pan, .demo-js .demo-pan { padding-left: 16px; padding-right: 16px; }
    .demo-scene h3 { font-size: 1.5rem; }
    .demo-ctrl { gap: 6px; padding: 4px 8px 12px; }
    .demo-ctrl .btn { padding: 0 12px; font-size: .875rem; }
    .demo-rej .demo-lib { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 720px) {
    .demo-scene h3 { font-size: 2.5rem; }
    .demo-total { font-size: 4rem; }
    .demo-js .demo-cadre { display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-areas: "v p" "b b" "c c"; }
    .demo-js .demo-vue { grid-area: v; align-items: center; padding: 24px 0 24px 28px; }
    .demo-js .dv { width: 180px; }
    .demo-js .demo-pan { grid-area: p; display: flex; align-items: center; min-height: 400px; padding: 48px 48px 24px 24px; }
    .demo-js .demo-scenes { width: 100%; }
    .demo-js .demo-barre { grid-area: b; }
    .demo-js .demo-ctrl { grid-area: c; }
}
@media (min-width: 960px) {
    .demo-scene h3 { font-size: 3rem; }
}