:root {
  --vert:#173e35;
  --ivoire:#f7f7f1;
  --sauge:#dbedce;
  --texte:#172d27;
  --secondaire:#52635d;
  --ligne:#bcc9be;
  --blanc:#fff;
  --courbe:cubic-bezier(.22,1,.36,1);
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--texte);
  background:var(--ivoire);
  font-synthesis:none
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:110px
}
body {
  margin:0;
  font-size:16px;
  line-height:1.65
}
img,svg {
  max-width:100%;
  vertical-align:middle
}
a {
  color:inherit;
  text-underline-offset:5px
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer
}
a,button {
  -webkit-tap-highlight-color:transparent
}
button:disabled {
  cursor:default
}
h1,h2,h3,p {
  margin:0
}
p+p {
  margin-top:1rem
}
h1,h2,h3 {
  line-height:1.08;
  letter-spacing:-.045em;
  text-wrap:balance
}
h1 {
  font-size:clamp(2.6rem,4.65vw,4.65rem);
  font-weight:650
}
h2 {
  font-size:clamp(2rem,3.4vw,3.2rem);
  font-weight:620
}
h3 {
  font-size:1.35rem;
  letter-spacing:-.025em;
  line-height:1.25
}
p {
  color:var(--secondaire)
}
:focus-visible {
  outline:3px solid var(--vert);
  outline-offset:5px
}
.conteneur {
  width:min(1240px,calc(100% - 96px));
  margin-inline:auto
}
.section {
  padding-block:100px
}
.surtitre {
  font-size:.73rem;
  font-weight:650;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--vert);
  margin-bottom:20px
}
.entete {
  position:sticky;
  top:0;
  z-index:30;
  background:var(--ivoire);
  border-bottom:1px solid transparent
}
.navigation {
  min-height:100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.marque {
  display:inline-flex;
  flex-shrink:0
}
.marque img {
  width:170px;
  height:auto
}
nav {
  display:flex;
  align-items:center;
  gap:32px
}
nav>a {
  font-size:.85rem;
  text-decoration:none;
  position:relative
}
nav>a::after {
  content:"";
  position:absolute;
  inset:auto 0 -7px;
  height:1px;
  background:var(--vert);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s var(--courbe)
}
nav>a:hover::after,nav>a[aria-current]::after {
  transform:scaleX(1)
}
.bouton {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  text-decoration:none;
  background:var(--vert);
  border:1px solid var(--vert);
  color:var(--blanc);
  border-radius:7px;
  padding:15px 22px;
  font-size:.86rem;
  font-weight:600;
  line-height:1.35;
  min-height:52px;
  position:relative;
  transition:box-shadow .3s,background .3s
}
.bouton:hover {
  box-shadow:0 7px 20px #173e351a
}
.bouton.secondaire {
  background:transparent;
  color:var(--vert);
  border-color:var(--ligne)
}
.fleche {
  font-size:1.25rem;
  transition:transform .35s var(--courbe)
}
.bouton:hover .fleche {
  transform:translate(3px,-3px)
}
.icone {
  width:23px;
  height:23px;
  flex-shrink:0
}
.diagnostic-menu .bouton {
  font-size:.78rem;
  min-height:44px;
  padding:12px 18px
}
.diagnostic-menu .fleche {
  display:none
}
.actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin-top:28px
}
.evitement {
  position:fixed;
  top:8px;
  left:12px;
  transform:translateY(-160%);
  z-index:100;
  background:var(--sauge);
  padding:10px 20px
}
.evitement:focus {
  transform:none
}
.bandeau-apercu {
  background:var(--sauge);
  padding:7px;
  text-align:center;
  font-size:.78rem
}
.introduction {
  padding-block:78px 64px
}
.introduction h1 {
  max-width:1000px
}
.intro-texte {
  font-size:1.15rem;
  max-width:760px;
  margin-top:24px
}
.appel-final {
  background:var(--vert);
  color:var(--ivoire);
  position:relative;
  overflow:hidden;
  padding-block:84px
}
.appel-final .conteneur {
  position:relative
}
.appel-final h2 {
  max-width:810px;
  font-size:clamp(2.2rem,4vw,3.7rem)
}
.appel-final .surtitre,.appel-final p {
  color:var(--sauge)
}
.appel-final p:not(.surtitre) {
  margin-top:20px
}
.appel-final .bouton {
  background:var(--sauge);
  color:var(--vert);
  border-color:var(--sauge)
}
.appel-final .secondaire {
  background:transparent;
  color:var(--blanc);
  border-color:#f7f7f180
}
.grand-symbole {
  position:absolute;
  right:-40px;
  top:-45px;
  width:520px;
  height:520px;
  opacity:.13;
  filter:brightness(0) invert(1)
}
.pied {
  padding-block:44px 32px
}
.pied-haut {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:50px
}
.pied-haut p {
  max-width:380px;
  font-size:.78rem
}
.pied-contacts {
  display:flex;
  gap:24px;
  font-size:.82rem;
  white-space:nowrap
}
.pied-bas {
  border-top:1px solid var(--ligne);
  margin-top:32px;
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  font-size:.72rem;
  color:var(--secondaire)
}
.pied-bas nav {
  gap:24px
}
.pied-bas a {
  font-size:inherit
}
.contact-flottant {
  display:none
}
.menu-bouton[hidden] {
  display:none
}
.coches {
  list-style:none;
  padding:0;
  margin:20px 0
}
.coches li {
  position:relative;
  padding-left:30px;
  margin-block:12px;
  color:var(--secondaire)
}
.coches li:before {
  content:"✓";
  position:absolute;
  left:0;
  top:3px;
  width:19px;
  height:19px;
  line-height:19px;
  text-align:center;
  border-radius:50%;
  background:var(--vert);
  color:var(--blanc);
  font-size:.75rem
}
@media(max-width:1000px) {
  .conteneur {
    width:calc(100% - 48px)
  }
  nav {
    gap:20px
  }
  .navigation {
    gap:16px
  }
  .marque img {
    width:150px
  }
  .diagnostic-menu .bouton {
    padding:12px
  }
  .pied-haut {
    gap:24px
  }
}
@media(max-width:760px) {
  html {
    scroll-padding-top:90px
  }
  .conteneur {
    width:calc(100% - 40px)
  }
  .section {
    padding-block:64px
  }
  .navigation {
    min-height:78px;
    flex-wrap:wrap;
    padding-block:10px
  }
  .marque img {
    width:145px
  }
  .navigation nav {
    width:100%;
    flex-wrap:wrap;
    gap:16px;
    padding-bottom:12px
  }
  .diagnostic-menu {
    display:none
  }
  .introduction {
    padding-block:44px
  }
  .introduction h1 {
    font-size:2.55rem
  }
  .intro-texte {
    font-size:1.04rem
  }
  .actions {
    align-items:stretch
  }
  .actions .bouton {
    width:100%
  }
  .pied-haut {
    flex-direction:column;
    align-items:flex-start;
    gap:24px
  }
  .pied-bas {
    flex-direction:column-reverse;
    gap:24px
  }
  .pied {
    padding-bottom:36px
  }
  .appel-final {
    padding-block:64px
  }
  .grand-symbole {
    right:-220px
  }
  .coches li {
    font-size:.95rem
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
.hero {
  display:grid;
  grid-template-columns:1.08fr 1fr;
  gap:56px;
  align-items:center;
  min-height:690px;
  padding-block:50px 80px
}
.hero h1 {
  font-size:clamp(2.65rem,4.45vw,4.35rem);
  line-height:1.06;
  letter-spacing:-.05em
}
.hero-intro {
  margin-top:28px;
  font-size:1rem;
  max-width:590px
}
.hero-public {
  font-size:.78rem;
  margin-top:20px;
  max-width:500px
}
.hero .actions {
  gap:10px;
  margin-top:25px
}
.hero .bouton {
  font-size:.78rem;
  padding:16px 17px
}
.micro-note {
  font-size:.72rem;
  max-width:460px;
  margin-top:18px;
  line-height:1.6
}
.hero-visuel {
  position:relative;
  padding:35px 0
}
.hero-visuel:before {
  content:"";
  position:absolute;
  inset:0 -15px 0 10px;
  background:var(--sauge);
  border-radius:40% 24% 37% 26%;
  transform:rotate(-8deg);
  opacity:.9
}
.hero-visuel:after {
  content:"";
  position:absolute;
  width:75px;
  height:75px;
  border:1px solid var(--vert);
  border-radius:50%;
  right:-20px;
  top:3px;
  z-index:-1
}
.messagerie {
  position:relative;
  border:1px solid #bcc9be99;
  border-radius:14px;
  padding:22px 20px 0;
  background:var(--blanc);
  box-shadow:0 30px 65px #173e3517;
  transform:rotate(-2deg)
}
.scene-entete {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:24px;
  gap:8px
}
.badge {
  display:inline-block;
  border-radius:30px;
  background:var(--sauge);
  padding:4px 11px;
  font-size:.66rem;
  font-weight:600;
  line-height:1.5
}
.messagerie h2 {
  font-size:1.35rem;
  letter-spacing:-.035em;
  margin-top:14px
}
.pause-scene {
  font-size:.6rem;
  background:transparent;
  border:0;
  text-decoration:underline;
  text-underline-offset:3px;
  padding:4px
}
.scene-corps {
  display:grid;
  grid-template-columns:125px minmax(0,1fr);
  margin-top:24px;
  gap:12px
}
.canaux {
  border-right:1px solid #bcc9be66;
  padding-right:10px;
  display:flex;
  flex-direction:column;
  gap:15px;
  font-size:.61rem;
  color:var(--secondaire)
}
.canal {
  display:flex;
  gap:8px;
  align-items:center
}
.canal.actif {
  background:var(--sauge);
  padding:7px;
  border-radius:4px;
  color:var(--vert);
  font-weight:600;
  margin-left:-5px;
  font-size:.58rem
}
.canaux img {
  margin-top:18px;
  opacity:.3
}
.messages {
  display:grid;
  gap:10px;
  padding-bottom:20px
}
.message {
  padding:13px 11px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  border:1px solid #bcc9be66;
  box-shadow:0 5px 10px #173e3505;
  border-radius:9px;
  background:var(--blanc);
  min-height:104px
}
.avatar-message {
  display:grid;
  place-items:center;
  flex-shrink:0;
  background:var(--vert);
  color:var(--blanc);
  width:28px;
  height:28px;
  border-radius:50%;
  font-weight:600;
  font-size:.85rem
}
.message h3 {
  font-size:.69rem;
  letter-spacing:0;
  margin:1px 0 6px
}
.message p {
  font-size:.64rem;
  line-height:1.5
}
.etiquette {
  display:inline-block;
  font-size:.54rem;
  padding:4px 7px;
  background:var(--sauge);
  border-radius:4px;
  line-height:1.4;
  margin-top:9px;
  color:var(--vert)
}
.etiquette.humaine {
  background:var(--vert);
  color:var(--blanc)
}
.scene-bas {
  font-size:.57rem;
  border-top:1px solid #bcc9be66;
  display:flex;
  align-items:center;
  gap:6px;
  padding:13px 0;
  min-height:44px;
  position:relative
}
.point-statut {
  width:5px;
  height:5px;
  background:var(--vert);
  border-radius:50%
}
.ecriture {
  position:absolute;
  right:0;
  background:var(--blanc);
  padding-left:10px
}
.scene-legende {
  position:relative;
  font-size:.67rem;
  margin:26px 0 -25px 25px;
  display:flex;
  gap:12px;
  align-items:center
}
.trait-legende {
  height:1px;
  width:28px;
  background:var(--vert)
}
mark {
  color:inherit;
  background:transparent;
  position:relative;
  z-index:0;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  background-image:linear-gradient(var(--sauge),var(--sauge));
  background-repeat:no-repeat;
  background-size:100% 34%;
  background-position:0 90%
}
.probleme-section {
  background:var(--blanc);
  border-block:1px solid #bcc9be55
}
.section-entete {
  margin-bottom:36px;
  max-width:900px
}
.section-entete>p:last-child:not(.surtitre) {
  margin-top:22px
}
.grille-trois {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px
}
.carte {
  background:var(--blanc);
  border:1px solid #bcc9be99;
  border-radius:12px;
  padding:30px;
  position:relative;
  isolation:isolate
}
.pictogramme {
  display:inline-grid;
  place-items:center;
  width:56px;
  height:56px;
  background:var(--sauge);
  border-radius:50%;
  color:var(--vert);
  flex-shrink:0
}
.probleme {
  padding:30px 28px;
  border-color:#bcc9be88;
  background:var(--ivoire)
}
.probleme h3 {
  margin-top:26px;
  max-width:280px;
  font-size:1.16rem
}
.probleme p {
  font-size:.86rem;
  margin-top:16px
}
.carte-haut {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:28px
}
.numero-discret {
  font-size:.72rem;
  color:var(--secondaire);
  font-variant-numeric:tabular-nums
}
.carte-offre {
  display:flex;
  flex-direction:column
}
.carte-offre h3 {
  min-height:1.3em
}
.phrase-offre {
  font-size:.86rem;
  line-height:1.6;
  margin-top:14px;
  flex:1
}
.prix {
  display:grid;
  gap:18px;
  border-top:1px solid var(--ligne);
  padding-top:24px;
  margin-top:30px
}
.prix-label {
  display:block;
  font-size:.69rem;
  color:var(--secondaire);
  max-width:230px;
  line-height:1.5;
  margin-bottom:4px
}
.prix strong {
  display:block;
  font-size:1.85rem;
  line-height:1.25;
  letter-spacing:-.04em;
  font-weight:630
}
.periode {
  font-size:1rem;
  letter-spacing:-.02em
}
.montant {
  white-space:nowrap;
  font-variant-numeric:tabular-nums
}
.lien-texte {
  display:inline-flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  font-size:.82rem;
  font-weight:650;
  text-decoration:none;
  border-bottom:1px solid var(--vert);
  padding-bottom:5px;
  width:fit-content
}
.carte-offre .lien-texte {
  margin-top:30px
}
.note-offres {
  max-width:680px;
  text-align:center;
  font-size:.76rem;
  margin:26px auto 0
}
.methode {
  padding-block:62px;
  background:var(--sauge)
}
.methode h2 {
  font-size:2.5rem
}
.etapes {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px;
  list-style:none;
  margin:36px 0 0;
  padding:0;
  position:relative
}
.etapes:before {
  content:"";
  height:1px;
  background:var(--ligne);
  position:absolute;
  top:24px;
  left:25px;
  right:25px
}
.etape {
  position:relative;
  display:flex;
  gap:18px;
  align-items:flex-start
}
.etape h3 {
  font-size:1rem;
  max-width:230px;
  line-height:1.5;
  margin-top:8px;
  letter-spacing:-.015em
}
.numero-etape {
  position:relative;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  flex-shrink:0;
  background:var(--ivoire);
  border:7px solid var(--sauge);
  box-sizing:content-box;
  border-radius:50%;
  font-size:.9rem;
  font-weight:600;
  margin:-7px 0 0 -7px
}
.etape>div {
  background:var(--sauge);
  position:relative
}
.etape p {
  font-size:.9rem
}
.portrait-section {
  padding-bottom:40px
}
.portrait {
  display:grid;
  grid-template-columns:280px 1fr;
  gap:70px;
  align-items:center;
  max-width:1000px;
  margin:auto
}
.photo-cadre {
  background:var(--sauge);
  border-radius:9px 70px 9px 9px;
  overflow:hidden
}
.photo-cadre img {
  width:100%;
  height:300px;
  object-fit:cover;
  object-position:50% 30%
}
.portrait h2 {
  font-size:3.5rem
}
.point-marque {
  color:var(--vert)
}
.portrait p:not(.surtitre) {
  margin-top:24px;
  font-size:.96rem
}
.portrait .lien-texte {
  margin-top:24px
}
.faq-section {
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:70px;
  padding-top:70px
}
.faq-section .section-entete {
  margin-bottom:0
}
.faq-section h2 {
  font-size:2.7rem
}
.accordeon {
  border-bottom:1px solid var(--ligne)
}
.accordeon:first-child {
  border-top:1px solid var(--ligne)
}
.accordeon summary {
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:25px;
  align-items:center;
  cursor:pointer;
  padding:22px 0;
  font-size:.9rem;
  font-weight:600;
  line-height:1.5
}
.accordeon summary::-webkit-details-marker {
  display:none
}
.plus {
  font-size:1.4rem;
  font-weight:400;
  flex-shrink:0
}
.accordeon[open] .plus {
  transform:rotate(45deg)
}
.accordeon-corps {
  padding:0 36px 22px 0;
  font-size:.86rem
}
.grille-decouverte {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:25px;
  margin-top:32px
}
.carte-decouverte h3 {
  margin-top:20px
}
.carte-decouverte p {
  margin:18px 0 24px
}
.video {
  margin:0
}
.video figcaption {
  font-weight:600;
  margin-bottom:16px
}
.video video {
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border-radius:12px;
  background:var(--vert)
}
@media(min-width:1450px) {
  .hero {
    min-height:740px
  }
  .hero h1 {
    font-size:4.5rem
  }
}
@media(max-width:1100px) {
  .hero {
    gap:28px
  }
  .scene-corps {
    grid-template-columns:100px 1fr
  }
  .messagerie {
    padding:18px 14px 0
  }
  .canaux {
    font-size:.55rem
  }
  .message {
    gap:7px;
    padding:12px 8px
  }
  .avatar-message {
    width:24px;
    height:24px
  }
  .carte {
    padding:24px
  }
  .faq-section {
    gap:35px
  }
  .portrait {
    gap:45px
  }
  .hero .bouton {
    font-size:.72rem;
    padding:14px 11px
  }
}
@media(max-width:900px) {
  .scene-corps {
    grid-template-columns:1fr
  }
  .canaux {
    display:none
  }
  .messagerie {
    max-width:420px;
    margin-inline:auto
  }
  .hero {
    gap:32px;
    grid-template-columns:1.1fr .9fr
  }
  .hero h1 {
    font-size:2.8rem
  }
  .message h3 {
    font-size:.74rem
  }
  .message p {
    font-size:.69rem
  }
  .etiquette {
    font-size:.58rem
  }
  .grille-trois {
    gap:14px
  }
  .carte {
    padding:22px
  }
  .carte-offre h3 {
    font-size:1.1rem
  }
  .etapes {
    gap:20px
  }
  .etape {
    gap:12px
  }
  .faq-section {
    grid-template-columns:1fr
  }
  .faq-section .section-entete {
    max-width:600px
  }
  .faq {
    max-width:900px
  }
}
@media(max-width:760px) {
  .hero {
    display:block;
    min-height:0;
    padding-block:35px 48px;
    overflow-x:clip
  }
  .hero h1 {
    font-size:clamp(2.45rem,7.5vw,3.5rem);
    line-height:1.1;
    max-width:600px
  }
  .hero-intro {
    font-size:.94rem;
    margin-top:24px
  }
  .hero .surtitre {
    font-size:.65rem;
    margin-bottom:18px
  }
  .hero-public {
    font-size:.75rem;
    margin-top:18px
  }
  .hero .bouton {
    font-size:.85rem;
    padding:16px
  }
  .hero .actions {
    margin-top:24px
  }
  .micro-note {
    font-size:.7rem
  }
  .hero-visuel {
    margin:38px 8px 18px;
    padding-block:22px
  }
  .hero-visuel:before {
    inset:0 -5px
  }
  .hero-visuel:after {
    right:-4px
  }
  .messagerie {
    transform:rotate(-1.5deg);
    padding:20px 16px 0
  }
  .messagerie h2 {
    font-size:1.45rem
  }
  .scene-corps {
    margin-top:20px
  }
  .messages {
    gap:10px
  }
  .message {
    padding:13px;
    min-height:96px
  }
  .avatar-message {
    width:32px;
    height:32px;
    font-size:.9rem
  }
  .message h3 {
    font-size:.78rem
  }
  .message p {
    font-size:.71rem
  }
  .etiquette {
    font-size:.6rem
  }
  .scene-bas {
    font-size:.57rem
  }
  .scene-legende {
    font-size:.63rem
  }
  .grille-trois {
    grid-template-columns:1fr;
    gap:16px
  }
  .section-entete {
    margin-bottom:30px
  }
  .section-entete h2 {
    font-size:2.25rem
  }
  .section-entete>p:last-child:not(.surtitre) {
    font-size:.94rem
  }
  .probleme {
    display:grid;
    grid-template-columns:44px 1fr;
    column-gap:18px;
    padding:24px
  }
  .probleme .pictogramme {
    grid-row:1/3;
    width:44px;
    height:44px
  }
  .probleme .pictogramme svg {
    width:27px
  }
  .probleme h3 {
    margin-top:0;
    font-size:1.06rem
  }
  .probleme p {
    margin-top:12px;
    font-size:.83rem
  }
  .carte-offre {
    padding:26px
  }
  .carte-offre h3 {
    font-size:1.3rem
  }
  .carte-haut {
    margin-bottom:22px
  }
  .carte-offre .prix {
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-top:24px;
    padding-top:22px
  }
  .carte-offre .prix>div+div {
    border-left:1px solid var(--ligne);
    padding-left:16px
  }
  .prix strong {
    font-size:1.65rem
  }
  .prix-label {
    font-size:.67rem
  }
  .carte-offre .lien-texte {
    margin-top:24px
  }
  .note-offres {
    font-size:.7rem
  }
  .methode {
    padding-block:48px
  }
  .methode h2 {
    font-size:2.2rem
  }
  .etapes {
    grid-template-columns:1fr;
    gap:28px;
    margin-top:30px
  }
  .etapes:before {
    height:auto;
    width:1px;
    left:24px;
    top:25px;
    bottom:25px;
    right:auto
  }
  .etape h3 {
    max-width:260px;
    font-size:1rem;
    margin-top:6px
  }
  .etape>div {
    padding:3px 0
  }
  .portrait-section {
    padding-bottom:0
  }
  .portrait {
    grid-template-columns:1fr;
    gap:28px
  }
  .photo-cadre {
    max-width:240px;
    border-radius:8px 55px 8px 8px
  }
  .photo-cadre img {
    height:260px
  }
  .portrait h2 {
    font-size:3rem
  }
  .portrait .surtitre {
    margin-bottom:12px
  }
  .portrait p:not(.surtitre) {
    font-size:.94rem;
    margin-top:18px
  }
  .faq-section {
    padding-top:64px;
    gap:25px
  }
  .faq-section h2 {
    font-size:2.25rem
  }
  .accordeon summary {
    font-size:.86rem;
    padding-block:20px
  }
  .accordeon-corps {
    font-size:.85rem;
    padding-right:15px
  }
}
.sous-introduction {
  margin-top:-30px;
  margin-bottom:30px
}
.ancres-offres {
  gap:30px;
  flex-wrap:wrap;
  padding-bottom:20px;
  border-bottom:1px solid var(--ligne)
}
.ancres-offres a {
  font-size:.82rem;
  display:flex;
  gap:25px;
  align-items:center
}
.ancres-offres a span {
  font-size:1.2rem
}
.sous-introduction .micro-note {
  max-width:900px
}
.offre {
  scroll-margin-top:100px;
  border-top:1px solid #bcc9be66
}
.offre:nth-child(even) {
  background:var(--sauge)
}
.offre-grille {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:90px
}
.numero-offre {
  display:inline-grid;
  place-items:center;
  background:var(--vert);
  color:var(--ivoire);
  border-radius:50%;
  width:35px;
  height:35px;
  font-size:.75rem;
  margin-right:10px;
  letter-spacing:0
}
.offre h2 {
  font-size:clamp(2rem,3.6vw,3.3rem)
}
.resume-offre {
  font-size:1.05rem;
  margin-top:22px
}
.offre-public {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  border-block:1px solid var(--ligne);
  padding-block:25px;
  margin-block:30px
}
.offre-public h3,.offre-contenu>h3 {
  font-size:.95rem;
  letter-spacing:0
}
.offre-public p {
  font-size:.86rem;
  margin-top:12px
}
.offre .coches {
  font-size:.88rem
}
.encadre-prix {
  padding:38px;
  position:relative
}
.encadre-prix .prix {
  border:0;
  padding:0;
  margin:0;
  gap:28px
}
.encadre-prix .prix>div+div {
  border-top:1px solid var(--ligne);
  padding-top:25px
}
.encadre-prix .prix strong {
  font-size:3.3rem
}
.encadre-prix .periode {
  font-size:1.4rem
}
.encadre-prix .prix-label {
  font-size:.78rem;
  max-width:none
}
.prix-annuel {
  font-size:.85rem;
  margin-top:14px
}
.support-offre {
  font-size:.74rem;
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--ligne)
}
.encadre-prix .bouton {
  width:100%;
  margin-top:24px;
  font-size:.8rem;
  padding:17px 14px
}
.offre-aside {
  padding-top:72px
}
.details-offre {
  margin-top:26px
}
.details-offre .accordeon {
  border-top:none
}
.details-offre summary {
  padding-inline:4px
}
.detail-offre+.detail-offre {
  margin-top:22px
}
.detail-offre h4 {
  font-size:.85rem;
  margin:0 0 10px
}
.detail-offre p,.detail-offre li {
  font-size:.82rem
}
.detail-offre ol {
  padding-left:20px;
  color:var(--secondaire)
}
.allez-plus-loin {
  border-left:2px solid var(--vert);
  padding:20px 24px;
  background:#f7f7f180;
  margin-top:30px
}
.allez-plus-loin h3 {
  font-size:1rem
}
.allez-plus-loin p {
  font-size:.88rem;
  margin-top:10px
}
.visuel-offre {
  margin:28px 0 0;
  padding:18px;
  background:#ffffff99;
  border:1px solid #bcc9be99;
  border-radius:12px
}
.visuel-label {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.visuel-offre svg {
  width:100%;
  height:auto;
  display:block
}
.noeud rect {
  fill:var(--blanc);
  stroke:var(--ligne);
  stroke-width:1
}
.noeud text {
  font-family:inherit;
  font-size:12px;
  fill:var(--vert);
  text-anchor:middle
}
.noeud-sortie rect {
  fill:var(--vert);
  stroke:var(--vert)
}
.noeud-sortie text {
  fill:var(--ivoire);
  font-size:12px
}
.offre .video {
  margin-top:25px
}
@media(max-width:1050px) {
  .offre-grille {
    gap:45px
  }
  .encadre-prix {
    padding:28px
  }
  .offre-public {
    gap:20px
  }
}
@media(max-width:760px) {
  .sous-introduction {
    margin-top:0;
    margin-bottom:25px
  }
  .ancres-offres {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    border:none;
    padding:0
  }
  .ancres-offres a {
    justify-content:space-between;
    border-bottom:1px solid var(--ligne);
    padding:13px 0;
    font-size:.86rem
  }
  .ancres-offres a:after {
    display:none
  }
  .sous-introduction .micro-note {
    margin-top:18px
  }
  .offre-grille {
    display:flex;
    flex-direction:column;
    gap:25px
  }
  .offre {
    padding-block:44px;
    scroll-margin-top:78px
  }
  .offre h2 {
    font-size:2.2rem
  }
  .offre .surtitre {
    margin-bottom:18px
  }
  .resume-offre {
    font-size:.97rem;
    margin-top:18px
  }
  .offre-public {
    grid-template-columns:1fr;
    gap:22px;
    margin-block:24px;
    padding-block:22px
  }
  .offre-public p {
    margin-top:8px
  }
  .offre-aside {
    padding-top:0
  }
  .encadre-prix {
    padding:26px
  }
  .encadre-prix .prix strong {
    font-size:2.75rem
  }
  .encadre-prix .prix {
    gap:24px
  }
  .encadre-prix .bouton {
    font-size:.79rem
  }
  .visuel-offre {
    padding:13px;
    margin-top:25px
  }
  .details-offre {
    margin-top:15px
  }
  .offre .coches {
    font-size:.86rem
  }
}
.contact-principal {
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:80px;
  padding-bottom:60px
}
.diagnostic-encadre {
  background:var(--sauge);
  border-radius:12px;
  padding:34px 38px
}
.diagnostic-encadre h2 {
  font-size:1.9rem
}
.diagnostic-encadre .surtitre {
  font-size:.65rem;
  margin-bottom:14px
}
.diagnostic-encadre .coches {
  margin:24px 0 0
}
.contact-actions .bouton {
  flex:1
}
.coordonnees {
  display:flex;
  flex-wrap:wrap;
  gap:10px 25px;
  font-size:.78rem;
  margin-top:22px;
  overflow-wrap:anywhere
}
.quand-joindre {
  padding:25px 0;
  border-top:1px solid var(--ligne)
}
.quand-joindre h2 {
  font-size:1.5rem;
  margin-top:24px
}
.quand-joindre p {
  font-size:.95rem;
  margin-top:18px
}
.quand-joindre>img {
  opacity:.12;
  margin-top:25px
}
.quand-joindre .pictogramme {
  font-size:2rem
}
.echange {
  border-top:1px solid var(--ligne);
  padding-top:60px
}
.echange h2 {
  max-width:800px
}
.echange .etape>div {
  background:var(--ivoire)
}
.echange .numero-etape {
  background:var(--sauge);
  border-color:var(--ivoire)
}
.echange .etape h3 {
  font-size:1.08rem
}
.echange .etape p {
  margin-top:12px
}
.contact-principal+.echange {
  padding-bottom:100px
}
@media(max-width:900px) {
  .contact-principal {
    gap:40px
  }
  .contact-actions {
    flex-direction:column
  }
  .diagnostic-encadre {
    padding:28px
  }
}
@media(max-width:760px) {
  .contact-principal {
    grid-template-columns:1fr;
    gap:38px;
    padding-bottom:45px
  }
  .diagnostic-encadre {
    padding:26px
  }
  .diagnostic-encadre h2 {
    font-size:1.55rem
  }
  .diagnostic-encadre .coches {
    font-size:.94rem
  }
  .quand-joindre {
    position:relative;
    padding-top:28px;
    padding-right:15px
  }
  .quand-joindre h2 {
    font-size:1.5rem;
    margin-top:18px
  }
  .quand-joindre>img {
    display:none
  }
  .quand-joindre p {
    font-size:.94rem
  }
  .quand-joindre .pictogramme {
    width:42px;
    height:42px;
    font-size:1.6rem
  }
  .echange {
    padding-top:40px
  }
  .echange h2 {
    font-size:2rem
  }
  .echange .etape {
    gap:18px
  }
  .echange .etapes {
    gap:30px
  }
  .echange .etape p {
    font-size:.9rem;
    line-height:1.65
  }
  .contact-principal+.echange {
    padding-bottom:60px
  }
}
.liste-outils {
  padding-bottom:80px
}
.outil {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  padding:42px;
  scroll-margin-top:100px
}
.outil h2 {
  font-size:2.6rem;
  margin-top:22px
}
.outil h3 {
  font-size:1rem;
  margin-top:30px
}
.outil .coches {
  font-size:.9rem
}
.outil .visuel-offre {
  margin:0;
  min-height:280px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:var(--ivoire)
}
.outil .bouton {
  margin-top:16px
}
.statut-brouillon {
  font-size:.7rem;
  color:var(--secondaire)
}
.outil+.outil {
  margin-top:30px
}
@media(max-width:900px) {
  .outil {
    gap:30px;
    padding:30px
  }
  .outil h2 {
    font-size:2.2rem
  }
}
@media(max-width:760px) {
  .outil {
    grid-template-columns:1fr;
    padding:24px;
    gap:30px
  }
  .outil h2 {
    font-size:2.1rem
  }
  .outil .bouton {
    font-size:.78rem;
    width:100%
  }
  .outil .visuel-offre {
    min-height:0
  }
  .liste-outils {
    padding-bottom:50px
  }
}
.texte-legal {
  max-width:850px;
  margin-left:max(48px,calc((100% - 1240px)/2));
  padding-bottom:100px;
  font-size:1rem
}
.texte-legal p+p {
  margin-top:25px
}
.retour {
  padding-bottom:100px
}
@media(max-width:1000px) {
  .texte-legal {
    margin-left:24px
  }
}
@media(max-width:760px) {
  .texte-legal {
    margin-left:20px;
    padding-bottom:65px;
    font-size:.94rem
  }
  .retour {
    padding-bottom:65px
  }
}
.ligne-masque {
  display:block;
  overflow:clip;
  padding-bottom:.08em;
  margin-bottom:-.08em
}
.ligne-titre {
  display:block
}
.surlignement-prepare {
  display:inline;
  background:none;
  position:relative
}
.surlignement-prepare:before {
  content:"";
  position:absolute;
  z-index:-1;
  left:0;
  right:0;
  bottom:.08em;
  height:.34em;
  background:var(--sauge);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.1s var(--courbe)
}
.surlignement-prepare.surligne:before {
  transform:scaleX(1)
}
.hero .surlignement-prepare:before {
  transition-delay:.45s
}
.carte {
  transition:transform .5s var(--courbe),box-shadow .5s var(--courbe),border-color .5s;
  overflow:hidden
}
.halo-carte {
  position:absolute;
  left:0;
  top:0;
  z-index:-1;
  pointer-events:none;
  width:300px;
  height:300px;
  background:radial-gradient(circle,#dbedce99,transparent 65%);
  opacity:0;
  transition:opacity .4s
}
.prix-fenetre {
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none
}
.montant {
  position:relative;
  display:inline-block;
  vertical-align:bottom
}
.prix-ruban {
  display:flex;
  flex-direction:column
}
.prix-ruban>span {
  display:block;
  line-height:inherit
}
.ligne-parcours {
  position:absolute;
  top:24px;
  left:25px;
  right:25px;
  height:1px;
  background:var(--vert);
  transform-origin:left center
}
.entete {
  height:100px;
  background:transparent;
  isolation:isolate
}
.entete:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:#f7f7f1eb;
  backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transform-origin:top;
  transition:transform .4s var(--courbe),border-color .4s
}
.entete.compact:before {
  transform:scaleY(.84);
  border-color:#bcc9be88
}
.entete .navigation {
  transition:transform .4s var(--courbe)
}
.entete.compact .navigation {
  transform:translateY(-8px)
}
.entete .marque {
  transform-origin:left center;
  transition:transform .4s var(--courbe)
}
.entete.compact .marque {
  transform:scale(.9)
}
.menu-bouton {
  display:none
}
.contact-flottant.flottant-initialise {
  display:block;
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:25;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s,visibility .3s;
  pointer-events:none
}
.contact-flottant.visible {
  opacity:1;
  visibility:visible;
  pointer-events:auto
}
.contact-flottant .bouton {
  border-radius:40px;
  font-size:.73rem;
  min-height:48px;
  padding:12px 19px;
  box-shadow:0 7px 30px #173e3533
}
.contact-flottant.visible:before {
  content:"";
  position:absolute;
  inset:0;
  border:1px solid #173e3540;
  border-radius:40px;
  animation:pulsation 4s ease-out infinite;
  pointer-events:none
}
.contact-flottant .fleche {
  display:none
}
.menu-traits {
  width:22px;
  height:12px;
  border-block:1px solid var(--vert)
}
@keyframes pulsation {
  0%,50% {
    transform:scale(1);
    opacity:0
  }
  60% {
    opacity:.5
  }
  100% {
    transform:scale(1.07,1.3);
    opacity:0
  }
}
@media(hover:hover) and (pointer:fine) {
  .carte:hover {
    transform:translateY(-5px);
    border-color:var(--vert);
    box-shadow:0 20px 40px #173e350d
  }
  .carte:hover .halo-carte {
    opacity:1
  }
}
@media(max-width:760px) {
  .entete {
    height:auto;
    min-height:78px
  }
  .entete.menu-initialise {
    height:78px
  }
  .entete.compact:before {
    transform:none
  }
  .entete.compact .navigation {
    transform:none
  }
  .entete.compact .marque {
    transform:none
  }
  .menu-initialise .menu-bouton {
    display:flex;
    align-items:center;
    gap:12px;
    border:0;
    background:transparent;
    padding:12px 0 12px 12px;
    font-size:.75rem;
    z-index:2
  }
  .menu-initialise .navigation {
    flex-wrap:nowrap
  }
  .menu-initialise nav {
    position:fixed;
    inset:78px 0 0;
    background:var(--ivoire);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    padding:50px 30px;
    gap:0;
    transform:translateY(-12px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:transform .5s var(--courbe),opacity .35s,visibility .35s;
    overflow-y:auto
  }
  .menu-initialise nav>a {
    font-size:2rem;
    font-weight:600;
    letter-spacing:-.04em;
    padding:18px 0;
    border-bottom:1px solid var(--ligne)
  }
  .menu-initialise nav>a:after {
    display:none
  }
  .menu-ouvert nav {
    transform:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto
  }
  .menu-ouvert {
    background:var(--ivoire)
  }
  .menu-ouvert .diagnostic-menu {
    display:block;
    margin-top:35px
  }
  .menu-ouvert .diagnostic-menu .bouton {
    width:100%;
    font-size:.85rem;
    padding:17px
  }
  .menu-ouvert .menu-traits {
    border-bottom:0;
    transform:translateY(4px) rotate(45deg)
  }
  .menu-ouvert .menu-traits:after {
    content:"";
    display:block;
    width:22px;
    border-top:1px solid var(--vert);
    transform:translateY(-1px) rotate(90deg)
  }
  .ligne-parcours {
    height:auto;
    width:1px;
    left:24px;
    top:25px;
    bottom:25px;
    right:auto;
    transform-origin:center top
  }
  .contact-flottant.flottant-initialise {
    right:16px;
    bottom:16px
  }
  .contact-flottant .bouton {
    font-size:.7rem;
    padding:11px 16px;
    min-height:45px
  }
  .contact-flottant .icone {
    width:20px;
    height:20px
  }
}
@view-transition {
  navigation:auto
}
::view-transition-old(root) {
  animation:page-sortie .18s ease-out both
}
::view-transition-new(root) {
  animation:page-entree .28s var(--courbe) both
}
@keyframes page-sortie {
  to {
    opacity:0
  }
}
@keyframes page-entree {
  from {
    opacity:0;
    transform:translateY(6px)
  }
  to {
    opacity:1;
    transform:none
  }
}
@media(prefers-reduced-motion:reduce) {
  .surlignement-prepare:before {
    transform:none
  }
  .carte:hover {
    transform:none
  }
  .halo-carte {
    display:none
  }
  .ligne-parcours {
    transform:none!important
  }
  .contact-flottant.visible:before {
    display:none
  }
  ::view-transition-old(root),::view-transition-new(root) {
    animation:none!important
  }
}
.legende-svg {
  font-family:inherit;
  font-size:11px;
  fill:var(--secondaire)
}
.appel-final :focus-visible {
  outline-color:var(--ivoire)
}
.video .lien-texte {
  margin-top:16px
}
/* Séquences animées (accueil et offres) : sans .anime, chaque scène montre son état final. */
.lecteur-seul {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}
.sans-transition,.sans-transition * {
  transition:none!important;
  animation:none!important
}
.logo {
  display:inline-grid;
  place-items:center;
  flex:none;
  width:30px;
  height:30px;
  padding:6px;
  border-radius:50%;
  background:var(--blanc);
  box-shadow:0 0 0 1px #bcc9be88
}
.logo svg {
  width:100%;
  height:100%
}
.logo-whatsapp {
  color:#25d366
}
.logo-gmail {
  color:#ea4335
}
.logo-instagram {
  color:#e4405f
}
.logo-messenger {
  color:#0a7cff
}
.logo-web {
  color:var(--vert)
}
.boite-canaux {
  display:flex;
  gap:4px
}
.boite-canaux .logo {
  width:22px;
  height:22px;
  padding:4px
}
.scene-ecran {
  position:relative;
  margin-top:16px;
  transition:opacity .5s
}
.scene.anime.fin .scene-ecran {
  opacity:0
}
.scene .ligne,.scene .statut,.scene .bandeau-final,.scene .boite,.scene .msg,.scene .rail li,.scene .mail,.scene .tag,.scene .controles li,.scene .document,.scene .tampon,.scene .notif,.scene .aspiration,.scene .badge-suite {
  transition:opacity .5s ease,transform .7s var(--courbe),visibility .5s,background-color .4s,color .4s,border-color .4s
}
/* Accueil : le chaos, puis l’ordre */
.scene-accueil {
  padding-bottom:20px
}
.scene.anime:not(.etape-3) .badge-suite {
  opacity:0
}
.chaos {
  display:none
}
.scene.anime .chaos {
  display:block;
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none
}
.bulle-canal {
  position:absolute;
  display:flex;
  align-items:center;
  gap:8px;
  max-width:68%;
  padding:7px 14px 7px 7px;
  border:1px solid #bcc9be88;
  border-radius:16px;
  background:var(--blanc);
  box-shadow:0 12px 26px #173e351a;
  font-size:.72rem;
  line-height:1.3;
  transform:rotate(var(--r));
  transition:left .9s var(--courbe),top .9s var(--courbe),opacity .5s,transform .7s var(--courbe)
}
.bulle-canal:nth-child(1) {
  left:0;
  top:2%;
  --r:-4deg
}
.bulle-canal:nth-child(2) {
  left:34%;
  top:19%;
  --r:3deg;
  transition-delay:.12s
}
.bulle-canal:nth-child(3) {
  left:4%;
  top:38%;
  --r:2deg;
  transition-delay:.24s
}
.bulle-canal:nth-child(4) {
  left:30%;
  top:57%;
  --r:-3deg;
  transition-delay:.36s
}
.bulle-canal:nth-child(5) {
  left:8%;
  top:76%;
  --r:4deg;
  transition-delay:.48s
}
.scene.anime:not(.etape-1) .bulle-canal {
  opacity:0;
  transform:rotate(var(--r)) scale(.5)
}
.scene.anime.etape-2 .bulle-canal {
  animation:trembler .45s ease-in-out 2
}
.scene.anime.etape-3 .bulle-canal {
  left:calc(50% - 60px);
  top:42%;
  opacity:0;
  transform:scale(.2);
  animation:none
}
.pastille {
  position:absolute;
  top:-9px;
  right:-9px;
  display:grid;
  min-width:21px;
  height:21px;
  padding:0 5px;
  border-radius:11px;
  background:#c4383d;
  color:#fff;
  font-size:.62rem;
  line-height:21px;
  text-align:center
}
.pastille span {
  grid-area:1/1;
  transition:opacity .3s
}
.pastille span+span,.scene.anime.etape-2 .pastille span:first-child {
  opacity:0
}
.scene.anime.etape-2 .pastille span+span {
  opacity:1
}
.scene.anime.etape-2 .pastille {
  animation:pulsation .5s ease 2
}
.aspiration {
  position:absolute;
  left:50%;
  top:42%;
  display:flex;
  gap:10px;
  margin:0;
  padding:11px 20px;
  border-radius:30px;
  background:var(--vert);
  color:var(--blanc);
  font-weight:700;
  font-size:.9rem;
  white-space:nowrap;
  opacity:0;
  transform:translate(-50%,-50%) scale(.8)
}
.scene.anime.etape-3:not(.etape-4) .aspiration {
  opacity:1;
  transform:translate(-50%,-50%) scale(1)
}
.scene.anime:not(.etape-4) .boite {
  opacity:0;
  transform:scale(.96)
}
.boite-titre {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  font-size:.92rem
}
.boite-liste {
  display:grid;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none
}
.boite-liste .ligne {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0;
  padding:10px;
  border:1px solid #bcc9be66;
  border-radius:10px;
  background:var(--blanc);
  font-size:.72rem;
  line-height:1.4
}
.ligne-texte {
  flex:1;
  min-width:0
}
.ligne-texte b {
  font-size:.74rem
}
.ligne-texte p {
  margin:2px 0 0;
  color:var(--secondaire)
}
.ligne-texte .reponse {
  display:inline-block;
  margin-top:6px;
  padding:5px 9px;
  border-radius:8px;
  background:var(--sauge);
  color:var(--vert);
  transition:clip-path 1.3s steps(28)
}
.statut {
  flex:none;
  padding:3px 8px;
  border-radius:20px;
  font-size:.6rem;
  font-weight:700;
  white-space:nowrap
}
.statut.auto {
  background:var(--sauge);
  color:var(--vert)
}
.statut.humain {
  background:#fdecc8;
  color:#7a4b00
}
.scene.anime:not(.etape-4) .ligne {
  opacity:0;
  transform:translateY(10px)
}
.ligne:nth-child(2) {
  transition-delay:.1s
}
.ligne:nth-child(3) {
  transition-delay:.2s
}
.ligne:nth-child(4) {
  transition-delay:.3s
}
.scene.anime:not(.etape-5) .reponse {
  clip-path:inset(0 100% 0 0)
}
.scene.anime:not(.etape-5) .statut {
  opacity:0;
  transform:scale(.7)
}
.ligne:nth-child(1) .statut {
  transition-delay:1.4s
}
.ligne:nth-child(2) .statut {
  transition-delay:.4s
}
.ligne:nth-child(3) .statut {
  transition-delay:.8s
}
.ligne:nth-child(4) .statut {
  transition-delay:1.1s
}
.bandeau-final {
  margin:12px 0 0;
  padding:9px;
  border-radius:10px;
  background:var(--vert);
  color:var(--blanc);
  font-weight:700;
  font-size:.82rem;
  text-align:center
}
.scene.anime:not(.etape-6) .bandeau-final {
  opacity:0;
  transform:translateY(8px)
}
@keyframes trembler {
  0%,100% {
    translate:0
  }
  25% {
    translate:-3px 1px
  }
  75% {
    translate:3px -1px
  }
}
@keyframes pulsation {
  50% {
    scale:1.25
  }
}
@keyframes tourner {
  to {
    transform:rotate(1turn)
  }
}
/* Offres : scènes en pleine largeur */
.scene-offre {
  margin:30px 0;
  padding:18px;
  border:1px solid #bcc9be99;
  border-radius:18px;
  background:linear-gradient(180deg,var(--blanc),var(--ivoire));
  box-shadow:0 24px 50px #173e3512
}
.fenetre {
  overflow:hidden;
  border:1px solid #bcc9be66;
  border-radius:14px;
  background:var(--blanc)
}
.fenetre-barre {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-bottom:1px solid #bcc9be55;
  background:var(--ivoire);
  font-size:.85rem
}
.fenetre-barre>.logo {
  width:26px;
  height:26px;
  padding:5px
}
.fenetre-barre small,.fenetre-barre .boite-canaux {
  margin-left:auto
}
.fenetre-barre small {
  color:var(--secondaire);
  font-size:.66rem
}
.fil {
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px;
  background:var(--ivoire)
}
.msg {
  display:flex;
  align-items:flex-end;
  gap:8px;
  max-width:86%
}
.msg .logo {
  width:26px;
  height:26px;
  padding:5px
}
.msg.vous {
  align-self:flex-end;
  justify-content:flex-end
}
.bulle {
  padding:10px 13px;
  border-radius:14px 14px 14px 4px;
  background:var(--blanc);
  box-shadow:0 2px 6px #173e350f;
  font-size:.86rem;
  line-height:1.45
}
.bulle b {
  display:block;
  margin-bottom:2px;
  color:var(--secondaire);
  font-size:.68rem
}
.vous .bulle {
  border-radius:14px 14px 4px 14px;
  background:var(--sauge)
}
.paire {
  display:grid;
  justify-items:end
}
.paire>.msg {
  grid-area:1/1;
  max-width:86%
}
.piece {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
  padding:8px 10px;
  border:1px solid #bcc9be66;
  border-radius:10px;
  background:var(--blanc);
  font-weight:600
}
.piece small {
  display:block;
  color:var(--secondaire);
  font-size:.64rem;
  font-weight:400
}
.icone-pdf {
  display:grid;
  place-items:center;
  flex:none;
  width:32px;
  height:38px;
  border-radius:5px;
  background:#c4383d;
  color:#fff;
  font-size:.58rem;
  font-weight:800
}
.lu {
  display:block;
  margin-top:4px;
  color:var(--secondaire);
  font-size:.64rem;
  text-align:right
}
.preparation {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px
}
.progression {
  flex-basis:100%;
  height:5px;
  overflow:hidden;
  border-radius:5px;
  background:var(--blanc)
}
.progression i {
  display:block;
  height:100%;
  background:var(--vert);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.8s ease
}
.scene.anime.etape-2 .progression i {
  transform:scaleX(1)
}
.scene-regroupes .m2,.scene-auto .v1,.scene-auto .v2 {
  opacity:0;
  visibility:hidden
}
.scene-regroupes.anime.etape-2:not(.etape-3) .m2,.scene-auto.anime.etape-2:not(.etape-3) .v1,.scene-auto.anime.etape-3:not(.etape-4) .v2 {
  opacity:1;
  visibility:visible
}
.scene-regroupes.anime:not(.etape-1) .m1,.scene-regroupes.anime:not(.etape-3) .m3,.scene-regroupes.anime:not(.etape-4) .m4,.scene-regroupes.anime:not(.etape-5) .m5,.scene-auto.anime:not(.etape-1) .m1,.scene-auto.anime:not(.etape-4) .v3 {
  opacity:0;
  visibility:hidden;
  transform:translateY(12px)
}
.verification {
  background:var(--blanc)!important;
  color:var(--secondaire);
  font-style:italic
}
.rouage {
  display:inline-block;
  width:14px;
  height:14px;
  margin-right:8px;
  border:2px solid var(--vert);
  border-right-color:transparent;
  border-radius:50%;
  vertical-align:-2px;
  animation:tourner .8s linear infinite
}
.creneaux {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px
}
.creneaux span {
  padding:4px 11px;
  border:1px solid var(--vert);
  border-radius:20px;
  background:var(--blanc);
  color:var(--vert);
  font-size:.8rem;
  font-weight:700
}
.rail {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 14px;
  padding:0;
  list-style:none
}
.rail li {
  flex:1;
  margin:0;
  padding:6px 10px;
  border:1px solid var(--vert);
  border-radius:20px;
  background:var(--vert);
  color:var(--blanc);
  font-size:.7rem;
  font-weight:700;
  text-align:center;
  white-space:nowrap
}
.scene-sur-mesure.anime:not(.etape-2) .r1,.scene-sur-mesure.anime:not(.etape-3) .r2,.scene-sur-mesure.anime:not(.etape-4) .r3,.scene-sur-mesure.anime:not(.etape-5) .r4,.scene-sur-mesure.anime:not(.etape-6) .r5 {
  border-color:#bcc9be88;
  background:var(--blanc);
  color:var(--secondaire)
}
.atelier {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:14px
}
.mails {
  margin:0;
  padding:6px;
  list-style:none
}
.mail {
  display:grid;
  grid-template-columns:1fr auto;
  gap:2px 10px;
  margin:0;
  padding:9px 10px;
  border-radius:8px;
  font-size:.8rem
}
.mail span {
  color:var(--secondaire);
  font-size:.72rem
}
.mail .tag {
  grid-column:2;
  grid-row:1/3;
  align-self:center;
  padding:3px 8px;
  border-radius:20px;
  background:var(--ivoire);
  color:var(--secondaire);
  font-size:.62rem;
  font-style:normal;
  font-weight:700
}
.mail .tag-devis {
  background:#fdecc8;
  color:#7a4b00
}
.mail.nouveau {
  background:#fdecc8;
  box-shadow:inset 3px 0 0 #ea4335
}
.scene-sur-mesure.anime:not(.etape-1) .nouveau {
  opacity:0;
  transform:translateY(-14px)
}
.scene-sur-mesure.anime:not(.etape-2) .tag {
  opacity:0;
  transform:scale(.6)
}
.panneau {
  display:grid;
  align-content:start;
  gap:12px
}
.controles {
  display:grid;
  gap:7px;
  margin:0;
  padding:12px;
  border:1px solid #bcc9be66;
  border-radius:12px;
  background:var(--blanc);
  font-size:.8rem;
  list-style:none
}
.controles li {
  margin:0
}
.controles li:before {
  content:"✓";
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  margin-right:8px;
  border-radius:50%;
  background:var(--vert);
  color:var(--blanc);
  font-size:.6rem
}
.controles li:nth-child(2) {
  transition-delay:.3s
}
.controles li:nth-child(3) {
  transition-delay:.6s
}
.scene-sur-mesure.anime:not(.etape-3) .controles li {
  opacity:0;
  transform:translateX(-8px)
}
.document {
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 12px 30px;
  border:1px solid #bcc9be66;
  border-radius:12px;
  background:var(--blanc);
  font-size:.82rem
}
.document>div {
  flex:1
}
.lignes {
  display:grid;
  gap:5px;
  margin-top:7px
}
.lignes i {
  display:block;
  height:5px;
  border-radius:3px;
  background:var(--ligne);
  transform-origin:left;
  transition:transform .6s ease
}
.lignes i:nth-child(2) {
  width:80%;
  transition-delay:.3s
}
.lignes i:nth-child(3) {
  width:55%;
  transition-delay:.6s
}
.scene-sur-mesure.anime:not(.etape-4) .document {
  opacity:0;
  transform:translateY(10px)
}
.scene-sur-mesure.anime:not(.etape-4) .lignes i {
  transform:scaleX(0)
}
.tampon {
  position:absolute;
  right:10px;
  bottom:7px;
  padding:2px 8px;
  border:2px solid var(--vert);
  border-radius:6px;
  background:var(--blanc);
  color:var(--vert);
  font-size:.66rem;
  font-weight:800;
  transform:rotate(-4deg)
}
.scene-sur-mesure.anime:not(.etape-5) .tampon {
  opacity:0;
  transform:rotate(-4deg) scale(1.6)
}
.notif {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:14px;
  padding:10px 14px;
  border:1px solid #bcc9be66;
  border-radius:14px;
  background:var(--blanc);
  box-shadow:0 14px 30px #173e3522;
  font-size:.8rem
}
.notif b,.notif span {
  display:block
}
.notif span {
  color:var(--secondaire)
}
.notif small {
  margin-left:auto;
  color:var(--secondaire);
  font-size:.64rem;
  white-space:nowrap
}
.scene-sur-mesure.anime:not(.etape-6) .notif {
  opacity:0;
  transform:translateY(-10px) scale(.96)
}
@media(max-width:760px) {
  .scene-offre {
    margin:24px 0;
    padding:14px
  }
  .atelier {
    grid-template-columns:1fr
  }
  .fil {
    padding:12px
  }
  .bulle {
    font-size:.8rem
  }
  .msg,.paire>.msg {
    max-width:94%
  }
  .rail li {
    flex:1 1 30%;
    padding:5px 6px;
    font-size:.64rem
  }
  .bulle-canal {
    font-size:.66rem
  }
}
@media(prefers-reduced-motion:reduce) {
  .rouage {
    animation:none
  }
}