.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__non { color: var(--tres-doux, var(--doux)); } .offre li.offre__non svg { color: var(--rose); }
.offre li.offre__absent em, .offre li.offre__non 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:has(> .legal__corps:only-child) { grid-template-columns: minmax(0, 1fr); }
.legal__corps { max-width: 760px; display: grid; gap: 14px; padding: clamp(24px, 4vw, 40px); border-radius: 20px; background: var(--carte); border: 1px solid var(--ligne); }
.legal__corps h2 { font-size: 24px; letter-spacing: -.02em; margin-top: 10px; } .legal__corps h2:first-child { margin-top: 0; }
.legal__corps p, .legal__corps li { color: var(--doux); font-size: 16.5px; line-height: 1.7; } .legal__corps strong { color: var(--texte); font-size: 34px; letter-spacing: -.02em; }
.legal__corps ul { padding-left: 20px; display: grid; gap: 8px; } .legal__corps a { color: var(--bleu2); }
.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; }
.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; }
.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; } }.etat { max-width: var(--largeur); margin: 0 auto; padding: clamp(40px, 6vw, 70px) var(--gouttiere) 0; display: grid; gap: 16px; --rouge: #f87171; --orange: #fbbf24; }
.etat__banniere { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 26px 28px; border-radius: 22px; border: 1px solid var(--ligne); background: var(--carte); }
.etat__banniere h2 { margin: 0; font-size: clamp(22px, 3.4vw, 30px); letter-spacing: -.02em; }
.etat__banniere p { margin: 4px 0 0; color: var(--doux); font-size: 14px; }
.etat__pt { width: 18px; height: 18px; border-radius: 50%; flex: none; background: var(--vert); box-shadow: 0 0 0 6px #34d39922, 0 0 28px #34d399aa; animation: pouls 2.4s ease-in-out infinite; }
.etat__banniere.degrade .etat__pt { background: var(--orange); box-shadow: 0 0 0 6px #fbbf2422, 0 0 28px #fbbf24aa; }
.etat__banniere.panne .etat__pt { background: var(--rouge); box-shadow: 0 0 0 6px #f8717122, 0 0 28px #f87171aa; }
.etat__droite { margin-left: auto; display: grid; text-align: right; color: var(--doux); font-size: 13px; }
.etat__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.etat__kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 12px 0; }
.etat__kpis > div { background: var(--carte); border: 1px solid var(--ligne); border-radius: 16px; padding: 16px 18px; }
.etat__kpis span { display: block; color: var(--doux); font-size: 12.5px; font-weight: 600; }
.etat__kpis b { display: block; margin-top: 6px; font-size: 26px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.etat__kpis--3 b { font-size: 16px; }
.etat__carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: 20px; padding: 20px 22px; display: grid; gap: 4px; align-content: start; }
.etat__carte h2 { margin: 0 0 10px; font-size: 15px; letter-spacing: .02em; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.etat__carte h2 small { color: var(--doux); font-weight: 500; font-size: 12.5px; }
.etat__verif { border-color: color-mix(in srgb, var(--violet, #8b5cf6) 40%, var(--ligne)); }
.etat__verif form { display: flex; gap: 10px; flex-wrap: wrap; }
.etat__verif input { flex: 1 1 260px; min-width: 0; height: 52px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--ligne2); background: var(--fond2); color: var(--texte); font: inherit; font-size: 16px; }
.etat__verif input:focus { outline: 2px solid #8b5cf6; outline-offset: 2px; }
.etat__verif button:disabled { opacity: .6; cursor: progress; }
.etat__aide { color: var(--doux); font-size: 13px; margin: 6px 0 0; }
.etat__resultat { display: none; margin-top: 12px; } .etat__resultat.on { display: block; }
.etat__tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px; background: var(--carte2); border: 1px solid var(--ligne); }
.etat__msg { color: var(--doux); font-size: 13px; }
.etat__etiq { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: var(--ligne); color: var(--doux); }
.etat__etiq.ok { background: #34d39922; color: var(--vert); } .etat__etiq.ko { background: #f8717122; color: var(--rouge); } .etat__etiq.violet { background: #8b5cf626; color: #a78bfa; }
.etat__barres { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; height: 36px; }
.etat__barres i { border-radius: 4px; background: var(--ligne2); position: relative; }
.etat__barres i.ok { background: linear-gradient(#34d399, #10b981); } .etat__barres i.moyen { background: var(--orange); } .etat__barres i.ko { background: var(--rouge); }
.etat__barres i:hover::after { content: attr(data-info); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%); white-space: nowrap; background: #000; border: 1px solid var(--ligne2); color: #fff; font-style: normal; font-size: 12px; padding: 5px 8px; border-radius: 8px; z-index: 5; }
.etat__legende { display: flex; justify-content: space-between; color: var(--doux); font-size: 12px; margin-top: 8px; }
.etat__groupes, .etat__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.etat__ligne { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--ligne); }
.etat__carte h2 + .etat__ligne { border-top: 0; }
.etat__ligne b { font-weight: 600; font-size: 14px; flex: 0 1 auto; max-width: 48%; overflow-wrap: anywhere; }
.etat__ligne span { flex: 1 1 auto; min-width: 0; color: var(--doux); font-size: 13px; text-align: right; overflow-wrap: anywhere; }
.etat__ligne .etat__ms, .etat__noeud .etat__ms { flex: none; min-width: 56px; color: #8b5cf6; font-variant-numeric: tabular-nums; }
.etat__point { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--vert); box-shadow: 0 0 10px #34d39988; }
.etat__point.ko { background: var(--rouge); box-shadow: 0 0 10px #f8717188; }
.etat__monde { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.etat__noeud { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--carte2); border: 1px solid var(--ligne); font-size: 13px; }
.etat__noeud em { font-style: normal; font-weight: 700; font-size: 11px; color: #8b5cf6; background: #8b5cf622; padding: 3px 6px; border-radius: 6px; text-transform: uppercase; }
.etat__noeud .etat__ms { margin-left: auto; text-align: right; }
.etat__note { color: var(--doux); font-size: 14px; line-height: 1.6; max-width: 70ch; }
.etat__note a { color: var(--bleu2); }
@media (max-width: 760px) { .etat__kpis, .etat__kpis--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .etat__groupes, .etat__grille { grid-template-columns: 1fr; } .etat__droite { margin-left: 0; text-align: left; } .etat__barres { grid-template-columns: repeat(15, 1fr); height: auto; } .etat__barres i { height: 28px; } }
@media (prefers-reduced-motion: reduce) { .etat__pt { animation: none; } }
.realisations__titre { max-width: var(--largeur); margin: 0 auto 26px; padding-inline: var(--gouttiere); font-size: clamp(24px, 3vw, 34px); }
.realisations { max-width: var(--largeur); margin: 0 auto; padding-inline: var(--gouttiere); display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.realisation { display: grid; grid-template-rows: auto 1fr; border-radius: var(--rayon); border: 1px solid var(--ligne); background: var(--carte); overflow: hidden; transition: border-color .25s, transform .3s; }
.realisation:hover { border-color: var(--bleu2); transform: translateY(-3px); }
.realisation__visuel { aspect-ratio: 16 / 9; display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--bleu) 30%, var(--carte2)), color-mix(in srgb, var(--violet) 30%, var(--carte2))); }
.realisation__visuel span { font-size: clamp(34px, 5vw, 52px); font-weight: 800; letter-spacing: -.02em; color: var(--texte); }
.realisation__corps { display: grid; gap: 8px; align-content: start; padding: 20px 22px 24px; }
.realisation__type { margin: 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--bleu2); }
.realisation h3 { margin: 0; font-size: 20px; }
.realisation__copie { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--doux); font-size: 14px; }
.realisation__copie svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--vert); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.realisation__mail { display: grid; gap: 2px; margin: 6px 0 0; padding-top: 12px; border-top: 1px solid var(--ligne); font-size: 13px; color: var(--tres-doux); }
.realisation__mail a { color: var(--bleu2); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.realisations__appel { max-width: 760px; margin: 56px auto 0; padding: 32px var(--gouttiere); text-align: center; }
.realisations__appel p { color: var(--doux); margin: 8px 0 20px; }
.offre li.offre__plus { display: none; } .offres--ouvert .offre li.offre__plus { display: flex; }
.offre ul:not(.offre__bas) { align-content: start; } .offre ul.offre__bas { flex: none; margin-top: 0; padding-top: 14px; border-top: 1px solid var(--ligne); } .offre ul.offre__bas li, .offre ul.offre__bas li.offre__plus { display: flex; min-height: 4.35em; }
.offres__plus { display: flex; justify-content: center; margin: 28px 0 8px; }
.config-tete { padding-bottom: 8px; } .config-tete .fil { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 14px; color: var(--tres-doux); } .config-tete .fil a { color: var(--doux); } .config-tete .fil a:not(.fil-retour)::after { content: "/"; margin-left: 8px; color: var(--ligne2); } .config-tete .fil [aria-current] { color: var(--texte); font-weight: 600; }
.config { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.config__etapes { display: grid; gap: 18px; min-width: 0; }
.config__etape { margin: 0; padding: 26px 28px 28px; border: 1px solid var(--ligne); border-radius: var(--rayon); background: var(--carte); min-width: 0; }
.config__titre { float: left; width: 100%; display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 18px; font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--texte); }
.config__num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--bleu) 16%, transparent); color: var(--bleu2); font-size: 14px; font-weight: 800; flex: none; }
.config__formules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.config__ram:not(:empty) { margin-top: 18px; }
@media (max-width: 1100px) { .config__formules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.config__formule, .config__palier { position: relative; cursor: pointer; }
.config__formule input, .config__palier input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.config__formule-corps { display: grid; align-content: start; gap: 6px; height: 100%; padding: 18px; border: 1.5px solid var(--ligne2); border-radius: 16px; background: var(--carte2); transition: border-color .2s, background-color .2s; }
.config__formule-nom { font-size: 17px; } .config__formule-spec { color: var(--doux); font-size: 14px; line-height: 1.4; }
.config__formule-prix { display: grid; margin-top: 8px; } .config__formule-prix b { font-size: 24px; letter-spacing: -.02em; } .config__formule-prix small { color: var(--tres-doux); font-size: 12.5px; }
.config__ruban { justify-self: start; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--violet) 18%, transparent); color: var(--texte); font-size: 12px; font-weight: 700; }
.config__formule input:checked + .config__formule-corps, .config__palier:has(input:checked) { border-color: var(--bleu); background: color-mix(in srgb, var(--bleu) 9%, var(--carte2)); box-shadow: inset 0 0 0 1px var(--bleu); }
.config__formule input:focus-visible + .config__formule-corps, .config__palier:has(input:focus-visible) { outline: 2px solid var(--bleu2); outline-offset: 3px; }
.config__formule:hover .config__formule-corps, .config__palier:hover { border-color: color-mix(in srgb, var(--bleu) 55%, var(--ligne2)); }
.config__titre + * { clear: both; } .config__aide { margin: 0 0 14px; color: var(--doux); font-size: 14.5px; } .config__adresse + .config__aide { margin: 10px 0 0; } .config__aide--erreur { color: var(--rose); }
.config__paliers { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.config__palier { display: grid; justify-items: center; gap: 2px; min-height: 64px; padding: 12px 8px; border: 1.5px solid var(--ligne2); border-radius: 14px; background: var(--carte2); transition: border-color .2s, background-color .2s; }
.config__palier b { font-size: 20px; } .config__palier span { color: var(--tres-doux); font-size: 12.5px; }
.config__libelle { display: block; margin-bottom: 8px; font-weight: 600; font-size: 14.5px; }
.config__case { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--ligne2); border-radius: 14px; background: var(--carte2); cursor: pointer; font-size: 14.5px; }
.config__case input { width: 18px; height: 18px; flex: none; accent-color: var(--bleu, currentColor); }
.config__transfert { margin-top: 14px; } .config__transfert[hidden] { display: none; }
.config__transfert input[type="url"] { width: 100%; max-width: 460px; padding: 12px 14px; border: 1.5px solid var(--ligne2); border-radius: 14px; background: var(--carte2); color: inherit; font: inherit; }
.config__transfert .config__aide { margin: 8px 0 0; }
.config__attention { margin: 12px 0 0; padding: 12px 14px; border: 1.5px solid var(--rose); border-radius: 14px; font-size: 13.5px; line-height: 1.5; }
.config__adresse { display: flex; align-items: stretch; max-width: 460px; border: 1.5px solid var(--ligne2); border-radius: 14px; background: var(--carte2); overflow: hidden; }
.config__adresse:focus-within { border-color: var(--bleu); }
.config__adresse input { flex: 1; min-width: 0; padding: 13px 14px; border: 0; background: transparent; color: var(--texte); font: inherit; font-size: 16px; outline: none; }
.config__adresse input[aria-invalid="true"] { color: var(--rose); }
.config__adresse span { display: flex; align-items: center; padding: 0 14px; border-left: 1px solid var(--ligne); color: var(--doux); font-size: 15px; white-space: nowrap; }
.config__recap { position: sticky; top: 96px; display: grid; gap: 16px; padding: 26px; border: 1px solid var(--ligne); border-radius: var(--rayon); background: var(--carte); box-shadow: var(--ombre); }
.config__recap-titre { margin: 0; font-size: 19px; }
.config__liste { display: grid; margin: 0; }
.config__ligne { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--ligne); font-size: 14.5px; }
.config__ligne dt { color: var(--doux); } .config__ligne dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.config__total { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 12px; } .config__total span { font-weight: 600; } .config__total b { font-size: 34px; letter-spacing: -.03em; line-height: 1; } .config__total small { grid-column: 1 / -1; text-align: right; color: var(--tres-doux); font-size: 12.5px; }
.config__note { margin: 0; color: var(--tres-doux); font-size: 13px; line-height: 1.45; }
.config__commander:disabled { opacity: .55; cursor: not-allowed; filter: grayscale(.4); }
.config__pourquoi { margin: 0; text-align: left; font-size: 13.5px; }
@media (max-width: 1080px) { .config { grid-template-columns: 1fr; } .config__recap { position: static; } }
@media (max-width: 680px) { .config__formules { grid-template-columns: 1fr; } .config__etape { padding: 22px 18px; } .config__adresse { max-width: none; } }