/*! © 2026 Ouibel.com · Conçu et développé par Ouibel · https://ouibel.com */
.page .nav { position: fixed; }
.nav__liens a[aria-current="page"], .nav__liens a[aria-current="page"]:hover { color: color-mix(in srgb, var(--bleu) 65%, var(--texte)); background: color-mix(in srgb, var(--bleu) 14%, transparent); font-weight: 700; }
.nav__mobile a[aria-current="page"] { color: var(--bleu); background: color-mix(in srgb, var(--bleu) 12%, transparent); }
.haut { position: fixed; }
.haut .haut__anneau { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); transform: rotate(-90deg); pointer-events: none; }
.haut .haut__anneau circle { fill: none; stroke-width: 2.5; }
.haut .haut__fusee { position: absolute; opacity: 0; pointer-events: none; color: var(--bleu); }
.haut .haut__flamme { stroke: var(--magenta, #ff2d7a); }
.haut--decolle > svg:not(.haut__anneau):not(.haut__fusee) { opacity: 0; }
.haut--decolle .haut__fusee { animation: haut-decolle .9s cubic-bezier(.5, 0, .9, .4) forwards; }
@keyframes haut-decolle {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  15% { opacity: 1; transform: translate(-1px, 2px) scale(1); }
  30% { opacity: 1; transform: translate(1px, 1px) scale(1.05); }
  100% { opacity: 0; transform: translateY(-120px) scale(.8); }
}
.haut .haut__piste { stroke: var(--ligne2); }
.haut .haut__progres { stroke: url(#haut-degrade); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.progression { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--bleu), var(--violet), var(--magenta)); pointer-events: none; will-change: transform; }
.nav__actions .btn { height: 42px; padding: 0 18px; flex: none; }
.nav__menu > button { white-space: nowrap; }
.nav__theme { flex: none; }
.nav__barre { max-width: min(1200px, calc(100vw - 2 * var(--gouttiere))); gap: 10px; }
.nav__actions { flex: none; } .nav__actions .btn { white-space: nowrap; }
@media (min-width: 1241px) and (max-width: 1400px) { .nav__liens > a, .nav__menu > button { padding: 0 8px; } .nav__liens { gap: 0; } }
.nav__liens > a, .nav__menu > button { padding: 0 11px; }
.nav__menu > button svg { flex: none; }
@media (max-width: 1240px) { .nav__liens { display: none; } .nav__burger { display: block; } .nav__actions .btn { display: none; } .nav__barre { justify-content: space-between; } }
@media (min-width: 1241px) { .nav__barre { width: max-content; max-width: calc(100vw - 2 * var(--gouttiere)); } }
.nav__marque { flex: none; } .nav__liens { gap: 2px; } .nav__liens > a, .nav__statut { white-space: nowrap; }
.nav__panneau a { white-space: normal; }
@media (max-width: 1520px) { .nav__theme span, .nav__liens .nav__statut { display: none; } }
.tete-page { position: relative; max-width: var(--largeur); margin: 0 auto; padding: clamp(140px, 16vw, 190px) var(--gouttiere) 0; isolation: isolate; }
.tete-page h1 { font-size: clamp(40px, 6.4vw, 78px); max-width: 900px; } .tete-page .chapo { max-width: 700px; }
.tete-page--centre { text-align: center; } .tete-page--centre h1, .tete-page--centre .chapo { margin-inline: auto; } .tete-page--centre .surtitre { display: block; width: 100%; margin-inline: auto; text-align: center; font-size: 17px; }
.tete-page .hero__ciel { position: absolute; inset: -40px 0 auto; height: 520px; z-index: -1; overflow: hidden; pointer-events: none; }
.tete-page .orbe { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(110px); opacity: .28; } .tete-page .orbe--bleu { background: #1680ff; top: -200px; left: 10%; } .tete-page .orbe--rose { background: #c04bd0; top: -160px; right: 8%; opacity: .2; }
.section--serree { padding-top: clamp(50px, 7vw, 80px); } .section--etroite { max-width: 880px; }
.identite { color: var(--orange, #f59e0b); }
.offres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.offre { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 30px; border-radius: 26px; background: var(--carte); border: 1px solid var(--ligne); box-shadow: var(--ombre); min-height: 200px; }
.offre--squelette { min-height: 520px; background: linear-gradient(90deg, var(--carte), var(--carte2), var(--carte)); background-size: 200% 100%; animation: brille 1.4s infinite; } @keyframes brille { to { background-position: -200% 0; } }
.offre--populaire { background: linear-gradient(var(--carte), var(--carte)) padding-box, linear-gradient(135deg, #1680ff, #8b5cf6, #ff2d7a) border-box; border: 1.5px solid transparent; transform: translateY(-8px); }
.offre__ruban { --ob: "ouibel.com"; position: absolute; top: -13px; left: 28px; padding: 5px 13px; border-radius: 999px; background: linear-gradient(90deg, #1680ff, #8b5cf6); color: #fff; font-size: 12.5px; font-weight: 800; }
.offre h2 { font-size: 23px; letter-spacing: -.02em; } .offre__accroche { color: var(--doux); min-height: 3.2em; }
.offre__prix { display: flex; align-items: flex-end; gap: 12px; } .offre__prix b { font-size: 54px; letter-spacing: -.045em; line-height: 1; } .offre__prix b span { font-size: 26px; margin-left: 3px; } .offre__prix small { color: var(--tres-doux); font-size: 13px; line-height: 1.35; }
.offre ul { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 10px; flex: 1; } .offre li { display: flex; gap: 10px; color: var(--doux); font-size: 15px; line-height: 1.45; }
.offre li svg { width: 18px; height: 18px; color: var(--vert); flex: none; margin-top: 2px; stroke-width: 2.4; }
.offres > .offre:not(.offre--squelette) { animation: offre-flotte 5s ease-in-out infinite; transition: transform .4s var(--ease, cubic-bezier(.2, .8, .2, 1)), box-shadow .4s var(--ease, cubic-bezier(.2, .8, .2, 1)), border-color .4s; }
.offres > .offre:nth-child(2) { animation-delay: -1.6s; } .offres > .offre:nth-child(3) { animation-delay: -3.2s; }
@keyframes offre-flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.offres > .offre:not(.offre--squelette):hover { transform: translateY(-14px) scale(1.03); border-color: rgba(22, 128, 255, .55); box-shadow: 0 34px 70px -24px rgba(22, 128, 255, .55), 0 0 0 1px rgba(139, 92, 246, .25); z-index: 2; }
.offres > .offre--populaire:hover { transform: translateY(-22px) scale(1.03); }
.offre li.offre__absent { color: var(--tres-doux, var(--doux)); opacity: .6; } .offre li.offre__absent svg { color: var(--tres-doux, var(--doux)); }
.offre li.offre__absent em { font-style: normal; font-size: 12px; font-weight: 600; margin-left: auto; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--ligne); white-space: nowrap; align-self: flex-start; }
.offre .btn[aria-disabled="true"] { opacity: .65; cursor: not-allowed; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .offres > .offre:not(.offre--squelette) { animation: none; transition: none; } .offres > .offre:not(.offre--squelette):hover { transform: none; } .offres > .offre--populaire:hover { transform: translateY(-8px); } }
.btn--bloc { width: 100%; } .note-prix { margin-top: 22px; color: var(--tres-doux); font-size: 14px; text-align: center; } .note-prix a { color: var(--bleu2); }
.inclus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--ligne); background: var(--ligne); }
.inclus div { padding: 28px; background: var(--carte); } .inclus b { display: block; font-size: 17px; margin-bottom: 6px; } .inclus p { color: var(--doux); font-size: 15px; }
.contact { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.formulaire { display: grid; gap: 16px; padding: clamp(24px, 4vw, 38px); border-radius: 28px; background: var(--carte); border: 1px solid var(--ligne); box-shadow: var(--ombre); }
.formulaire__grille { --ob: "ouibel.com"; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formulaire label { display: grid; gap: 7px; font-weight: 650; font-size: 14.5px; } .formulaire label em { font-style: normal; color: var(--tres-doux); font-weight: 400; }
.formulaire input:not([type=checkbox]), .formulaire select, .formulaire textarea { width: 100%; min-height: 50px; padding: 12px 15px; border-radius: 14px; border: 1px solid var(--ligne2); background: var(--fond2); color: var(--texte); font: inherit; font-size: 16px; transition: border-color .15s, box-shadow .15s; }
.formulaire textarea { resize: vertical; line-height: 1.55; } .formulaire :is(input, select, textarea):focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(22, 128, 255, .18); }
.formulaire .case { grid-template-columns: 20px 1fr; align-items: start; font-weight: 400; color: var(--doux); font-size: 14.5px; } .formulaire .case input { width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--bleu); } .formulaire a { color: var(--bleu2); }
.formulaire .btn { justify-self: start; } .formulaire__statut:empty { display: none; } .formulaire__statut { padding: 12px 14px; border-radius: 12px; background: var(--carte2); color: var(--doux); font-size: 15px; }
.formulaire__statut.ok { background: rgba(52, 211, 153, .12); color: var(--vert); } .formulaire__statut.erreur { background: rgba(255, 45, 122, .1); color: #ff6b9b; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact__infos { display: grid; gap: 14px; } .carte-info { padding: 24px; border-radius: 22px; background: var(--carte); border: 1px solid var(--ligne); }
.carte-info h2 { font-size: 17px; letter-spacing: -.01em; margin-bottom: 6px; } .carte-info p { color: var(--doux); } .carte-info a { color: var(--bleu2); }
.legal { max-width: var(--largeur); margin: 0 auto; padding: clamp(40px, 6vw, 70px) var(--gouttiere) 0; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 50px; align-items: start; }
.legal__sommaire { position: sticky; top: 110px; padding: 20px; border-radius: 20px; background: var(--carte); border: 1px solid var(--ligne); } .legal__sommaire p { font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--tres-doux); margin-bottom: 10px; }
.legal__sommaire ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; } .legal__sommaire a { color: var(--doux); text-decoration: none; font-size: 14.5px; } .legal__sommaire a:hover { color: var(--texte); }
.legal__texte { max-width: 760px; } .legal__texte section { padding-bottom: 34px; scroll-margin-top: 110px; } .legal__texte h2 { font-size: 24px; letter-spacing: -.02em; margin-bottom: 14px; }
.legal__texte p, .legal__texte li { color: var(--doux); font-size: 16.5px; line-height: 1.7; } .legal__texte p + p { margin-top: 12px; } .legal__texte ul { padding-left: 20px; display: grid; gap: 8px; } .legal__texte b { color: var(--texte); } .legal__texte a { color: var(--bleu2); }
.legal__formulaire { margin: 18px 0 0; padding: 20px 22px; border-radius: 16px; background: var(--carte); border: 1px dashed var(--ligne2); } .legal__formulaire p + p { margin-top: 10px; }
.fiche { display: grid; grid-template-columns: max-content 1fr; gap: 10px 22px; margin: 16px 0; padding: 22px; border-radius: 18px; background: var(--carte); border: 1px solid var(--ligne); }
.fiche dt { color: var(--tres-doux); font-size: 14.5px; } .fiche dd { margin: 0; font-weight: 600; }
.tableau-legal { width: 100%; border-collapse: collapse; font-size: 15px; border: 1px solid var(--ligne); border-radius: 14px; overflow: hidden; display: block; overflow-x: auto; }
.tableau-legal th, .tableau-legal td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--ligne); vertical-align: top; color: var(--doux); } .tableau-legal th { color: var(--texte); background: var(--carte2); font-size: 13px; }
@media (max-width: 1080px) { .offres { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } .offre--populaire { transform: none; } .inclus { grid-template-columns: 1fr 1fr; } .contact, .legal { grid-template-columns: 1fr; } .legal__sommaire { position: static; } .nav__compte { display: none !important; } }
@media (max-width: 680px) { .inclus, .formulaire__grille { grid-template-columns: 1fr; } .formulaire .btn { width: 100%; } .fiche { grid-template-columns: 1fr; gap: 2px; } .fiche dd { margin-bottom: 10px; } .offre__prix b { font-size: 46px; } .tete-page h1 { font-size: clamp(36px, 10vw, 52px); } }
.fil { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 13px; color: var(--doux); }
.fil a { color: var(--doux); text-decoration: none; } .fil a:hover { color: var(--texte); text-decoration: underline; }
.fil a.fil-retour { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-right: 8px; border: 0; border-radius: 50%; font-size: 18px; font-weight: 700; line-height: 1; color: #fff; background: linear-gradient(135deg, var(--bleu2), var(--bleu)); box-shadow: 0 6px 16px rgba(22,128,255,.35); transition: transform .25s, box-shadow .25s; }
.fil a.fil-retour:hover { text-decoration: none; color: #fff; transform: translateX(-4px); box-shadow: 0 8px 20px rgba(22,128,255,.5); }
.fil a.fil-retour:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; }
.fil [aria-current] { color: var(--texte); font-weight: 600; }
.tete-page__cta { margin-top: 30px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { font-size: clamp(26px, 3.4vw, 36px); margin: 0 0 16px; letter-spacing: -.02em; }
.prose h2:not(:first-child) { margin-top: 48px; }
.prose p { color: var(--doux); font-size: 17px; line-height: 1.75; margin: 0 0 16px; }
.prose a, .faq p a { color: var(--bleu2); text-underline-offset: 3px; }
.liens-services { --ob: "ouibel.com"; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.liens-services > a { flex: 0 1 calc((100% - 42px) / 4); min-width: 0; }
@media (max-width: 1100px) { .liens-services > a { flex-basis: calc((100% - 28px) / 3); } }
@media (max-width: 820px) { .liens-services > a { flex-basis: calc((100% - 14px) / 2); } }
@media (max-width: 560px) { .liens-services > a { flex-basis: 100%; } }
.liens-services a { display: grid; gap: 6px; padding: 22px 24px; border-radius: var(--rayon); border: 1px solid var(--ligne); background: var(--carte); color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; }
.liens-services a:hover { border-color: var(--bleu2); transform: translateY(-2px); }
.liens-services b { font-size: 17px; } .liens-services span { color: var(--doux); font-size: 14px; line-height: 1.55; }
.liens-services a { position: relative; overflow: hidden; isolation: isolate; padding-bottom: 56px; transition: border-color .25s, transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; animation: svc-entree .6s cubic-bezier(.2, .8, .2, 1) both, svc-flotte 6s ease-in-out infinite; }
.liens-services a:nth-child(2) { animation-delay: .06s; } .liens-services a:nth-child(3) { animation-delay: .12s; } .liens-services a:nth-child(4) { animation-delay: .18s; } .liens-services a:nth-child(5) { animation-delay: .24s; } .liens-services a:nth-child(n+6) { animation-delay: .3s; }
.liens-services a::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--bleu) 24%, transparent), color-mix(in srgb, var(--violet, #8b5cf6) 10%, transparent) 45%, transparent 70%); }
.liens-services a::after { content: "Voir plus"; position: absolute; right: 20px; bottom: 18px; padding: 6px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--bleu2) 45%, transparent); font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--bleu2); opacity: .9; transform: translateX(-4px); transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .3s, background-color .3s, color .3s; }
.liens-services a:hover, .liens-services a:focus-visible { transform: translateY(-5px) rotate(-.4deg); box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--bleu) 55%, transparent); }
.liens-services a:hover::before, .liens-services a:focus-visible::before { opacity: 1; }
.liens-services a:hover::after, .liens-services a:focus-visible::after { opacity: 1; transform: translateX(0); background-color: var(--bleu2); color: #fff; }
.liens-services b { transition: transform .35s cubic-bezier(.2, .8, .2, 1); } .liens-services a:hover b { transform: translateX(4px); }
.saut__mot { display: inline-block; white-space: nowrap; }
.saut__lettre { display: inline-block; animation: saut-lettre 3.6s cubic-bezier(.3, 0, .3, 1) infinite; }
@keyframes saut-lettre { 0%, 12%, 100% { transform: translateY(0); } 4% { transform: translateY(-.28em); } 8% { transform: translateY(0); } }
.degrade-bleu .saut__lettre { background: linear-gradient(90deg, #22b4ff, #1680ff 45%, #7a6bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes svc-entree { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes svc-flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes svc-flotte-a { 0%, 100% { translate: 0 0; } 50% { translate: 8px -6px; } }
@keyframes svc-flotte-b { 0%, 100% { translate: 0 0; } 50% { translate: -8px 6px; } }
@keyframes svc-flotte-c { 0%, 100% { translate: 0 0; } 50% { translate: 7px 7px; } }
@keyframes svc-flotte-d { 0%, 100% { translate: 0 0; } 50% { translate: -7px -7px; } }
.liens-services a:nth-child(4n+1) { animation-name: svc-entree, svc-flotte-a; animation-duration: .6s, 6.5s; }
.liens-services a:nth-child(4n+2) { animation-name: svc-entree, svc-flotte-b; animation-duration: .6s, 7.5s; }
.liens-services a:nth-child(4n+3) { animation-name: svc-entree, svc-flotte-c; animation-duration: .6s, 8s; }
.liens-services a:nth-child(4n+4) { animation-name: svc-entree, svc-flotte-d; animation-duration: .6s, 7s; }
@supports (animation-timeline: view()) { .liens-services a { animation-timeline: view(), auto; animation-range: entry 0% entry 45%, normal; animation-delay: 0s; } }
@media (prefers-reduced-motion: reduce) { .liens-services a { transition: none; animation: none; } .liens-services a:hover { transform: none; } .liens-services b { transition: none; } .liens-services a:hover b { transform: none; } }
.section--serree > .entete-section > h2.rebondit { animation: rebond-titre 30s var(--ease, ease) infinite; }
@media (prefers-reduced-motion: reduce) { .section--serree > .entete-section > h2.rebondit { animation: none; } }
@keyframes rebond-titre { 0% { transform: translateY(0); } 0.7% { transform: translateY(-.22em); } 1.3% { transform: translateY(.04em); } 1.75% { transform: translateY(-.06em); } 2.33%, 100% { transform: translateY(0); } }
section.section:nth-of-type(6) > .appel, section.section:nth-of-type(5) > .appel { width: fit-content; max-width: 100%; margin-inline: auto; animation: flotte-appel 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { section.section:nth-of-type(6) > .appel, section.section:nth-of-type(5) > .appel { animation: none; } }
@keyframes flotte-appel { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.tete-page__cta .btn { animation: flotte-bouton 5s ease-in-out infinite; }
@keyframes flotte-bouton { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .tete-page__cta .btn { animation: none; } }
.solution__lien { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--bleu2); text-decoration: none; position: relative; z-index: 1; }
.solution__lien:hover { text-decoration: underline; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html[data-theme="clair"] { --bleu2: #0a5fd0; --tres-doux: #5d6380; }
.hero__surtitre { margin-bottom: 10px; }
.guide__meta { margin-top: 18px; font-size: 13px; color: var(--tres-doux); }
.guide__sommaire { max-width: 760px; margin: 0 auto 40px; padding: 20px 24px; border: 1px solid var(--ligne); border-radius: var(--rayon); background: var(--carte); }
.guide__sommaire b { display: block; margin-bottom: 8px; } .guide__sommaire ol { margin: 0; padding-left: 20px; color: var(--doux); line-height: 1.9; }
.guide__sommaire a { color: var(--doux); text-decoration: none; } .guide__sommaire a:hover { color: var(--texte); text-decoration: underline; }
.prose ul { margin: 0 0 18px; padding-left: 20px; color: var(--doux); font-size: 17px; line-height: 1.75; } .prose li { margin-bottom: 8px; } .prose li b, .prose p b { color: var(--texte); }
.prose h2 { scroll-margin-top: 100px; }
.puces-contact { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; }
.puces-contact li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border-radius: 999px; border: 1px solid var(--ligne2); background: var(--carte); color: var(--doux); font-size: 14px; font-weight: 600; box-shadow: var(--ombre); }
.puces-contact svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--bleu); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.puces-contact li:nth-child(2) svg { stroke: var(--vert); } .puces-contact li:nth-child(3) svg { stroke: #ff2d7a; }
.carte-info { position: relative; display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; align-items: start; transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s, box-shadow .25s; }
.carte-info:hover { transform: translateY(-3px); border-color: var(--bleu2); box-shadow: var(--ombre); }
.carte-info__ic { grid-row: 1 / span 2; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--bleu) 18%, transparent), color-mix(in srgb, #8b5cf6 18%, transparent)); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.carte-info__ic svg { width: 24px; height: 24px; fill: none; stroke: var(--bleu); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carte-info:hover .carte-info__ic { transform: rotate(-8deg) scale(1.1); }
.carte-info h2 { margin-bottom: 4px; } .carte-info p { margin: 0; }
.formulaire .btn svg { transition: transform .25s cubic-bezier(.2, .8, .2, 1); } .formulaire .btn:hover svg { transform: translateX(5px); }
.formulaire { transition: box-shadow .3s, border-color .3s; } .formulaire:focus-within { border-color: color-mix(in srgb, var(--bleu) 45%, var(--ligne)); }
@keyframes contact-entree { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes contact-flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes contact-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bleu) 40%, transparent); } 70%, 100% { box-shadow: 0 0 0 14px transparent; } }
.tete-page .surtitre, .tete-page h1, .tete-page .chapo { animation: contact-entree .7s var(--ease, cubic-bezier(.2, .8, .2, 1)) both; }
.tete-page h1 { animation-delay: .08s; } .tete-page .chapo { animation-delay: .16s; }
.tete-page h1 .degrade-bleu { display: inline-block; animation: rebond-titre 15s cubic-bezier(.34, 1.56, .64, 1) .9s infinite both; }
@keyframes rebond-titre { 0% { transform: translateY(0) scale(1); } 1.4% { transform: translateY(-14px) scale(1.04); } 2.4% { transform: translateY(4px) scale(.98); } 3.2% { transform: translateY(-2px); } 4% { transform: translateY(0) scale(1); } 100% { transform: translateY(0) scale(1); } }
.puces-contact li { animation: contact-entree .7s cubic-bezier(.2, .8, .2, 1) both, contact-flotte 5s ease-in-out infinite; }
.puces-contact li:nth-child(1) { animation-delay: .24s, 1s; } .puces-contact li:nth-child(2) { animation-delay: .32s, 1.8s; } .puces-contact li:nth-child(3) { animation-delay: .4s, 2.6s; }
@keyframes contact-orbe { 0%, 100% { transform: translate(0, 0) scale(1); opacity: .28; } 50% { transform: translate(40px, 30px) scale(1.08); opacity: .4; } }
.tete-page .orbe--bleu { animation: contact-orbe 12s ease-in-out infinite; } .tete-page .orbe--rose { animation: contact-orbe 14s ease-in-out -5s infinite; }
.contact .formulaire { animation: contact-entree .8s cubic-bezier(.2, .8, .2, 1) .35s both; }
.contact__infos .carte-info { animation: contact-entree .7s cubic-bezier(.2, .8, .2, 1) both; }
.contact__infos .carte-info:nth-child(1) { animation-delay: .45s; } .contact__infos .carte-info:nth-child(2) { animation-delay: .53s; } .contact__infos .carte-info:nth-child(3) { animation-delay: .61s; } .contact__infos .carte-info:nth-child(4) { animation-delay: .69s; }
.contact__infos .carte-info:first-child .carte-info__ic { animation: contact-ping 2.8s ease-out 1.2s infinite; }
@media (max-width: 680px) { .puces-contact li { font-size: 13px; } .carte-info { grid-template-columns: 42px 1fr; column-gap: 12px; padding: 20px; } .carte-info__ic { width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) { .tete-page h1 .degrade-bleu { animation: none; } .tete-page .surtitre, .tete-page h1, .tete-page .chapo,.puces-contact li, .contact .formulaire, .contact__infos .carte-info, .carte-info__ic { animation: none; } .carte-info, .carte-info__ic, .formulaire .btn svg { transition: none; } }
html[data-theme="clair"] .identite { color: #b45309; }
html[data-theme="clair"] .surtitre--rose { color: #d6145f; }
.nav__mobile { max-height: calc(100svh - 96px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 680px) {
  .nav__marque { min-height: 44px; }
  .nav__theme { min-width: 44px; height: 44px; justify-content: center; }
  .fil { gap: 2px 4px; font-size: 14px; }
  .fil a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
  .fil a.fil-retour { width: 44px; height: 44px; margin-right: 4px; padding: 0; }
  .pied__services, .pied__plus { row-gap: 0; }
  .pied__services a, .pied__plus a { display: flex; align-items: center; min-height: 44px; }
  .pied__services > a:last-child:has(b) b { display: flex; align-items: center; min-height: 44px; }
  .pied__mail { min-height: 44px; }
  .pied__statut { min-height: 44px; padding: 0 14px; }
  .pied__legal { gap: 0 20px; }
  .pied__legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .haut, .haut--calme { width: 44px; height: 44px; bottom: max(16px, env(safe-area-inset-bottom)); }
  .haut { right: max(16px, env(safe-area-inset-right)); }
  .haut--calme { left: max(16px, env(safe-area-inset-left)); padding: 0 5px; }
  .haut:not(:hover):not(:focus-visible) { opacity: .92; }
}
.degrade-bleu:has(.saut__lettre) { background: none; }
.degrade-rose:has(.saut__lettre) { background: none; }
.degrade-rose .saut__lettre { background: linear-gradient(90deg, #8b5cf6, #c04bd0 50%, #ff2d7a); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes saut-hero-fort { 0%, 16%, 100% { transform: translateY(0) scale(1); } 5% { transform: translateY(-.42em) scale(1.12); } 10% { transform: translateY(.04em) scale(.98); } }
@keyframes saut-hero-gros { 0%, 18%, 100% { transform: translateY(0) scale(1); } 6% { transform: translateY(-.7em) scale(1.35); } 12% { transform: translateY(.06em) scale(.96); } }
.hero__titre .saut__lettre { padding-bottom: .14em; margin-bottom: -.14em; transform-origin: 50% 85%; animation: saut-hero-fort 4.2s cubic-bezier(.3, 0, .3, 1) infinite; }
.hero__titre .degrade-bleu .saut__lettre, .hero__titre .degrade-rose .saut__lettre { animation-name: saut-hero-gros; }
.tete-page .hero__ciel { height: 680px; }
.tete-page .hero__ciel::before { content: ""; position: absolute; left: 50%; top: 42%; width: 2400px; aspect-ratio: 1; translate: -50% -50%; background: repeating-conic-gradient(from 0deg, rgba(58, 160, 255, .2) 0deg 1.5deg, transparent 1.5deg 9deg, rgba(255, 45, 122, .16) 9deg 10.5deg, transparent 10.5deg 18deg); -webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .5) 10%, transparent 28%); mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .5) 10%, transparent 28%); animation: histoire-rayons 80s linear infinite; }
.tete-page .hero__ciel::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 520px 300px at 50% 42%, rgba(139, 92, 246, .28), rgba(22, 128, 255, .14) 45%, transparent 75%); animation: histoire-pulse 6s ease-in-out infinite; }
.tete-page:not(.tete-page--centre) .hero__ciel::before { left: 30%; }
@media (prefers-reduced-motion: reduce) { .tete-page .hero__ciel::before, .tete-page .hero__ciel::after { animation: none; } }
.inclus { gap: 18px; border: 0; background: none; overflow: visible; }
.inclus div { border: 1px solid var(--ligne); border-radius: 28px; box-shadow: 0 14px 34px rgba(22, 128, 255, .14); animation: bulle-flotte 6s ease-in-out infinite; transition: transform .35s var(--ease, cubic-bezier(.2, .8, .2, 1)), box-shadow .35s, border-color .35s; }
.inclus div:nth-child(2n) { animation-duration: 7s; animation-delay: -2s; }
.inclus div:nth-child(3n) { animation-duration: 8s; animation-delay: -4s; }
.inclus div:hover { animation-play-state: paused; transform: translateY(-10px) scale(1.04); border-color: #1680ff; box-shadow: 0 22px 48px rgba(139, 92, 246, .28); }
@keyframes bulle-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .inclus div { animation: none; transition: none; } .inclus div:hover { transform: none; } }

.sur-mesure { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 18px; padding: 28px 32px; border-radius: 20px; border: 1px solid rgba(139, 92, 246, .4); background: linear-gradient(135deg, rgba(22, 128, 255, .12), rgba(139, 92, 246, .14), rgba(255, 45, 122, .1)); }
.sur-mesure__texte { flex: 1 1 360px; }
.sur-mesure h3 { margin: 4px 0 8px; }
.sur-mesure p { margin: 0; }
.sur-mesure { background-size: 200% 200%; animation: sm-flotte 5s ease-in-out infinite, sm-fond 8s ease-in-out infinite; transition: box-shadow .25s; }
.sur-mesure:hover { box-shadow: 0 14px 40px rgba(139, 92, 246, .3); }
.sur-mesure .btn { animation: flotte-bouton 3s ease-in-out infinite; }
@keyframes sm-flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes sm-fond { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .sur-mesure, .sur-mesure .btn { animation: none; } }